SVG

From RuntimeWiki

Jump to: navigation, search

In the 2008 OpenAjax browser wishlist, vector graphics (SVG and Canvas) was the top request. This feature, SVG, consists of the following requests:

  • To Microsoft, add complete and performant support for SVG to IE
  • To the WebKit, Mozilla and IE teams, implement SVG as completely as Opera does so that developers can leverage the full power of SVG within their web pages
  • All browsers need to support both external SVG (referenced by OBJECT, EMBED or IMG tags or background-image properties) and inline SVG, at least when the surrounding content is XHTML, but preferably also when the surrounding content is plain HTML in the same manner as SVGWeb.

Background info: differences between SVG and Canvas

The Wikipedia page on SVG gives a good overview of the SVG language and the current industry support and usage of SVG.

Here is a quick summary of the feature differences between SVG and Canvas:

  • Canvas is a direct-draw set of JavaScript APIs that provide a relatively simple and easy-to-implement set of 2D features and is evolving with some important features not available for SVG at this point (e.g., perspective transforms, ability to grab the color values at a particular pixel, and 3D). Canvas only offers a procedural interface. Object-oriented interactivity is challenging because Canvas lacks object-level hit testing.
  • SVG is an XML format (including XML namespaces) that has a large spec that takes considerable effort to implement completely. SVG builds an object tree and supports object-oriented interactivity (e.g., mouseover on a particular shape within a larger picture) and the same event APIs as HTML. SVG supports declarative animation via <animate> elements. SVG can styled with CSS in the same manner as HTML. With certain modern browsers, if you are clever, you can include SVG markup inline within HTML pages.

Cool graphics effects are often better in Canvas than SVG due to higher performance. Information graphics (e.g., live business charts with associated sliders and tooltips over graphics) are often easier in SVG than Canvas due to object-level interactivity.

Current browser support

Here is a summary of current browser support for SVG:

  • Opera and WebKit browsers supports SVG completely, passing all of the Acid3 SVG tests. According Jeff Shiller's matrix, Opera supports the SVG spec at a 94% level and WebKit is at 82%.
  • Mozilla offers strong support for static SVG and is adding support for SVG animation with Firefox 3.7. According Jeff Shiller's matrix, Mozilla 3.7 daily builds support the SVG spec at a 70% level.
  • IE offers no support for SVG, although two signs that MS might be adding SVG to IE are that MS sponsored SVG Open in Sept 2009 and in early 2010 announced that they will be joining the W3C's SVG WG.

Mozilla, WebKit and Opera all support inline SVG when the surrounding Web page is XHTML. With the SVGWeb library, these browsers (and also IE) support inline SVG without the XHTML requirement.

There are a handful of techniques by which you can add SVG support to existing versions of IE. The most popular option today is the SVGWeb project, an open source effort that adds SVG support to IE (and other browsers when the native browser's SVG support falls short) by cleverly parsing SVG in JavaScript and then rendering via Flash/ActionScript (Flash is nearly always available in IE). SVGWeb performance is good for some types of SVG graphics, but can never be as fast as a well-written native implementation of SVG. According Jeff Shiller's matrix, SVGWeb currently supports the SVG spec at a 50% level, but the past year has been adding features at a faster rate than the native browsers.

Personal tools