Chapter 7
Integrating CSS3 Animations
with SVG and Filters
Every browser that supports CSS Transforms, Transitions, and Animations also supports SVG (Scalable Vector
Graphics), an image format that has long been neglected by most web developers. After being ignored by Internet
Explorer (IE) for a decade, SVG is experiencing something of a renaissance with its support in IE9 and all other
modern browsers, making it ideal for deployment in mobile development and other use cases. As you’ll see in
this chapter, CSS3 transitions and keyframes can integrate with SVG very well.
Filters, discussed in the second half of this chapter, are new to CSS but standardized in SVG. In fact, CSS
Filters are directly derived from the SVG standard. Filters allow real-time and interactive visual editing of HTML
content, particularly images, that was previously achievable only in PhotoShop. As a CSS property, filters can be
easily animated, just like anything else.
An Introduction to SVG
SVG is an open, XML-based format. That fact allows SVG data to be created and altered in an ordinary text editor
and in almost any web development language. SVG supports its own gradients, interactivity, text, and layers, but
the most important feature for our purposes is the fact that the format describes vector shapes. This means that
SVG images can be scaled to any size or resolution or transformed in any way without any loss in quality. The fact
that the format offers a text-based description of vector information also tends to make SVG files relatively small:
a simple UI (user interface) shape such as a play button, for example, can be described in SVG as three points and
a fill color, rather than individually-defined pixels. This makes the format naturally responsive and a perfect fit for
mobile design, high-DPI displays, and manipulation with CSS.
Consider, for example, a UI play button element. Reduced to its absolute minimum, the SVG code to
describe such a shape might be something like Listing 7-1.
Listing 7-1. A Simple SVG File
SVG data can be viewed directly in a browser. Saving the code in Listing 7-1 with the filename play.svg and
loading it into a browser window gives you the visual result shown in Figure 7-1.