World Library  
Flag as Inappropriate
Email this Article

SVG filter effects

Article Id: WHEBN0019021677
Reproduction Date:

Title: SVG filter effects  
Author: World Heritage Encyclopedia
Language: English
Subject: Inkscape, Scalable Vector Graphics
Publisher: World Heritage Encyclopedia

SVG filter effects

Scalable Vector Graphics

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. 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

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 of SVG 2 adds two further filter primitives: feCustom (for custom filter effects) and feDropShadow (for drop shadow).[1] The latter is just a shorthand for a combination of other filter primitives.

Framework for applying a filter

  a filter applied

External links

  • W3C SVG page specifications, list of implementations
  • W3C SVG primer: Filters W3C Primer (draft) chapter and examples concerning filters.


  1. ^ Filter Effects 1.0, W3C Working Draft 23 May 2013
This article was sourced from Creative Commons Attribution-ShareAlike License; additional terms may apply. World Heritage Encyclopedia content is assembled from numerous content providers, Open Access Publishing, and in compliance with The Fair Access to Science and Technology Research Act (FASTR), Wikimedia Foundation, Inc., Public Library of Science, The Encyclopedia of Life, Open Book Publishers (OBP), PubMed, U.S. National Library of Medicine, National Center for Biotechnology Information, U.S. National Library of Medicine, National Institutes of Health (NIH), U.S. Department of Health & Human Services, and, which sources content from all federal, state, local, tribal, and territorial government publication portals (.gov, .mil, .edu). Funding for and content contributors is made possible from the U.S. Congress, E-Government Act of 2002.
Crowd sourced content that is contributed to World Heritage Encyclopedia is peer reviewed and edited by our editorial staff to ensure quality scholarly research articles.
By using this site, you agree to the Terms of Use and Privacy Policy. World Heritage Encyclopedia™ is a registered trademark of the World Public Library Association, a non-profit organization.

Copyright © World Library Foundation. All rights reserved. eBooks from Project Gutenberg are sponsored by the World Library Foundation,
a 501c(4) Member's Support Non-Profit Organization, and is NOT affiliated with any governmental agency or department.