Everything In Between

If your project so much as pretends to have a profit motive, I will tell you to go fuck yourself and your project.

seed this page on BitTorrent

My SVG is Bigger than Your Flash – Presentation Notes

one comment

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:

Introduction

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?

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.
  • 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.
  • Easy to learn: there isn’t much new here because it uses everything you already know about XML, CSS, and JavaScript to provide every feature it has. That’s right, you can use plain old HTML for your page content, add some CSS to style it and the SVG, and then JavaScript to script it. “The trifecta” just added another dimension.
  • And, if you care about such things, SVG has been an open standard well before Flash was.

Browser support

  • 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.
    • RaphaëlJS, written by my acquaintance Dmitry Baranovskiy and, of course, my favorite cross-browser SVG toolkit. Since it’s stand-alone, you can actually mix-and-match with your favorite JavaScript framework. In other words, you take your pick of jQuery, YUI, Prototype, or whatever, and layer RaphaëlJS on top for all your SVG-related work. Now that’s creamy.

How do SVG-writing JS frameworks work?

  1. Provides a cross-browser JavaScript API (think jQuery) for writing SVG commands.
  2. Writes to the DOM based on your Raphaël commands:
    • Writes SVG to supporting browsers.
    • Writes VML1 to Internet Explorer.
  3. Makes you coffee.

Hype it up

1 Minute Intro to (Google’s) SVG Web + Demos + rock and roll (because why not?)

Sources and additional resources

  1. 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. []

Written by Meitar

January 7th, 2010 at 5:57 pm

Posted in Web Design,Web Standards

Tagged with