Using SVG with CSS3 and HTML5

Chapter 16. Playing with Pixels

Chapter 16. Filters and Blend Modes

Vector graphics are defined with mathematics. That tends to mean a very geometric design style. Since SVG is a 2D vector graphics format, it also means a very “flat” design style.

Gradients and masks offered the first steps toward softening those crisp, precise geometric lines. Filters break them down completely.

Filters are instructions for modifying a rendered layer of a graphic or web page by performing calculations on its individual pixel values. When applied to vector shapes or text elements, SVG filters allow you to add blur or jitter to shake up the smooth edges. When applied to embedded images, filters can also dynamically adjust color and contrast.

SVG filters are incredibly powerful. By some measures, they are the most complex aspect of SVG.

Not only are there many possible filter operations to choose from, but there are countless possible combinations. Filter instructions can be chained together, so the result of one filter becomes the input of another. Some filter operations combine multiple inputs, so you can split and recombine the chain of filtered graphic layers in complex flow-chart arrangements.

That complexity has a cost. The SVG filter syntax can make some simple filters unnecessarily obscure. The sheer number of options can scare off some developers who don’t know where to start.

The open-ended nature of SVG filters also makes it more difficult for browsers to optimize filter processing. ...