Skip to content

How (I hope) SVG will change the way we build websites

July 20, 2010

Over the past few weeks I’ve had a chance to really dig into a technology that has been lurking around the edges of my radar for quite some time – SVG, or Scalable Vector Graphics.  SVG is, put simply, an XML-based object model for describing graphics.  Similar to other vector-based graphical formats (like Adobe’s Flash or Illustrator native formats), SVG images can be drawn at any size, and will always render clean and sharp.  That makes them bad for things like photographs, but great for the type of common graphics used in web pages for buttons, layout structure, headers – really any type of common graphic.  The great news is that with the upcoming release of IE 9, every major current (and, presumably future) browser version will natively support the format.

The fact that SVG images are scalable makes them ideal for those of us writing web pages that need to look just as good when viewed on a desktop, on an iPad, and on an iPhone or Blackberry.  And by coupling SVG with existing, universally recognized technologies like JavaScript and CSS, developers will be able to use code to modify the XML behind the images on the fly.  That means that a website might use only a single SVG file for all of the buttons on the site, but each button will be rendered with different, context-appropriate text thanks to run-time modifications to the XML.  At SNQ, I have already started using this approach, although in my projects I’m processing the SVG files on the server side and then translating them into more commonly supported image formats, like JPG.  But as cool as that is, the most exciting prospect for me is the possibility of achieving complex animations by accessing these SVG files through JavaScript.

For at least the last several years I have felt that it is clumsy and old-fashioned to have to build twenty different versions of the same graphic when I’m building the structure of a web site.  Aren’t we past the days where we create a never-ending stack of copies of a file, just because one small detail is different?  Every other part of development has found a solution for that scenario, and I’m glad to see a technology that makes that true of web-based images as well … and with the potential to support animation and event-based changes to boot.  As SVG – and its brother-in-arms, HTML 5 – gains more universal support, I hope that we will all benefit from faster development, smaller file sizes, and a richer user experience.

Advertisements
2 Comments leave one →
  1. September 28, 2010 1:38 am

    You gave great points here. I did some research on the subject and have found nearly all people agree with your blog.

    Sent via Blackberry

Trackbacks

  1. How (I hope) SVG will change the way we build websites | Status … « svg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: