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.

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

One Response to 'My SVG is Bigger than Your Flash – Presentation Notes'

Subscribe to comments with RSS or TrackBack to 'My SVG is Bigger than Your Flash – Presentation Notes'.

  1. Hello,
    I read your article on Sitepoint as well and I was wondering if you could help me or point me to someone that could help:

    I have been relentlessly trying to write the http content negotiation to test for svg support in php, but it doesn’t seem to work.

    What I am trying to do is if supported, serve a .svg image and if no serve a .png

    But when I tried the syntax, browsers that I knew supported svg didn’t.
    So instead of serving a different image in each case, I had the code echo if it supported it or not.
    But again, browsers that I knew supported it said they did not.

    Do you think you would be able to help me with this or point me to someone who could help me write the syntax properly and understand it?

    Thanks in Advance & Best Regards,
    Irfan.

    P.S. I tried asking in the sitepoint forums, but by the responses, people are telling me that it is impossible. Even though I know it is possible as wikipedia does it.

    Irfan

    12 Oct 11 at 7:30 PM

Leave a Reply