HTML and CSS Reference
it conforms to the new size. Wilson's face could move if you used a simple <animate>
Basic SVG sup-
All modern browsers can open SVG files, which is why using SVG in your HTML docu-
ments works well for drawing shapes and scaling graphics. But support waivers if you try
to perform complicated animations or use features implemented only in a specific browser.
This makes sense, because the W3C Recommendation for SVG is a gigantic document ( ht-
need to worry; the features you'll use in the proceeding code will be consistent across mod-
ern browsers unless otherwise noted.
Vectors aren't a perfect image format, but they have a clear advantage over bitmaps for
simple graphics and illustrations. By running Wilson's code example, you've seen how
seamlessly SVG can resize graphics in a liquid website layout.
Now, let's take your new SVG knowledge and use it to create graphic assets for this
chapter's game, SVG Aliens.
7.2. Starting SVG Aliens with XML
Before building your SVG game (see figure 7.3 ), play it at the HTML5 in Action website
crowther2/ and download the source code. Inside a zip file, you'll find ufo.svg, mother-
ship.svg, and cursor.png, all of which go into your application's root directory.