Table Of Contents
How to use SVG filters. Explanations, examples, generators & tools.
Last Tended | |
---|---|
Planted | |
Status | Seed |
Definition
A filter is like a machine that takes a graphic input, changes it & returns the result. The browser offers 2 types of filters, CSS & SVG. CSS filters are a subset of SVG filters. SVG filters offer a wider range of capabilities.
The effects browser filter can produce can also be achieved in image editing software like Photoshop. However, browser filters have 2 advantages. They can be animated & interacted with.
Apply a Filter
A filter can be applied to a:
- HTML element through the CSS
filter
property. - SVG element through the
filter
attribute or CSS property.
Primitive
An SVG filter is made up of 1 or more filter primitives. All primitives share the same prefix: fe (short for filter effect). A primitive:
- takes 1 or 2 inputs,
- performs a fundamental graphical operation &
- outputs a result.
localhost:3000
import "./styles.css";
import "./styles.css";
The in
attribute can be:
SourceGraphic
: an element (example: image or text).SourceAlpha
: the same as sourceGraphic, except only the alpha channel will be read. This is like passing a silhouette of the image to the filter.- Result from another primitive.
Normally, I would import the CSS file in index.html
however I wasn't able to get that working with the bundler (maybe related to this issue).
Multiple Primitives
A SVG filter can be made up of multiple primtiives. You can use the result of 1 primitive as the input of the next.
The following example is using the feGaussianBlur
primitive to blur an image, then passing the result to the feOffset
primitive, which moves it 20px
to the right.
localhost:3000
import "./styles.css";
import "./styles.css";
If in
& result
aren't specified, the result
of the previous primitive is automatically used as the in
of the following primitive.
2 inputs
Each filter primitive can take 1 or 2 inputs (but only ever output 1 result).
The attribute for the 2nd input is in2
.
This example is using the feImage
primitive to output an image.
This & a 2nd image is used as the inputs for feComposite
, which is outputing only where the images overlap.
localhost:3000
import "./styles.css";
import "./styles.css";
Filter Region
The area where a filter will render to is known as the filter region. The default position & size of this region is:
index.js
The filter region can be visualized using the feFlood
primitive.
It fills the region with a specified color.
localhost:3000
import "./styles.css";
import "./styles.css";
If the effect of your filter extends passed this region, it will result in a cut-off effect. This can be avoided by increasing the size of the region.
localhost:3000
import "./styles.css";
import "./styles.css";
List of Primitives
- feBlend: blends two layers.
- feColorMatrix: changes input colors. Used for controlling hue, saturation & brightness.
- Article -
feColorMatrix
deep dive - SVG Gradient Map Filter - tool for generating gradient maps
- SVG Color Matrix Mixer - tool for generating
feColorMatrix
values - Just Code - another tool for generating values (shows the values changing in real-time)
- Article -
- feComponentTransfer: performs remapping of color for each pixel. Used for adjusting brightness, contrast, color balance & threshold. Used with
feFuncA
,feFuncR
,feFuncG
,feFuncB
.feFuncA, feFuncR, feFuncG, feFuncB: defines the transfer function for the alpha, red, green & blue component of the input graphic. Input graphic is defined in
feComponentTransfer
.- Article - How to create a duotone image effect
- Article - How to create a poster image effect
- Just Code - tool for change an image's threshold using
feComponentTransfer
- Just Code - tool for creating a gradient map on an image using
feComponentTransfer
- feComposite: combines 2 inputs.
localhost:3000
import "./styles.css";
import "./styles.css";
- feConvolveMatrix: combines pixels in the input image with neighboring pixels. Used for blurring, sharpening, embossing and beveling.
- Just Code - Tool for finding an image's edges using
feConvolveMatrix
(useful for sharpening an image).
- Just Code - Tool for finding an image's edges using
- feDisplacementMap: Used to contour an image to a texture.
- feflood: fills the filter region with a color.
localhost:3000
import "./styles.css";
import "./styles.css";
- feGaussianBlur: blurs the input image.
- Article - A Masked Blur Effect
- Sandbox - creating a magnifying glass effect
localhost:3000
import "./styles.css";
import "./styles.css";
- feImage: the filter version of the
<image>
element (& has the same attributes). It fetches image data from an external source and provides the pixel data as output (if the external source is an SVG, it is rasterized).localhost:3000
import "./styles.css";
import "./styles.css";
- feMerge: applies filter effects concurrently instead of sequentially. Used with
feMergeNode
feMergeNode takes the result of another filter.localhost:3000
import "./styles.css";
import "./styles.css";
- feMorphology: erodes or dilates the input image. Used for fattening or thinning.
localhost:3000
import "./styles.css";
import "./styles.css";
- feOffset: move the image. Used for creating shadows.
localhost:3000
import "./styles.css";
import "./styles.css";
- feTile: fill a target rectangle with a repeated, tiled pattern of the input image.
localhost:3000
import "./styles.css";
import "./styles.css";
- feTurbulence: creates an image using the Perlin turbulence function. Used for make textures.
- Article - Creating Texture
- Article - Creating Texture (2)
- Grainy Gradient playground - tool for generating textures
localhost:3000
import "./styles.css";
import "./styles.css";
LIGHTING
- feDiffuseLighting: lights an image using the alpha channel as a bump map. Used with
fePointlight
&feSpotlight
.- fePointlight: defines a light source which allows to create a point light effect.
- feSpotlight: defines a light source.
- feSpecularlighting: lights an image using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.Produces an image which contains the specular reflection part of the lighting calculation. Used with a texture using the
add
term of the arithmetic<feComposite />
method. Used withfePointlight
&feSpotlight
.- fePointlight: defines a light source which allows to create a point light effect.
- feSpotlight: defines a light source.
localhost:3000
import "./styles.css";
import "./styles.css";
Tools
- SVG Filters - playground, presets & docs.
- fffuel - generators.
- Method Draw - SVG drawing app (to go menu:
View > Source
to view source code) .
Examples
Scan Lines
Primitives used:
- feImage
- feComposite
localhost:3000
import "./styles.css";
import "./styles.css";
Hologram
For a more sophisticated hologram effect, see here.
Primitives used:
- feComponentTransfer
- feFuncR
- feFuncG
- feFuncB
- feGaussianBlur
- feComponentTransfer
- feOffset
- feMerge
- feMergeNode
localhost:3000
import "./styles.css";
import "./styles.css";
Distress
Primitives used:
- feTurbulence
- feComponentTransfer
- feFuncA
- feComposite
localhost:3000
import "./styles.css";
import "./styles.css";