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.
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
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.
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.