Building Games with SVG and Physics - HTML5 Mobile Game Development - page 256

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 from an <object> tag, and embedded using an <iframe> , or
dropped directly onto the page in an <svg> tag. Having all those options is a little confusing, but you don't
actually need to know all of them. There are three separate use cases, each with a preferred embedding mech-
anism:
• First, if you just want a simple way to get an external SVG document on the page, use an <img> tag.
You can't script the tag, and users of Firefox pre 4.0 will be out of luck (this is currently approximately
4% of Firefox users and getting smaller all the time), but it's the easiest way to put an SVG document
onto the page that you just need to work as an image.
<img src='mydocument.svg' />
• Second, if you have an external SVG document that you want to script and interact with, use the
<embed> tag, which enables you to reach into the document and add event handlers and the like:
<embed src="mydocument.svg" type="image/svg+xml" />
• Finally, the last and most common usage from a game development perspective is to embed your SVG
document directly into the page:
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="20" y="20" width="50" height="50" fill="black" />
</svg>
Often you want to start with an empty <svg> tag (much like the <canvas> tag) and add all your objects
dynamically. This is how the Quintus engine will be extended in this chapter to support SVG. One thing you'll
notice is the inclusion of the version attribute and the xmlns (short for XML namespace) attribute.
The namespace is important because you're embedding a different type of document into your HTML and
need to tell the browser how to handle it. In this case the browser is clever enough to render the document
without the namespace, but trying to create elements via JavaScript without the namespace won't work.
Getting to Know the Basic SVG Elements
As you saw briefly, SVG documents are simple XML documents that can be embedded directly into the page.
You can also load an SVG document directly into the browser by loading it from a URL or your local machine.
Listing 14-1 shows a simple, hand-written SVG file embedded in an HTML5 document. You'll need the
penguin.png file in your images/ directory to make it work yourself. The output of the file is shown in
Figure 14-1 .