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:

clip_image002

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.

6 Comments So Far, what do you think?

  1. Pingback:How to use semantic tags in HTML5? : Underbelly

  2. Lexus

    Weeeee, what a quick and easy soluotin.

  3. Logo EPS

    Tks for post :)
    You cant download HTML5 in vector format here: http://www.logoeps.com/html5-logo-vector-eps-ai-crd/5899/

  4. Baumr

    Having some problems with SVG and Fireworks, perhaps there’s an easy solution.

    Basically, I used the Export script to SVG (from a Fireworks path), and all I get is the outline. Images and details here on Stack Exchange: http://graphicdesign.stackexchange.com/questions/11473/export-svg-function-in-fireworks-only-creates-outline

    Thanks!

  5. Dalene

    I see a lot of interesting posts on your page. You have to spend a
    lot of time writing, i know how to save you a lot of time,
    there is a tool that creates unique, SEO friendly articles in couple of seconds, just search
    in google – laranita’s free content source

  6. Amos

    It’s awesome to pay a quick visit this web site and reading the views
    of all friends concerning this post, while I am also keen of getting knowledge.

    Look into my web site alpha fuel xt (Amos)

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>