We'd like to use Scalable Vector Graphics (SVG) instead of a raster image where supported. We're building a ZUI so our infographic needs to be zoomed, and using a vector graphic allows us to preserve the quality of the object. Vector images, in fact, are size independent and thus don't get pixelated when scaled.
Note
More information about vector images and SVG can be found on Wikipedia at http://en.wikipedia.org/wiki/Vector_graphics.
There are three ways to embed an SVG:
As an
<object>element. This is the most supported way of adding SVG. However, it is limited in a sense that the SVG is treated like an external element and therefore cannot be manipulated through JavaScript (except for some obvious properties, such aswidthandheight).As a value for CSS where an image is required.
Directly into our HTML code. This approach offers the most interaction available between the SVG and the page. As we'll see later in this chapter, we can interact with the vector graphic directly...