Category: 

What are Scalable Vector Graphics?

Article Details
  • Written By: John M. Edge
  • Edited By: Angela B.
  • Last Modified Date: 06 September 2016
  • Copyright Protected:
    2003-2016
    Conjecture Corporation
  • Print this Article
Free Widgets for your Site/Blog
In late 19th-century London, mail was delivered to residential addresses up to twelve times each day.   more...

September 28 ,  1924 :  Two US military planes complete the first flights around the world.  more...

Scalable vector graphics (SVG) are a type of graphic format commonly found on websites and the Internet. Scalable vector graphics are particularly well suited to use on the Internet because of their small storage size and ability to be scaled up or down in display size. Scalable vector graphics are also beneficial in web design because of their cross-platform nature.

One of the most unique features of SVG files is their scalability. Scalable vector graphics are unlike typical raster bitmap formats such as JPEG or BMP files. Vector graphics use a set of mathematical points to define the outlines and colors of an image; this is unlike bitmaps, which use pixels to define the image. This method means a vector file can be made smaller or much larger in display without the image degradation that bitmaps suffer.

Scalable vector graphics are also XML based. Their text-based nature makes SVG files indexable and searchable, and their XML base means they are easily compressed. SVG files can easily be compressed by 20 percent, which is a great benefit to preserving bandwidth in a Web setting. SVG files can handle two different types of information, presenting either text or vector graphics. This means other file formats are often used to display more detailed images, such as jpegs or gifs.

Ad

The World Wide Web Consortium (W3C) developed the scalable vector graphics format in the late 1990s. They were developed as an open system and, as such, they are royalty free. Another result of the SVG format being developed as an open system is that it is a cross-platform format. SVG files are supported across a variety of computer systems and web browsers.

The SVG format is compatible with the Microsoft® Windows® operating system, Apple® Macintosh® systems, Linux® systems, and Unix® systems. SVG files are natively supported by most modern Web browsers with one notable exception. Microsoft's Internet Explorer®, the browser included with Windows® operating systems, does not natively support SVG files. Instead, users of Internet Explorer® must have an external plug-in installed to view SVG files.

Scalable vector graphics are one example of how computer formats and software are being shaped by the importance of the Internet. Their small size, scalability, and XML base all lend themselves well to the SVG format's widespread adoption on websites and elsewhere on the Internet. Scalable vector graphics are but one of the many web-ready file systems and one of many to come.

Ad

You might also Like

Recommended

Discuss this Article

Markerrag
Post 4

@Soulfox -- I can't disagree with that, but it is hard to deny that vector graphics have gotten more complex over the years. Think back to the arcade days when some games (Asteroids, Tempest and Battlezone, to name but three) were in vector graphics. Those were high res graphics that had a distinct, "wire frame" look to them.

You got the outline of images but they were never filled in with surfaces and textures.

That has changed to where high resolutions are expected as well as surfaces and textures. One can only assume they will get more complex in the future and, with any luck, we will have one, standard graphics format for digital photos that will meet everyone's needs.

Soulfox
Post 3

@Logicfest -- But there are limitations to what you can do with vector graphics. They are best for simpler designs because they are based on mathematical formulas and you can only cluster so many of those formulas together in one file.

In other words, vector graphics are great for some uses but we still need conventional PNG and JPG graphics (those are called raster graphics, by the way) for more complex images like photographs and such. Both vector and raster graphics have their uses and limitations. The best thing to do is realize the advantages and disadvantages of both and use them accordingly.

Logicfest
Post 2

Vector graphics are also becoming more popular in graphics design companies all over the place. That is because you can scale them all day long without losing resolution.

Compare that to the typical PNG or JPG graphic. With those, points per inch (the pixel count) is critical and finite. All of that just means that if you have a small graphic then it will distort and become useless if blown up to big.

The solution to that problem is to make all PNG or JPG files absolutely huge or to save graphics in a smaller format where the pixel count doesn't really matter because it is recalculated as it is made larger or smaller. That, folks, is what

the vector graphic does.

Why do graphics design businesses love them? They are ideal for logos and such because they are small files that can be shipped around easily but can be scaled so they look as good on a business card as they do on a billboard.

Post your comments

exception 'Exception' with message 'error writing captcha: Duplicate entry '2147483647' for key 'PRIMARY'' in /ssd/www/wisegeek/public_html/_core/classes/public/Captcha.php:44
Stack trace:
#0 /ssd/www/wisegeek/public_html/_core/controls/public/ControlDiscussionPostBox.php(324): Captcha->createCaptcha()
#1 /ssd/www/wisegeek/public_html/framework/classes/Control.php(104): ControlDiscussionPostBox->preRender(false)
#2 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): Control->render()
#3 /ssd/www/wisegeek/public_html/tpl/default-nocustom-lu/pages/public/article/article.htm(526): Control->__toString()
#4 /ssd/www/wisegeek/public_html/framework/classes/Control.php(300): require('/ssd/www/wisege...')
#5 /ssd/www/wisegeek/public_html/framework/classes/Control.php(309): Control->requireTpl('pages/public/ar...', Object(PageArticleCom), true)
#6 /ssd/www/wisegeek/public_html/framework/classes/Control.php(131): Control->renderTpl('pages/public/ar...', Object(PageArticleCom))
#7 /ssd/www/wisegeek/public_html/framework/classes/FormDataControl.php(87): Control->renderTemplate()
#8 /ssd/www/wisegeek/public_html/framework/classes/Control.php(109): FormDataControl->renderTemplate()
#9 /ssd/www/wisegeek/public_html/framework/classes/ScriptPage.php(50): Control->render(false)
#10 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): ScriptPage->render()
#11 /ssd/www/wisegeek/public_html/framework/classes/Page.php(97): Control->__toString()
#12 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(443): Page->processRequest()
#13 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(7): PublicFrontController->renderPage()
#14 /ssd/www/wisegeek/public_html/index.php(11): PublicFrontController::run()
#15 {main}