SVG files don’t have to be embedded into the document like we did here. You
can make them external files and even load them as background images in
CSS, provided that the browser supports it.Drawing with SVG is similar to drawing on the canvas, but we also have the
ability to define these images in separate files and link them in to our docu-
ment. This gives us some greater flexibility. However, they’re not as
programmable as canvas-based graphics are. SVG-based graphics might be
better choices for logos and nondynamic content, while canvas graphics might
be better for games. Now that you’ve seen both, you can explore each further
to find out what works for you.Falling Back
Browsers that don’t support SVG graphics natively can use any number of
fallback solutions. The simplest one to implement is SVG Web,^4 which provides
partial support for SVG 1.1. SVG Web uses Flash to render the vector
graphics.To make it work, we download SVG Web and place the svg.js and svg.swf files
in the javascripts folder. We then link svg.js to our web page with a <script> tag
in the <head> of our document, like this:html5_svg/index.html
<scriptsrc="javascripts/svg.js"data-path="javascripts"></script>and we’ve got fallback support.
6.1 The Future
Now that you know a little about how the canvas works, you can start
thinking of other ways you might use it. You could use it to create a game
using libraries like Impact or Crafty,5,6 or create a user interface for a media
player, or build a better image gallery. All you need to start painting is a little
bit of JavaScript and a little bit of imagination. And as support ramps up,
speed and features will improve.But it doesn’t stop with 2D graphics. The canvas specification supports 3D
graphics as well, and browser manufacturers are implementing hardwarereport erratum • discussThe Future • 129
Download from Wow! eBook <www.wowebook.com>