Game Development Reference
In-Depth Information
Rendering
We should start with the basics, as no game is possible without a graphical representation. In the past, the
most widely-used option was simple layers, but since the advent of HTML5, developers have been able to
choose between two higher-performance technologies: bitmap canvas and vector SVG. Both make high-
quality graphics possible in the browser, but they are fundamentally different. It is impossible to say which
is better. All you can do is choose the more appropriate option in each individual case.
SVG
SVG stands for Scalable Vector Graphics, an XML-based language for marking up two-dimensional vector
and mixed vector bitmap graphics. It is based on PGML created by Adobe, Sun Microsystems, IBM, and
Netscape, as well as VML developed by Macromedia and Microsoft.
The World Wide Web Consortium (W3C) began work on the standard back in 1999, and the first stable
version, SVG 1.1, appeared in 2003. Development of SVG 1.2 continued for years, and it was recently
decided that the drafts needed to be completely redesigned for better integration with the new HTML5,
CSS, and WOFF (Web Open Font Format) technologies. The resulting standard would be designated as
SVG 2.0.
For a long time, browsers supported SVG with the help of third-party plug-ins, but these days many
modern browsers have native SVG support. Even Microsoft abandoned VLM in favor of SVG in its new
browser, Internet Explorer 9. Mobile platforms offer decent support, apart from the fact that Android added
basic SVG support in version 3.0.
Table 10-1.
SVG (basic support): Method of displaying basic Vector Graphics features using the embed or object
elements
IE
Firefox
Safari
Chrome
Opera
Two versions back
7.0
5.0
4.0
12.0
11.0
Previous version
8.0
6.0
5.0
13.0
11.1
Current
7.0
5.1
14.0
11.5
9.0
Near future
8.0
15.0
12.0
6.0
Farther future
10.0
9.0
16.0
12.1
Older versions of IE utilized libraries that translated SVG to VML, Raphael being the most popular of these.
As I mentioned, an SVG file is an XML file. It can be viewed separately or added to a page. Listing 10-1 is
an example of an SVG image source with gradient, animated ellipse, and image.
