Game Development Reference
In-Depth Information
sions of the grid, resulting in the blocky, pixelated image represented by the image
on the right.
Now, the SVG standard does much more than simply define shapes, lines, paths,
and colors. The specification also defines transformations and animations that can
be applied to any single primitive, a group of primitives, or the entire SVG context.
The specification also allows for SVG to be a very accessible format, meaning that it
is possible to include text and other meta data right into the file, so that other applic-
ations can understand the file in other ways besides just the graphics. For example,
search engines can crawl and index, not only your web pages, but also any SVG
graphic.
Since SVG is text based (as opposed to storing binary data, such as an audio file,
for example), it is also possible to compress an SVG image using such compression
algorithms as the popular Gzip, which is so prevalent in the world of web develop-
ment these days. When an SVG file is saved as its own, standalone file, it is given
the extension
.svg
. If the file is Gzip compressed, that extension should be
.svgz
,
so that the browser knows to uncompress the file before processing it.
SVG files can be used in an HTML file in a few different ways. Since the file itself
can be saved as its own file, it is possible to embed the entire file on a page using
the object tag, using an ordinary image tag, or even using an XHR object to fetch its
contents from a server, and injected right into the HTML document. Alternatively, the
contents of an SVG file can be manually copied into the host HTML file, so that its
contents are imported inline.
To import an SVG graphic inline into an HTML document, we simply insert an
svg
tag, with all of its contents as children nodes of it. As of this writing, the XML
namespace attribute is required, along with the version number, as shown in the fol-
lowing code:
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="150"
height="150">
