9 Reasons Why SVGs are Important for the Web

SVGDespite being a W3C specification since 2001, Scalable Vector Graphics have never received the attention they deserve. Primarily, this is because the majority of web users (using Internet Explorer) are unable to view the images without a plugin.

SVG is an XML-based file format which describes graphic vectors such as lines, paths, boxes, circles, polygons, and text with color, gradients, patterns, opacity etc. Bitmaps can also be embedded within an SVG when necessary.

There are a number of reasons why SVG is ideally suited to the web platform:

1. W3C Standards
SVG is an open standard and developers may use it without restrictions.

2. Image scaling
SVGs can be scaled to any size without incurring pixelation or loss of detail.

3. Smaller file size
Simple images such as logos and charts will generally have a smaller file size than their bitmapped JPG, PNG or GIF equivalent.

4. SVG tools are already available
SVG XML code can be created, verified, manipulated and compressed using a variety of existing tools from Notepad to Inkscape, OpenOffice.org Draw, and Microsoft Visio.

5. Server-side generation
SVG XML can be created and manipulated on the server using PHP, .NET, Python or any other language/framework.

6. Client-side generation
SVG XML can be created and manipulated on the client using JavaScript to create dynamic effects and animation. Event handlers, such as click or mouseover, can be applied to any SVG element.

7. Compatibility
Although the facilities offered by SVG rendering engines may differ, the format is backward and forward compatible. SVG engines will render what they can and ignore the rest.

8. Accessibility
SVGs are accessible; text and drawing elements are machine-readable so screen readers can other devices can parse the images.

9. Search Engine Optimization
SVGs offer improved SEO because Google, Yahoo, Bing, and other search engines can index an image’s content.

To some extent, canvas has stolen SVG’s thunder because it can be supported in IE without a plugin using VML and JavaScript. However, canvas does not allow static rendering (images must be generated by code), and drawn elements are not identifiable in a DOM.

IE is the only mainstream browser which does not support SVG. If Microsoft implement SVG in IE9, it offers web developers many exciting opportunities and usage will grow exponentially.

Unfortunately, even if SVG is supported in IE9, the browser will not be available until late 2010. Microsoft are unlikely to implement it within previous versions of the browser, so there would be a considerable delay before IE9 achieves a significant market share. But let’s be thankful Microsoft are considering SVG; we’ve waited a long time.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Andrew Jones

    RafaelJS allows you to use SVG’s and have them work perfectly in IE 6 and later, as well as Firefox, Chrome, etc.

  • http://www.optimalworks.net/ Craig Buckler

    That’s interesting – I didn’t realize Raphael offered that (it appears to use VML to support IE). However, whilst it’s very clever, it’d still be better if all browsers had native support for SVG. You could then embed or link to the images without any reliance on JavaScript.

  • Jeff Schiller

    Check out SVG Web for a JS+Flash shim solution proposed by Google to deal with missing SVG support in IE. http://svgweb.googlecode.com/

  • Unomi

    I’ve dabbled with SVG since 2001 and have seen the potential ever since. The adaption was lacking so I discontinued using it. But recently I discovered even jQuery can be used within SVG, so it makes it possible to go all out on dynamic, DOM driven illustrations etc.

    – Unomi -