Compositing SVGs
Learn how to use and combine advanced graphics filters on your SVGs.
Table of Contents
- Filters
- Filter keywords: SourceGraphic, SourceAlpha, FillPaint, FillStroke, etc.
- Filter Primitives
- Color + Light Filters
- Displacement Filters
- Combining Filter Primitives
Filter Effects
feOffset
"The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes."
feGaussianBlur
"The <feGaussianBlur> SVG filter primitive blurs the input image by the amount specified in stdDeviation, which defines the bell-curve."
feDropShadow
The <feDropShadow> SVG filter primitive creates a drop shadow.
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink" flood-opacity="0.5"/>feImage
"The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an SVG image, it is rasterized.)"
feTile
"The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>."
Color + Light Filters
feFlood
"The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity."
feColorMatrix
"The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color."
feDiffuseLighting
"The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map."
fePointLight
feDistantLight
feSpotLight
feSpecularLighting
"The <feSpecularLighting> SVG filter primitive lights a source graphic 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."
Displacement Filters
feDisplacementMap
feTurbulence
feConvolveMatrix
feMorphology
feComponentTransfer
Combining Filter Primitives
The real power of SVG filters comes in when we begin blending, merging, and compositing filters.
feBlend
"The SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the mode attribute."
feComposite
"This filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor and lighter."
feMerge
"The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a <feMergeNode> child."
feMergeNode
"The <feMergeNode> takes the result of another filter to be processed by its parent <feMerge>"