SVG in gameDev

When, where and how to use SVG in a html5 game environment? There are many features already built in the SVG element, which can easily be used to benefit game development in html5. Of course the SVG element dosen’t fit to every game concept, but there are a few where these SVG benefits come in handy.

In this post we take a brief overview of these basic SVG functions.

specification

To keep things short, SVG and DOM elements will be treated almost the same way. They both can have identifiers which we can modify the object via CSS or JS, both have a DOM/SVG tree.

Read the W3C recommendation here http://www.w3.org/TR/SVG/. There you can get all the informations you eventually need.

why SVG

Why not using the Canvas element? Most games work well in a canvas game environment but it highly depends on the game itself if the canvas element is the right choice. I prefer to use the best performing tool for a particular task. Once you know the ups and downs of the SVG element you can choose yourself which technique fits best to a certain game concept.

SVG built-in features

– Objects can have identifier, and can be styled via CSS

– Box collider

– Objects can be animated by its own animation data

– groups

– Clipping and masking

– Objects can be imported,parsed or directly drawn and manipulated

– Filter effects

– events(click, hover, focus, etc…)

– animation path

– ….

these are just some of them, but the most important ones for game development

This list reads like specifications of a real Game engine. And it even gets better, you can draw assets in any vector program like Inkscape or Illustrator, export the sprite sheet and load it into a SVG scene. This provides a really easy workflow.

SVG are made of 2d vector data, and thats awesome. Cause this makes it theoretical possible to do any kind of 2d math operations.

performance

First the overall compatibility, accordingly to http://caniuse.com/ the SVG element is supported by around 80% of the current Browsers, in comparison to the Canvas element which got 86%.

Even more important is the performance.(This is an iFrame, performance will be better whiteout iFrame)

As you can see, probably, is a screen full smooth animated squares. Even while thousand of them animated, it still looks smooth an almost every device.

really poor performance on any Android device, even on Chrome for Android

conclusion

SVG in a html5 game environment seems to work very nice. It performs fast in almost any browser. With all the built-in features and vec2 math, SVG has a lot of potential. We’er going step by step further in future Posts until we know exactly how and when to use the SVG element.