SVG filter effects
Encyclopedia
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 are defined by filter elements. To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element. 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.
Scalable Vector Graphics
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...
(SVG) files. SVG is an open-standard
Open standard
An open standard is a standard that is publicly available and has various rights to use associated with it, and may also have various properties of how it was designed . There is no single definition and interpretations vary with usage....
XML format
XML
Extensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
for two-dimensional vector graphics
Vector graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
as defined by the World Wide Web Consortium
World Wide Web Consortium
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(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 are defined by filter elements. To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element. 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
Gaussian blur
A Gaussian blur is the result of blurring an image by a Gaussian function. It is a widely used effect in graphics software, typically to reduce image noise and reduce detail...
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
RGBA color space
RGBA stands for Red Green Blue Alpha. While it is sometimes described as a color space, it is actually simply a use of the RGB color model, with extra information. The color is RGB, and may belong to any RGB color space, but an integral alpha value as invented by Catmull and Smith between 1971 and...
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
Drop shadow
In computer graphics, a drop shadow is a visual effect consisting of drawing that looks like the shadow of an object, giving the impression that the object is raised above the objects behind it. The drop shadow is often used for elements of a graphical user interface such as windows or menus, and...
. In effect, there are now two layers of graphics, both with the same original source graphics.
SVG filter primitives
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 |
|
Color matrix | feColorMatrix |
|
Component transfer | feComponentTransfer |
|
Composite | feComposite |
|
Convolve matrix Convolution In mathematics and, in particular, functional analysis, convolution is a mathematical operation on two functions f and g, producing a third function that is typically viewed as a modified version of one of the original functions. Convolution is similar to cross-correlation... |
feConvolveMatrix |
|
Diffuse lighting | feDiffuseLighting |
|
Displacement map | feDisplacementMap |
|
Flood | feFlood |
|
Gaussian blur Gaussian blur A Gaussian blur is the result of blurring an image by a Gaussian function. It is a widely used effect in graphics software, typically to reduce image noise and reduce detail... |
feGaussianBlur |
|
Image | feImage |
|
Merge | feMerge |
|
Morphology | feMorphology |
|
Offset | feOffset |
|
Specular lighting | feSpecularLighting |
|
Tile | feTile |
|
Turbulence | feTurbulence |
Framework for applying a filter
External links
- W3C SVG page specifications, list of implementations
- W3C SVG primer: Filters W3C Primer (draft) chapter and examples concerning filters.