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
- 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
- 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