With the large number of varying screen resolutions available on today’s HTML5 gaming
devices, it is now advisable to give some consideration to incorporating vector graphics into your games.
SVG, or Scalable Vector Graphics, is an open standard, XML-based format developed by the W3C for representing vector graphics. Using SVG files for HTML5 game development is the main focus of this article.
Vector Graphics
Adobe Flash developers have long enjoyed the ease with which they can create attractive and, somewhat more importantly for browser-based games, scalable vector graphics.
Advantages of employing vector graphics for HTML5 game development include:
- Scalability without loss of clarity
- Manipulation of individual components
- Client-side, rather than server-side, processing
- Potential for animation and, almost certainly, interaction.
Let us address each in turn, using the following SVG file created using an
open source vector graphics editor.
Scalability
The capability to scale vector graphics without losing image quality is the primary benefit of using SVG files. Given the varying screen resolutions of the devices on which people are today playing HTML5 games, SVG files provide the most pleasing result when scaled.
Let’s use our beast SVG file to demonstrate.
The image on the left is the result of scaling the vector graphics version of our beast. Lines remain clean and clarity is retained.
In the the image on the right, the result of scaling the bitmapped version of the same region of our beast produces a rendered result with considerably less definition. Edges of primitives are noticeably pixelated.
Read the rest of this entry »
