Blend Modes, Filter Effects, and Masking 235
Filters in SVG
Recall that CSS filter effects are simply shorthand for SVG filter presets.
The Filter Effects Module shows the markup equivalents for all of the CSS
functions. For example, the SVG markup for the blur() filter looks like the
following (the blur-radius value is a unitless number):
<filter>
<feGaussianBlur stdDeviation="blur-radius" />
</filter>
You can create your own filters in SVG and apply them in CSS by using
an ID reference. The first step is to add an ID value to your filter:
<filter id="blur">...</filter>
Then refer to it in your CSS using the url() notation, containing the ID
reference, as a value for the filter property. If your SVG is in line with the
markup in your document, you need only the ID reference:
E { filter: url('#blur'); }
If your SVG is in an external asset file (say, filters.svg), state the path to
that file followed by the ID reference:
E { filter: url('filters.svg#blur'); }
Unlike CSS filter effects, this technique only works for a single filter. To
apply multiple filters to an element, you have to combine them in the SVG
markup first.
Masking
Masking is a technique in which certain parts of an element are hidden
from view. There are two approaches to masking: clipping, where the area
that’s hidden is set by a polygonal shape that’s overlaid on an element,
and image masking, where an image’s alpha channel is used to set the
hidden area.
Clipping
Clipping is the simplest form of masking. When clipping, a shape is laid
over an image and any parts of the element that are behind the shape will
be shown, while any parts outside the boundaries of the shape will be hidden.
The boundary of the shape is called the clip path and is created with the
clip-path property:
E { clip-path: shape; }
