SVG filter effects

SVG filter effects are effects applied to Scalable Vector Graphics (SVG) files. SVG is an open-standard XML format for two-dimensional vector graphics as defined by the World Wide Web Consortium (W3C). A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.

Filter Effects

Filter Effects Module Level 1
Wood texture and drop shadow simulated with SVG filters
Status	Working Draft (WD)
Year started	15 October 2012 (2012-10-15)
First published	15 October 2012 (2012-10-15)
Latest version	December 18, 2018 (2018-12-18)
Preview version	Editor's Draft October 30, 2019 (2019-10-30)
Organization	W3C
Committee	CSS Working Group
Editors	Dirk Schulze Dean Jackson Vincent Hardy Erik Dahlström
Domain	Visual effects

Filter effects are defined by filter elements. The filter property is set on a container element or on a graphics element to apply a filter effect to it. Each filter element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a Gaussian blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA bitmap image (however, it will be regenerated if a higher resolution is called on).

The original source graphic or the result from a filter primitive can be used as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic for two by adding a black copy of the original source graphic but offset to create a drop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.

SVG filter primitives

Example SVG using various filter primitives

Textures:	feTurbulence, feDiffuseLighting, feDistantLight, feComposite and feBlend
Shadows:	feGaussianBlur, feOffset, feColorMatrix and feBlend

Demonstration of an animated refraction effect using feTurbulence, feDisplacementMap and Synchronized Multimedia Integration Language

The following table lists the filter primitives available in both SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while SVG Basic supports only those filter primitives shown:

Name	Element	SVG Basic
Blend	feBlend	Yes
Color matrix	feColorMatrix	Yes
Component transfer	feComponentTransfer	Yes
Composite	feComposite	Yes
Convolve matrix	feConvolveMatrix	No
Diffuse lighting	feDiffuseLighting	No
Displacement map	feDisplacementMap	No
Flood	feFlood	Yes
Gaussian blur	feGaussianBlur	Yes
Image	feImage	Yes
Merge	feMerge	Yes
Morphology	feMorphology	No
Offset	feOffset	Yes
Specular lighting	feSpecularLighting	No
Tile	feTile	Yes
Turbulence	feTurbulence	No

The current draft of the Filter Effects Module Level 1 adds a filter primitive for drop shadow. This primitive, feDropShadow, is just a shorthand for a combination of other filter primitives.^[1]

Framework for applying a filter

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 400 300">
  <defs>
    <filter id="AFilter">
      <!-- Definition of filter goes here -->
    </filter>
  </defs>
  <text x="10" y="100" filter="url(#AFilter)">a filter applied</text>
</svg>

External links

• Filter Effects – SVG 1.1 (Second Edition) W3C specifications
• W3C SVG primer: Filters W3C Primer (draft) chapter and examples concerning filters.
• FILDROP A set of custom SVG filter effects and generator filter effects
• SVG Filter Builder An interactive, visual SVG filter programming tool which can be used both for visualising existing filters (by uploading a SVG) but also to design your own from scratch and save them.