For the past decade Flash has been largely the de facto way to do vector graphics and animation on the Web. Flash has brought us a long way, raising the bar for Web users so that we now have high expectations for websites we come across. Implementing the compelling interactivity of Flash, however, has not been a painless experience for developers. Creating a sandalone Flash application hosted by a webpage is straightforward, but the integration between Flash and the Web has been a notoriously difficult problem because Flash is not built with Web technologies. However, the preeminence of Flash is beginning to wane as all major browsers (except MSIE) have implemented Scalable Vector Graphics (SVG), an interactive vector image standard. With SVG, integration with an XHTML webpage is a non-issue since SVG was designed utilizing the core technologies of the Web. Like XHTML, not only is SVG an XML vocabulary but both XHTML and SVG use CSS to style content and both use JavaScript for scripting. Not only does this mean that stylesheets and scripts can be shared among XHTML and SVG documents, but it also means that SVG can be embedded within XHTML, and XHTML within SVG. Indeed, one of SVG’s most compelling features which makes it a viable “Flash killer” is that SVG code can be embedded within XHTML markup, something which is quite impossible for Flash due to its binary SWF file format.

To see a basic example of embedded SVG, look at the Shepherd Interactive logo in the top right of our website; if you are using a browser that supports XHTML and SVG (such as Firefox, Safari, Chrome, and Opera) the logo is rendered from inline SVG. Writing inline SVG is currently complicated by the fact that Internet Explorer supports neither SVG nor XHTML, and of course a large percentage of visitors are using MSIE. In their case, we devised a graceful fallback mechanism which displays plain HTML consisting of a rasterized version of the SVG image (this is graceful degradation and progressive enhancement); this fallback is implemented using SVG’s conditional processing. SVG provides a switch element which can take any number of child elements; an SVG renderer when parsing a switch element will display the first element that it understands and ignore any that follow. So to implement a fallback mechanism, we created a switch element that has two child elements: first is the universally recognized g element which contains the path data for our logo, and second is a foreignObject element which contains the HTML that is rendered if the browser doesn’t support SVG. Here is the basic structure:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
   <title>Logo</title>
   <switch>
      <g>
          <!-- SVG image goes here -->
          <path d="..." />
      </g>
      <foreignObject width="200" height="100">
          <!-- fallback HTML goes here -->
          <img src="logo.png" xmlns="http://www.w3.org/1999/xhtml" alt="Logo" />
      </foreignObject>
   </switch>
</svg>

Browsers that support SVG will ignore the foreignObject element since it appears after the recognized g element. Other browsers like MSIE that do not support SVG will not recognize any of the SVG elements but will only understand the HTML img element in the foreignObject element. Since all of the SVG elements (except title) are empty or contain no text nodes they will not be displayed (a stylesheet for MSIE included via conditional comments may be used to hide non-empty elements like title).

Flash is a great technology and is not going away anytime soon, but SVG is maturing and is becoming a great option for applications like mapping and charting that need integrated and interactive vector images. While SVG’s widespread adoption will be hampered until Microsoft includes support in Internet Explorer, it can be used today (with fallbacks or alternate technologies) and can now be seen on a variety of sites such as Google Maps (e.g. driving directions and election map), in JavaScript libraries like Raphaël, and in a client project that we will be delivering in the coming months. It’s exciting to see how the Web has been recently progressing at such a rapid pace.