Using SVG in your websites
SVG is an amazingly capable graphics technology with the only problem that it is not supported by all browsers. So what is SVG? According to Adobe, who invented this technology, “Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics”.
Let’s see what this means. Scalable means that the technology is resolution-independent. So whatever the resolution it will look good. Vector means that the image data is described using mathematical coordinates, for example :
<path d="M 100 100 L 14 100
L 120 140 z"/>
Finally, Graphics means that it’s used to create images.
So why should we use SVG? First of all SVG is very highly searchable because SVG images are really just interpreted XML files (just as web pages are interpreted HTML files), and XML is simply plain text. Secondly, like XML, SVG was designed in a modular way. This means that SVG provides strong mobile support. It comes in a few different flavors that are interoperable with one another. It does this by defining profiles to support low-end devices with reasonable quality while still providing high-fidelity content. Finally SVG is an open standard.
Browser Support
Browser support for SVG has been increasing for a long time, and within the past couple of years it’s picked up considerably.
- Opera has full support of SVG.
- Gecko has been supporting SVG from 2005 and nowadays Firefox supports the majority of features of SVG.
- Webkit started supporting SVG from 2006 and Safari (which uses Webkit as its rendering engine) has enough features supported that make the implementation usable.
- Internet Explorer…… Well you know does not support SVG. However recently Microsoft have joined the W3C SVG working group. So there is some hope for the future.
Of course many us cannot ignore Internet Explorer. So what can we do? Here are a number of workarounds for IE:
- Rely on HTTP content negotiation to serve SVG to supporting browsers, and raster images to Internet Explorer. While this works reliably, it feels like 1995 again because you still need two separate pieces of content, unless you build one dynamically from the other. Wikipedia uses this technique.
- Make users install plugins. Adobe has one called Adobe SVG Viewer.
- Another solution is to use a cross-browser API. There are quite a few out there. For those who use Dojo there is SVG for the Dojo toolkit, svgweb is an experimental library by Google and finally there is RaphaëlJS. This is a stand-alone and therefore can be easily mixed with other JavaScript libraries.
So how do these frameworks work. Fortunately SVG-writing JavaScript frameworks all follow the same paradigm:
- Provide a cross-browser JavaScript API for writing SVG commands, and
- Write the appropriate vector graphics language to the DOM nodes based on your commands (SVG to conforming browsers, VML to Internet Explorer).
