Professional HTML5 Mobile Game Development

Understanding SVG Basics

SVG is an odd bird. It’s been around since time eternal (1999), but it never caught on. One reason for this is that previously, Internet Explorer didn’t support the standard, opting for its own proprietary Vector Markup Language (VML) for the same task. Until IE9 was released, using SVG meant cutting out IE users completely or using a library such as Raphael.js that supported both SVG and VML.

With the release of IE9, the future started looking up for SVG with the capability to build vector graphics in an HTML5-approved way. Mobile Safari along with Android 3.0 and up as well as the newest version of all the desktop browsers have excellent SVG support, so building a game that relies on SVG is a viable option provided you are okay with leaving out users of older versions of Internet Explorer and Android. Performance still leaves a little bit to be desired, however; so run some tests on your target platforms before committing to SVG as a game technology.

Getting SVG on Your Page

SVG is an XML-based markup language that provides support for a number of vector primitives, including text, rectangles, circles, ellipses, and arbitrary paths. These primitives can use different strokes and fills, including pattern and gradient fills. SVG also supports advanced features such as clipping, masking, compositing, and animation.

Browsers provide an overabundance of ways to place SVG on the page, including as the source in an <img> tag, linked from an <embed> tag, linked ...