HTML and CSS Reference
In-Depth Information
it conforms to the new size. Wilson's face could move if you used a simple
<animate>
tag, and it could respond to mouse clicks with a little bit of JavaScript.
Basic SVG sup-
port
4
3
9
9
3.2
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-
tp://www.w3.org/TR/SVG
)
; you can't expect browser vendors to integrate everything. No
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
(
http://html5inaction.com/app/ch7
)
. After a few test runs, head over to
http://manning.com/
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.
