SVG filter effects

Last updated
Filter Effects
Filter Effects Module Level 1
Extended two cube calendar.svg
Wood texture and drop shadow simulated with SVG filters
Status Working Draft (WD)
Year started15 October 2012 (2012-10-15)
First published15 October 2012 (2012-10-15)
Latest versionDecember 18, 2018 (2018-12-18)
Preview versionEditor's Draft
October 30, 2019 (2019-10-30)
Organization W3C
Committee CSS Working Group
Editors
  • Dirk Schulze
  • Dean Jackson
  • Vincent Hardy
  • Erik Dahlström
Domain Visual effects

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.

Contents

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

Example SVG using various filter primitives
Textures:
feTurbulence, feDiffuseLighting, feDistantLight, feComposite and feBlend
Shadows:
feGaussianBlur, feOffset, feColorMatrix and feBlend Catan Universe fixed setup.svg
Example SVG using various filter primitives
Textures:feTurbulence, feDiffuseLighting, feDistantLight, feComposite and feBlend
Shadows:feGaussianBlur, feOffset, feColorMatrix and feBlend
Demonstration of an animated refraction effect using feTurbulence, feDisplacementMap and Synchronized Multimedia Integration Language Demo animated feTurbulence feDisplacementMap mask SMIL.svg
Demonstration of an animated refraction effect using feTurbulence, feDisplacementMap and Synchronized Multimedia Integration Language

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:

NameElementSVG Basic
BlendfeBlendYes
Color matrixfeColorMatrixYes
Component transferfeComponentTransferYes
CompositefeCompositeYes
Convolve matrix feConvolveMatrixNo
Diffuse lighting feDiffuseLightingNo
Displacement map feDisplacementMapNo
FloodfeFloodYes
Gaussian blur feGaussianBlurYes
ImagefeImageYes
MergefeMergeYes
MorphologyfeMorphologyNo
OffsetfeOffsetYes
Specular lighting feSpecularLightingNo
TilefeTileYes
Turbulence feTurbulenceNo

The current draft of the Filter Effects Module Level 1 adds a filter primitive for drop shadow. This primitive, feDropShadow, is just a shorthand for a combination of other filter primitives. [1]

Framework for applying a filter

<?xml version="1.0"?><svgxmlns="http://www.w3.org/2000/svg"version="1.1"viewBox="0 0 400 300"><defs><filterid="AFilter"><!-- Definition of filter goes here --></filter></defs><textx="10"y="100"filter="url(#AFilter)">afilterapplied</text></svg>

Related Research Articles

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">Vector graphics</span> Computer graphics images defined by points, lines and curves

Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display and printing hardware, vector data models and file formats, as well as the software based on these data models. Vector graphics is an alternative to raster or bitmap graphics, with each having advantages and disadvantages in specific situations.

Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.

Computer Graphics Metafile (CGM) is a free and open international standard file format for 2D vector graphics, raster graphics, and text, and is defined by ISO/IEC 8632.

<span class="mw-page-title-main">Inkscape</span> Vector graphics editor

Inkscape is a free and open-source vector graphics editor for GNU/Linux, Windows and macOS. It offers a rich set of features and is widely used for both artistic and technical illustrations such as cartoons, clip art, logos, typography, diagramming and flowcharting. It uses vector graphics to allow for sharp printouts and renderings at unlimited resolution and is not bound to a fixed number of pixels like raster graphics. Inkscape uses the standardized Scalable Vector Graphics (SVG) file format as its main format, which is supported by many other applications including web browsers. It can import and export various other file formats, including SVG, AI, EPS, PDF, PS and PNG.

XML Linking Language, or XLink, is an XML markup language and W3C specification that provides methods for creating internal and external links within XML documents, and associating metadata with those links.

Cairo (graphics) Vector graphics-based software library

Cairo is an open-source graphics library that provides a vector graphics-based, device-independent API for software developers. It provides primitives for two-dimensional drawing across a number of different back ends. Cairo uses hardware acceleration when available.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

A number of vector graphics editors exist for various platforms. Potential users of these editors will make a comparison of vector graphics editors based on factors such as the availability for the user's platform, the software license, the feature set, the merits of the user interface (UI) and the focus of the program. Some programs are more suitable for artistic work while others are better for technical drawings. Another important factor is the application's support of various vector and bitmap image formats for import and export.

Precision Graphics Markup Language (PGML) is an XML-based language for representing vector graphics. It was a World Wide Web Consortium (W3C) submission by Adobe Systems, IBM, Netscape, and Sun Microsystems, that was not adopted as a recommendation. PGML is a 2D graphical format, offering precision for graphic artists, guaranteeing that the design created will appear in end user systems with the correct formatting, layout and the precision of color.

The SVG Working Group is a working group created by the World Wide Web Consortium (W3C) to address the need for an alternative to the PostScript document format. The PostScript format was unable to create scalable fonts and objects without creating files which were inordinately larger than a file which used unscalable fonts and objects.

<span class="mw-page-title-main">Apache Batik</span>

Batik is a pure-Java library that can be used to render, generate, and manipulate SVG graphics. IBM supported the project and then donated the code to the Apache Software Foundation, where other companies and teams decided to join efforts. Batik provides a set of core modules that provide functionality to:

<span class="mw-page-title-main">Even–odd rule</span>

The even–odd rule is an algorithm implemented in vector-based graphic software, like the PostScript language and Scalable Vector Graphics (SVG), which determines how a graphical shape with more than one closed outline will be filled. Unlike the nonzero-rule algorithm, this algorithm will alternatively color and leave uncolored shapes defined by nested closed paths irrespective of their winding.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

The Office Open XML file formats are a set of file formats that can be used to represent electronic office documents. There are formats for word processing documents, spreadsheets and presentations as well as specific formats for material such as mathematical formulae, graphics, bibliographies etc.

Multimodal Architecture and Interfaces is an open standard developed by the World Wide Web Consortium since 2005. It was published as a Recommendation of the W3C on October 25, 2012. The document is a technical report specifying a multimodal system architecture and its generic interfaces to facilitate integration and multimodal interaction management in a computer system. It has been developed by the W3C's Multimodal Interaction Working Group.

This is a glossary of terms relating to computer graphics.

<span class="mw-page-title-main">Boxy SVG</span> Vector graphics editor

Boxy SVG is a vector graphics editor for creating illustrations, as well as logos, icons, and other elements of graphic design. It is primarily focused on editing drawings in the SVG file format. The program is available as both a web app and a desktop application for Windows, macOS, ChromeOS, and Linux-based operating systems.

References

  1. Schulze, Dirk; Jackson, Dean, eds. (18 December 2018). "Filter Effects Module Level 1". www.w3.org. Retrieved 2023-01-14.