SVG filter effects
SVG filter effects are effects that are applied to Scalable Vector Graphics (SVG) files. SVG is an openly accessible XML format for two-dimensional vector graphics , as described by the World Wide Web Consortium (W3C). A filter effect consists of a series of graphic operations that are applied to a given source vector graphic and produce a modified bitmap result.
Filter effects are defined by filter elements. To apply a filter effect to a graphic element or a container element, the 'filter' property of that element is set. Each 'filter' element contains a number of filter primitives as its child elements. Each filter primitive performs a single fundamental graphic operation (e.g. a Gaussian soft focus or a light effect) on one or more input elements and generates a graphic result. Because most filter primitives are some kind of image manipulation , in most cases the output of the filter primitives will be a single RGBA bitmap image (although it will be recreated if a higher resolution is required).
The original source file or the result of a filter primitive can serve as input for one or more filter primitives. A common application is to reuse the source graphic multiple times. For example, a simple filter could replace one graphic for two by adding a black copy to the original source graphic with an offset to create a drop shadow . In fact, there are now two graphic layers, both of which have the same source graphics.
SVG filter primitives
The following table lists the filter primitives which are available in both SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while SVG Basic only supports the filter primitives shown there.
Surname | element | SVG Basic |
---|---|---|
merger |
feBlend
|
Yes |
Color matrix |
feColorMatrix
|
No |
Component transfer |
feComponentTransfer
|
Yes |
Composite |
feComposite
|
Yes |
Convolution matrix |
feConvolveMatrix
|
No |
Diffuse light |
feDiffuseLighting
|
No |
Displacement map |
feDisplacementMap
|
No |
Flooding |
feFlood
|
Yes |
Gaussian soft focus |
feGaussianBlur
|
Yes |
image |
feImage
|
Yes |
Put together |
feMerge
|
Yes |
morphology |
feMorphology
|
No |
Offset |
feOffset
|
Yes |
Specular lighting |
feSpecularLighting
|
No |
Tiles |
feTile
|
Yes |
Turbulence |
feTurbulence
|
No |
Framework for applying a filter
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="4in" height="3in">
<defs>
<filter id="AFilter">
<!-- Hier gehört die Filterdefinition hin -->
</filter>
</defs>
<text style="filter:url(#AFilter)">ein angewandter Filter</text>
</svg>
Web links
- W3C SVG Page Specifications, List of Implementations
- W3C SVG primer: Filters W3C Primer (draft) - Chapters and examples relating to filters.