Domainmonster.com Domain Editorials
Scalable Vector Graphics
Scalable vector graphics, or SVG, is an XML markup language which describes two-dimensional vector graphics or animations.
Like Flash, SVG renders graphics by following mathematical instructions (rather than by rendering individual pixels, as in raster images such as jpgs or gifs). This means that file sizes for SVG are very small in comparison to raster graphics or movie files, since they consist only of text. Vector graphics like SVG can be scaled indefinitely without loss of quality: this is in contrast to raster images and videos, which lose quality as they are resized or distorted. SVG supports anti-aliased rendering, gradient and pattern fills, text, sophisticated fill effects, and other features.
Flash is all but ubiquitous on the web: new PCs come with Internet Explorer and the Flash plug-in preinstalled. It may seem pointless to think about SVG when Flash is so popular, but there are a couple of good reasons for considering it.
The first is that SVG is web standards compliant, as backed by the World Wide Web Consortium (W3C). SVG is specifically designed to be compatible with other W3C standards such as DOM, CSS and SMIL.
The second is that because native browser (i.e. built-in, as opposed to plug-in) support of SVG is possible, browsers that support SVG natively can handle "compound"documents that contain SVG, XHTML and other elements all mixed up together. Because it is XML-based rather than a closed binary format (as Flash is), it can play a much more integrated part in the web experience than Flash, which functions in little isolated windows by itself. This means that unlike Flash, which is mostly used for functionality and animation, SVG is a viable low-bandwidth option for static graphics such as logos.
The third good reason to use SVG is that it's not proprietary. You can code an SVG image by hand in a text editor (although plenty of good SVG editors exist, including Adobe Illustrator, and the open source equivalent, Inkscape).
Whilst in recent years there has been much enthusiasm for the introduction of SVG on the web, particularly among designers who support web standards, we have not yet seen an explosion of SVG online. This is partly because of limited and inconsistent SVG support in web browsers. Currently, all major browsers with the exception of Internet Explorer have some form of SVG support, but the levels of support in each browser vary considerably. Besides, Internet Explorer users make up well over half of all internet users, so this is a considerable barrier to SVG development (although SVG viewer plug-ins are available for Internet Explorer).
Mozilla in particular continues to work towards full support of SVG in Firefox, but of course, it's a vicious cycle. As long as people don't make use of SVG, support for it won't improve much; but people won't use SVG in web design unless they know that enough people will be able to view their graphics properly.
Another reason for a lack of interest in SVG is Flash ubiquity. Since virtually everyone already has the Flash plug-in, and it's the one plug-in that most people donít mind downloading if they don't have it or need the latest version, SVG has fallen by the wayside.
Native browser support for SVG is slowly improving, and should it eventually become standard, I for one would be delighted to see a growth in SVG online: it will be a step towards increased standards-compliance, accessibility, and smaller page sizes. In the meantime, it's possible to use SVG and have raster graphic alternatives for Internet Explorer users. If you're interested in introducing SVG to your site, here are several useful resources to get you started:
- SVG Wiki
By Brian Jackson