HTML5 for Publishers

Chapter 5. SVG for Publishers

SVG stands for Scalable Vector Graphics, and the name basically says it all. SVG is a vector-based graphics system, where you can scale images to any desired size, without any loss in quality. While bitmap graphic formats (like JPEG or PNG) store image data as a series of pixels, vector formats like SVG instead store image data geometrically, as a series of lines, curves, and/or shapes. Because image data isn’t tied to a specific number of pixels, the graphic resolution can be as high as the screen allows. Like MathML, SVG is an XML vocabulary, and can be styled with CSS and scripted with JavaScript, which opens the door to using SVG for animations, interactive graphics, and much more.

While there has been longstanding support for SVG graphics in major Web browsers for a long time, SVG is formally a part of the HTML5 specification, and is now a first-class citizen in HTML5 pages. In this chapter, you’ll get a brief introduction to SVG, put together an interactive SVG coloring book, and learn more about SVG compatibility in the ereader ecosystem.

A Ten-Minute Introduction to SVG

In order to become familiar with SVG, let’s start by building an SVG image from scratch. We’ll take our Canvas “smiley” image from Drawing on your <canvas> and reimplement it as an SVG image. Here are the SVG elements we’ll use:

<svg>

All SVG images must have a root element of <svg>, which contains all the other elements you use to compose your graphic. The <svg> element should have ...