A few weeks ago, right before the Christmas holidays, I gave a brief internal presentation about SVG, an XML-based web standard for interactive images, to my coworkers. Since I was told that the presentation was helpful, I thought I’d share my notes. Those notes follow:
First, credit where credit is due.
I learned almost everything I know about SVG from an acquaintance I met in Australia named Dmitry Baranovskiy. He is a superb client-side web developer who I helped add documentation for a brief time for one of his SVG-related projects called RaphaëlJS. I’ll show you that in a little bit.
Okay, so what is SVG?
What is SVG?
In a sentence, according to Adobe, the originators of the technology:
Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.
What does that mean?
- Scalable means that the technology is natively resolution-independent.
- Vector means that image data is described using relative mathematical coordinates:
- Graphics means that it’s used to create images, but also means it natively supports bitmapped graphics, and videos, using
But wait, there’s ”more”.
Why use SVG?
- It’s text-based, which means it’s highly searchable. Remember SEO in the heyday of the “Flash website”? Now Flash has all kinds of meta attributes to provide extra SEO oomph, but if we had just used SVG in the first place, we wouldn’t have had this problem.
- That means we also get custom fonts, for free.
- Oh, and it’s super accessible, too.
- Mobile support: SVG comes in a few flavors that are all interoperable with each other in order to define different levels of support. Whereas Flash is monolithic, SVG comes in profiles that support low-end devices with reasonable quality while still providing high-fidelity content. Just like the Web was designed to do.
- Don’t believe me? Watch this: Raphaël Rotation on iPod touch
- And, if you care about such things, SVG has been an open standard well before Flash was.
- Opera has full support and has had some amount of support since Opera 8.
- Gecko has had increasing support since 2005.
- WebKit has had increasing support since 2006.
- Internet Explorer (still) has no native support. We hate you, Internet Explorer. (That said, however, Microsoft has just recently joined the W3C‘s SVG Working group, so there may yet be some hope.)
What can we do about IE today?
Here is the breakdown of options we have to deal with IE‘s frustrating lack of support.
- Rely on HTTP content negotiation to serve SVG to supporting browsers, and raster images to Internet Explorer. Works great, except now we’re still using raster images, so basically it feels like 1995 again. It’s also what Wikipedia does.
- Use plugins. Adobe has had one forever called the Adobe SVG Viewer. It’s pretty good…but it’s a plugin. I’m not sure how Flash got away with also being a plugin, but whatever.
- Relent and use Flash on the client-side, but revel in delicious SVG pureness for our source files: Using SVG Path Data in Flash.
- Use a cross-browser API. Turns out, there are quite a few:
- SVG in The Dojo Toolkit – Early and solid, but it uses Dojo (and we don’t).
- svgweb – Google’s experimental library. It’s got the biggest hyperight now.
How do SVG-writing JS frameworks work?
- Writes to the DOM based on your Raphaël commands:
- Writes SVG to supporting browsers.
- Writes VML1 to Internet Explorer.
- Makes you coffee.
Hype it up
- Ajax and PHP SVG Demo: Realtime Charting
Sources and additional resources
- SVG Is The Future Of Application Development – Describes other awesome uses of SVG.
- Start Using Web Vector Graphics Today – Web Directions South presentation by Dmitry Baranovskiy.
- SVG – a slideshow overview by Dmitry Baranovskiy.
- SVG Intro on W3Schools.com. (Quick ‘n’ dirty and not highly recommended, but an oft-cited reference so you might as well know it exists.)
- VML is Microsoft’s proprietary, non-standard Vector Markup Language. It’s basically the exact same thing as SVG, but only works in Internet Explorer. Because whereas Apple only thinks differently, Microsoft has to do it differently. We hate you, Microsoft. [↩]