File Under: Multimedia, Web Standards

Getting Started with Scalable Vector Graphics (SVG)

Scaling options for SVG images

Scalable Vector Graphics (SVG) have long been the ideal way to create images that need to scale without distorting. For example, SVG is a great format for an icon or logo that needs to be displayed at several sizes without pixelation or other distortion.

Unfortunately SVG’s usefulness on the web has always been curtailed by limited support in popular browsers. However, that’s changed recently with the release of Firefox 4 and Internet Explorer 9, both of which join Opera, Chrome and Safari in offering native support for SVG.

If you’d like to know more about SVG, how to use it and why you’d want to, Microsoft’s Jennifer Yu recently posted a nice overview on how to get started with SVG over at the IEBlog.

Yu covers the basic use cases for SVG, including scalable logos, selectable text within images (great for charts, infographics and the like) and dynamic graphics (for example, route lines overlayed on map tiles).

One thing you won’t get from Yu’s article is info on how to embed your SVG images in HTML. For most browsers you can simply use <img>, though for Firefox 3.6 and below, along with some other older browsers, you’ll need to use <object> (or <iframe>). It’s also now possible to write SVG inline with your HTML, though as Yu points out you’ll need to use the HTML5 doctype for that to work.

Keep in mind that if your site has a lot of traffic from older versions of IE (and that means anything prior to IE 9) you’ll need to have some sort of fallback in place. If you don’t mind involving some JavaScript in the equation, the Raphaël library allows you to easily create and work with SVG objects via JavaScript and will fallback to VML for IE 6+ and other legacy browsers.

For the record, yes, there is a certain irony in learning about SVG from Microsoft given that IE has long been the only web browser without SVG support, but don’t let that stop you from reading through an otherwise quite thorough and informative overview of SVG.

See Also: