SVG vs. XHTML

Doing a web based game without any plugin is a high-put target. I noticed this today when I tried to do my first steps with SVG. While the standard itself is certainly not in it's infancy, the browsers trying to display it certainly are. This article aims to provide some first experiences and comparisons of SVG and (X)HTML for displaying raster based graphics on a web page.

Side by Side Comparison

Feature	HTML	SVG
Animation	only full pixels, load intensive	subpixel, but ugly artifacts, load intensive
Transformations	scale, translate (per style)	scale, rotate, skew, translate
Markup	minimal overhead only with proper css	lots of overhead for small images, big savings for large compositions
Browsers	lots of standards compliant alternatives (except IE of course)	few web browser implementations, completeness (and quality) varies a lot

Browser oddities

Initially I was thrilled to use SVG. I have seen the test suite provided by the w3c and liked what the Specification offered in terms of vector art.

However, trying certain things today in regard to a sprite and tile based web game, SVG isn't that ultimate goal anymore. It is still great, though it has some major issues.
First, as with HTML, the implementation in Browsers differs vastly. Where Opera 9.5b can do lots of things, including SVG animation and image clipping, Firefox 3 beta 3 has no SVG animation (only JavaScript) and although the developer center states so, no proper handling of css formatted SVG nodes.

Specifically I tried using a tile sheet image and placing rect nodes that use an image node as fill, clipped to a certain tile on the sheet.
While Opera performed excellent, Firefox completely ignored the clip, no matter what I tried.

Though, to be fair I have to mention that there is a workaround that works similar, but requires slightly more markup.
The pattern node available in SVG defines a tileable image region that can later be referenced to use as texture for any shape node (e.g. rect). Though the pattern node can't be used directly and has to be referenced from a shape node to become visible.

The resulting SVG markup look similar to this:

Although there is a big overhead in markup for just displaying the 4 tiles as in this example, the overhead is seemingly small if you place thousands of instances in your graphic.

SVG and tiled images

If you place instances like in the example you'll need to take care of certain issues.

• Tiles should overlap at least 1px to animate properly, not overlapping might result in visible gaps when animating
• Animating with sub pixel accuracy also results in blurred graphics and flickering with high contrast images (e.g. pixel art)
• SVG aims to always animate at full speed, resulting in high processor load for large animations
• As with plain HTML, moving a group of objects is always better than moving all individual objects

Conclusion

This brings me to the end of this short trip into the world of SVG. The standard is promising and there are vast opportunities if you aim to use it with vector art. Major browsers with the exception of Internet Explorer offer at least basic integration for SVG 1.1. Though I only know of Opera 9.5 to implement Filters and Animation quite fully.
Firefox 3 has implements a subset of SVG 1.1 full, this means support for only some filters and no animation.
Safari 3 on OS X seems to have the weakest implementation I tried, but that might improve in the future as well.

Some useful Links

• W3C SVG Page
• W3C SVG 1.1 Test Suite
• Mozillas MDC SVG Page
• SVG Authoring Guidelines

Addendum March 14th, 2008:

I couldn't believe that SVG was so poorly implemented in Opera that you can't even move a tiled image about. I ran some tests and found out that there is indeed a possibility to get rid of the ugly artifacts. In Opera you can use patterns to lay out a tiled image that you want a shape filled with. You can use the style attribute to clip the tilemap and then create a pattern node from these clipped images. To display this you would just need to fill a node with this pattern.

Pros

• Stage is less cluttered
• Uses css and is therefore easily editable

Cons

• No easy afterwards depth sorting
• Not yet crossbrowser compliant (Firefox clip bug)

Tags: Firefox, Games, Opera, pbbg, Safari, SVG, tile graphics