SVG filter effects

from Wikipedia, the free encyclopedia

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