How to use Scalable Vector Graphics in HTML5

Here’s Part 2 of the ‘How to’ series on HTML5 by Martin Beeby - if you’re not sure exactly how to use SVG’s this is for you. Here’s Part 1 (How to Play video in HTML5) in case you missed it…

How to use Scalable Vector Graphics in HTML5

Scalable Vector Graphics have been around for a while. For me they are a bit like a second cousin from a failed marriage; I’ve never really given them much attention.

Now that SVG’s have been baked into the HTML5 Specification it’s about time we all looked at what they can do in more detail as it’s highly likely that they will be used far more in the future.

An SVG file is made up of code, which looks a lot like XML; the code is rendered in HTML5 compliant browsers as graphics. For example, if we wanted to create a red circle we could write the following snippet:


You can view an example here in an HTML5 compatible browser. If you don’t have one, you can download the Internet Explorer 9 Platform Preview.

The advantage of SVG’s over a JPEG or GIF is that it can be scaled, so as we zoom into the image it won’t become pixelated. The other advantage is that it can be searched, as it’s made up of plain old XML. This also provides the potential to make the information contained in graphics, accessible to screen readers.

I’ve always been a fan of vector images ever since I started designing web graphics in the original Macromedia Fireworks; I was quite disappointed to discover that Fireworks CS5 didn’t have an export to SVG. There are, however, a number of tools that are capable of importing and exporting SVG’s such as Illustrator, Microsoft Visio and InkScape.

Some websites, like Wikipedia, already offer many images in SVG format, however since most users browsers don’t have SVG support they tend to also provide the images in raster formats such as JPEG, BMP or GIF.

As HTML5 capable browsers become popular, more images will be rendered in SVG. The ability of the format to maintain its crisp outlines whilst being zoomed provides real value to users, particularly those consuming content on mobile browsers where screen real estate is smaller and pinch zooming is a common task.

More about SVG from W3C’s Doug Schepers.

Part 3 to follow!

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>