HTML and CSS Reference
In-Depth Information
This chapter covers
• Comparing bitmap and vector graphics
• Creating SVG from scratch
• Harnessing SVG for liquid layout graphics
• Using JavaScript with SVG
• Using SVG versus Canvas
Scalable Vector Graphics (SVG), an XML language for creating vector graphics, has been
around since 2001. Its draft isn't part of HTML5, but the HTML5 specification gives you
the ability to use SVG directly in your HTML markup. When you harness SVG's power,
simple shapes, gradients, and complex illustrations will automatically adjust to your web-
site and application's layout. What could be better than images that automatically resize
without degrading? How about creating images inside HTML5 documents without graph-
ical editing programs like Photoshop or Illustrator? That's the power of SVG.
As the chapter unfolds, you'll glide through a refresher on bitmaps and vectors to under-
stand how SVG works. Then, you'll start constructing the chapter's teaching application,
SVG Aliens, by developing SVG assets for constructing UFOs, ships, and shields with
simple XML tags. With all the necessary components set up, you'll focus on integrating
JavaScript to bring your creations to life and allow players to interact with the game's as-
sets. You'll polish your application by adding screen transitions, a score counter, and pro-
gressively enhanced difficulty. Finally, you'll decide whether Canvas or SVG would be
best for your next project with a summary review of Canvas and SVG features.
Why build SVG Aliens?
In our SVG tutorial, SVG Aliens, you'll find lots of great content you won't find elsewhere,
such as:
• A reusable SVG JavaScript design pattern
• How to control a dynamically resizable SVG element via attributes and CSS
• Optimized SVG animation with CSS for imported graphics
• How to manage large-scale SVG groups
