HTML5 in the browser: Canvas, video, audio, and graphics

Where Chrome, Firefox, IE, Opera, and Safari stand on HTML5 Canvas, HTML5 video, SVG, and WebGL

Page 4 of 5

Scalable Vector Graphics
As I mentioned in the Canvas section, the Web was built on the idea that data would be delivered in one format, then rendered or interpreted by the local computer. The Scalable Vector Graphics (SVG) format was invented to translate ordinary ASCII text into graphical shapes. The first committees began in the relatively ancient year of 1999, but the hard work is finally reaching fruition. Now that Microsoft is adding SVG support to IE9, all of the major browsers will support the format, more or less.

The goal of the SVG format is to bring the same kind of infinite precision to specifying a drawing that PostScript brought to print documents. Instead of rendering objects by specifying pixels, the drawing is made of lines and shapes, which are spelled out with tags like this one for creating a circle with a radius of 40 pixels:

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red">

The results are great for line drawings because the browser can create an image tuned to the resolution of the screen. The user can zoom in or out and the video card renders the result. Animated videos and games made of animated sprites are easy to specify and deliver because they can be so small. Even though all of the tags make the format insanely prolix, basic gzip compression can remove 80 percent of this syntactic lard. The SVGZ files are precompressed.

Does Microsoft's arrival at the party mean that everyone speaks the same language now? Of course not. Cell phone companies worried about wasting battery power on ornate SVG panoramas came up with two smaller subsets: SVGB (SVG Basic) and SVGT (SVG Tiny). These leave out a number of features that probably don't add much to tiny mobile screens, such as the ability to specify dimensions in values other than pixels. There are no picas or millimeters, and SVGT allows solid color fills only.

There are also numerous differences on the desktop implementations of the browsers. While they're all said to implement the core version of SVG, some developers are experimenting with doing even more with the flexible standard. One group, for example, started adding new <animate> tags that describe a path for objects to move along. After drawing the objects, the SVG engine can calculate a new location for them and draw them again. All the same math and tag infrastructure for drawing the lines can be reused to plot the path the objects should follow. At this point, the Gecko and WebKit browsers support the feature, but IE 9 hasn't built it yet.

Another plan is to let the browser apply all of the SVG effects such as filters and clipping to any arbitrary piece of HTML. The Mozilla team first implemented this and created a draft of SVG effects for CSS for the HTML5 team to consider. The other browsers offer some support, but they're widely considered to be more buggy -- and inconsistent with the way the ideas are implemented in the Mozilla browser. This shouldn't be surprising, given the same people at Mozilla wrote both the code and the spec.

A third area of inconsistency is in the implementation of SVG fonts. Unlike PostScript, the basic version of SVG doesn't make it easy to turn any arbitrary pattern of lines into a glyph. The WebKit browsers offer basic support for SVG fonts, so it's easier to add words to SVG drawings. IE and Gecko are still working on this.

Another potential extension has also been adopted by some browsers. After creating the rendering engines that produce infinitely crisp images with endless precision, some SVG users took a step back and decided the images might be nicer if they could be a bit blurrier. (Some people are never happy.) In any case, Chrome, Opera, and Firefox offer SVG filters that average all nearby pixels to produce smoother, prettier, often bizarre effects that aren't as cold or as crisp as line drawings.

My quick SVG test offers an easy way to check your browser's ability to host both embedded and framed SVG tags. A good collection of SVG examples and tests collected by Andre M. Winter shows many of the ways that people are experimenting with the basic SVG standard, as well as several of the proposed additions and extensions.

Native SVG support in current and future browsers

 Displays SVGSVG effects for HTMLSVG filtersSVG fonts SVG in CSS backgrounds SVG animation
Safari 5.0 / 6.0Yes / YesPartial / PartialNo / YesYes / YesYes / YesYes / Yes
Chrome 8.0 / 9.0Yes / YesPartial / PartialPartial / PartialYes / YesYes / YesYes / Yes
IE 8.0 / 9.0No / YesNo / PartialNo / NoNo / NoNo / YesNo / No
Firefox 3.6 / 4.0Yes / YesYes / YesYes / YesNo / NoNo / YesNo / Yes
Opera 10.60 / 11.0Yes / YesPartial / PartialYes / YesYes / YesYes / YesYes / Yes
Source: When can I use…
| 1 2 3 4 5 Page 4