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.

  • I wonder why I only discover your blog today. I’m one of these few crazy people who try to develop games with SVG… 😉

    My pet project is called “esviji”, a word game on “SVG” obviously, and is playable at this address: http://esviji.com/
    It is also available in the Firefox OS Marketplace.

    The really big issue I have is that I use SMIL for animations, which are not (and will never be) supported in Internet Explorer.

  • markusT_inkfood

    Great landing page and nice game, works even well on mobile devices!! SMIL animations are really hard to control, and as you know, not supported everywhere. I would suggest css3 transform animations are the best solution. They are widely supported and hardware accelerated, which is a huge advantage on mobile devices.
    Anyway, I really like SVG, but it’s still limited on mobile devices. Which makes it hard to make games with more than a few dots or cubes floating around. Don’t even think about filters and all the other fancy stuff.

  • In the begining, the game had gradiants on the background and on the balls to give them a more spherical look. It was really causing animation issues, so I moved to a more “flat design” way… 😉

    I will try to check what would be the potential limits if I replace SMIL by CSS3 animations, thanks for the suggestion.