Introduction to SVG Filter Effects

Basics

SVG filters are different from e.g. GIMP filters in a sense that what counts in GIMP for a filter in SVG is a filter primitive. And a filter in SVG can contain multiple primitives. For example, an SVG filter that creates an effect of fire consistes of Turbulence, Color Matrix and Gaussian blur primitives. SVG filters are also non-destructive in its nature and canbe applied to both vector and bitmap objects of an SVG document.

What should be taken into consideration all the time is that SVG Filters always deal with bitmap representation of vector graphics. A filter either makes a momentary snapshot of all data below it, or instantly reapplies changes to underlying bitmap representation of an image when it changes.

Filter primitives

Inkscape supports the following SVG filter proimitives:

• The feBlend filter primitive gives us image blending modes, like in many image manipulation programs. These modes are screen, multiply, darken and lighten. There's a caveat, though: when blending an object against an semi-transparent background, the background will be accumulated twice, resulting in thicker objects under the bounding box of blended object. This is a limitation of current version of SVG format, not a bug in Inkscape.

• The feColorMatrix filter primitive applies a matrix transformation to colour of each rendered pixel. This allows for effects like turning object to grayscale, modifying colour saturation and changing colour hue.

• The feComposite filter primitive composites two images using one of the Porter-Duff blending modes (described in paper Compositing Digital Images by T. Porter and T. Duff, published in SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984) or the aritmetic mode described in SVG standard. Porter-Duff blending modes are essentially logical operations between the images. For example, xor mode shows the areas, where either one of the objects is, but not the areas where both of the objects are. Arithmetic mode lets you specify coefficients k1-k4 for blending equation (result colour) = k1 * (first input colour) * (second input colour) + k2 * (first input colour) + k3 * (second input colour) + k4.

• The feConvolveMatrix lets you specify a Convolution to be applied on the image. Common effects created using convolution matrices are blur, sharpening, embossing and edge detection. There's a fairly good explanation and some example matrices at www.gamedev.net/reference/programming/features/imageproc/page2.asp. Note that while gaussian blur can be created using this filter primitive, the special gaussian blur primitive is faster and resolution-independent.

• Filter primitives feDiffuseLighting and feSpecularLighting create lighting maps for the object in input image. SVG doesn't have concept of third dimension, so these filters use alpha channel of input image as a height map: the more opaque given point in input image is, the nearer spectator it is considered to be. There exists an example for using these in Inkscape distribution, in share/examples/lighting_effects.svg.

• The feDisplacementMap filter primitive displaces the pixels in the first input using the second input as a displacement map, that shows from how far the pixel should come from. Classical examples are whirl and pinch effects, that can be found in most image manipulation programs and even in some screensavers, where this kind off effect is moving around screen, twisting desktop beneath it.

• The feFlood filter primitive fills its region with a given color and opacity. It can be used as an auxiliary tool, usualy in combination with other filter primitives, in order to facilitate some common color handling operations.

• The feGaussianBlur filter primitive allows natural blurring any Inkscape objects: paths, shapes, groups, text, images. Gaussian blur enables a wide range of photorealistic effects: arbitrarily shaped shades and lights, depth of field, drop shadows, glows, etc. Also, blurred objects can be used as masks for other objects to achieve the "feathered mask" effect.

  The feImage filter primitive allows using external images as part of filtering chain. For example, one could use external image as a displacement map for feDisplacementMap or as a height map for lighting effects. Note that while SVG standard allows using other parts of the SVG file in this filter primitive, the current Inkscape implementation only allows external images.

• The feMerge filter primitive composites several temporary images inside the filter primitive to a single image. It uses normal alpha compositing for this. This is equivalent to using several feBlend primitives in 'normal' mode or several feComposite primitives in 'over' -mode.

• The feMorphology filter primitive provides erode and dilate effects, that are common in image manipulation programs. With erode, darker and more transparent areas spread to lighter and more opaque areas, whereas with dilate lighter and more opaque areas spread to darker and more transparent areas. For single-colour objects, this basically means, erode makes the object thinner and dilate makes it thicker.

• The feOffset filter primitive offsets the image by an user-defined amount. For example, this is useful for drop shadows, where the shadow is in a slightly different position than the actual object.

• The feTurbulence filter primitive renders Perlin noise. This kind of noise is useful in simulating several nature phenomena like clouds, fire and smoke and in generating complex textures like marble or granite.

Filter UI

Parts of the dialog

Creating and modifying filter effects is done in a dedicated dialog Object>Filter Effects....

 

The list at the left of the dialog displays all filters currently in the document. 

Managing filters

• New filters can be added with the Add button beneath the list
• Right-clicking a filter for the pop-up menu allows duplicating or removing a filter.
• Double-clicking a filter will apply it to all selected objects
• A black dot is placed next to whatever filter is applied to the selected objects. If more than one filter is in use by selected objects, an unfilled dot is used instead.

Managing filter primitives

The second list, at the left of the dialog, displays the filter primitives that are contained within the currently-selected filter.

• New primitives can be added by selecting the primitive type from the combo box beneath the list, and then pressing the Add button.
• Right-clicking a primitive for the pop-up menu allows duplicating or removing a primitive.
• Primitives can be rearranged by clicking and dragging any filter in the list.
• When a filter is selected, the Settings group at the bottom of the dialog will change to display the attributes available for that primitive. Changing a setting results in an immediate update to the document.
• The "in" and "in2" attributes for filters that support them are not shown in the Settings group. These input connections are displayed graphically in the list, under the Connections column.
  • Inputs for a particular filter are displayed as triangles. Depending on the primitive type, there may be one or two inputs (or more for Merge primitives.) Connections can be created by clicking on a triangle and dragging.
  • There are six standard input types that can be used for any primitive input; Source Graphic, Source Alpha, Background Image, Background Alpha, Fill Paint, and Stroke Paint. These are displayed vertically on the far right of the list. Click and drag from an input triangle to one of the standard inputs to connect them.
  • Primitives can also be connected to other primitives by clicking an input triangle and dragging upwards to another primitive. A primitive can only be connected to one higher up the list.
  • Single-clicking on an input triangle will unset it, returning it to the default. If it is on a Merge primitive, the input will be deleted.
  • Merge inputs have an empty input at the end. Dragging a connection from this input will add a new input to the primitive.