Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 16
Playing with Pixels: Filters and Blend Modes

Filters are instructions for modifying a rendered layer of a graphic or web page by performing calculations on its individual pixel values. SVG filters allow you to add blur or jitter to shake up the smooth edges, or 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. Modern graphical processing unit (GPU) chips can perform some filter operations efficiently, but not others, and reading data back from the GPU to the main software can cancel out the performance benefits.

New CSS shorthand functions have been designed to reduce these barriers, making it easier to define simple, easily optimized filter effects. However, the shorthands only represent a slice of what is possible with the full SVG filter syntax.

This chapter introduces the most common SVG filter elements, and compares them with the shorthand filter convenience functions for the same operations. By necessity, it is only a brief overview of what filters can do, focusing on the big concepts and some unique features. The full possibilities of SVG filters are only limited by the creativity of the developer—and the processing speed of the browser.

This chapter also describes the mix-blend-mode property. It replaces a feature of SVG filters that was never well supported in web browsers: the ability to alter how the filtered element is combined with its backdrop.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 16-1. Blur filters applied to SVG text and an embedded photo: (top) unfiltered, (middle) bidirectional Gaussian blur, (bottom) vertical motion blur
Example 16-1. Defining bidirectional and unidirectional blur effects
Figure 16-2. The normal distribution, measured as a probability distribution (y) relative to standard deviations offset from mean (x)

Adapted from a graphic by Wikimedia commons contributor Geek3.

Figure 16-3. A two-step SVG filter applied to a photograph: (left) unfiltered, (middle) after the first primitive is applied, (right) final result
Figure 16-4. A heart surrounded by a dark shadow
Example 16-2. Creating a blurred shadow by merging filter layers
Figure 16-5. A heart with a golden glow
Example 16-3. Creating a golden glow by compositing a flood color on a shadow layer
Figure 16-6. A basic blur filter applied to SVG text and an embedded photo
Figure 16-7. A blur filter on SVG text and a photo, with the result trimmed to the original alpha outline
Figure 16-7. Text and a photo in which the edges have been reconstructed after blurring
Example 16-4. Blurring colors but not edges
Figure 16-9. A photo modified with an <feMorphology> filter: (top) with an erode operator, (bottom) with a dilate operator
Figure 16-10. Merged letters with a shared “stroke”
Example 16-5. Creating a group outline with <feMorphology>
Figure 16-11. Changing the color of “stroke”
Example 16-6. Coloring the group outline (titled “Creating a group outline with <feMorphology>” in original printings of the book)
Figure 16-12. Offset filter layers, clipped to the filter region
Example 16-7. Adding duplicate, offset layers with a filter (titled “Creating a group outline with <feMorphology>” in original printings of the book)
Figure 16-13. Offset filter layers, in a filter region that is large enough to contain them
Figure 16-14. Photo-filled text in which the bottom half is given a wave distortion effect
Example 16-8. Applying filter effects to a subregion of the element
Figure 16-15. The same paired photo pattern and filter effect, on different text
Figure 16-X1. A turbulent Perlin noise wave pattern, and the same noise converted to blue-green colors
Figure 16-16. The 16 blend modes, when applied to a vector graphic layer over the top of a photo layer
Example 16-9. Blending a vector graphic onto a photo, with filters
Example 16-10. Blending a vector graphic onto a photo, with mix-blend-mode
Figure 16-17. Venn diagrams created from colored circles with mix-blend-mode: (top row) without isolation, (bottom row) where each diagram is an isolated group; (left column) blending uses multiply mode, (right column) blending uses screen mode
Example 16-11. Using isolation to limit the impact of blend modes

Online Extras#