Filter Effects – SVG 1.1 (Second Edition)
15 Filter EffectsContents
15.1 Introduction
This chapter describes SVG's declarative filter effects
feature set, which when combined with the 2D power of SVG can
describe much of the common artwork on the Web in such a way
that client-side generation and alteration can be performed
easily. In addition, the ability to apply filter effects to SVG
helps to maintain the semantic structure of the
document, instead of resorting to images which aside from
generally being a fixed resolution tend to obscure the original
semantics of the elements they replace. This is especially true
for effects applied to text.
A filter effect consists of a series of graphics operations
that are applied to a given source
graphic to produce a modified graphical result. The
result of the filter effect is rendered to the target device
instead of the original source graphic. The following
illustrates the process:
Filter effects are defined by
elements. To apply a
filter effect to a
, you set the value of the
property on the given
element such that it references the filter effect.
element contains a set
of filter primitives as its children.
Each filter primitive performs a single fundamental graphical
operation (e.g., a 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
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 by two by adding a black copy of original source
graphic offset to create a drop shadow. In effect, there are
now two layers of graphics, both with the same original source
When applied to
such as , the
property applies to the
contents of the group as a whole. The group's children do not
render to instead, the graphics commands
necessary to render the children are stored temporarily.
Typically, the graphics commands are executed as part of the
processing of the referenced
element via use of the
or . Filter effects can
be applied to
with no content (e.g., an empty
element), in which case the
consist of a
transparent black rectangle that is the size of the .
Sometimes filter primitives result in undefined pixels. For
example, filter primitive
can shift an image
down and to the right, leaving undefined pixels at the top and
left. In these cases, the undefined pixels are set to
transparent black.
15.2 An example
The following shows an example of a filter effect.
Example filters01 -
introducing filter effects.
&?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 width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&title&Example filters01.svg - introducing filter effects&/title&
&desc&An example which combines multiple filter primitives
to produce a 3D lighting effect on a graphic consisting
of the string "SVG" sitting on top of oval filled in red
and surrounded by an oval outlined in red.&/desc&
&filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"&
&feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/&
&feOffset in="blur" dx="4" dy="4" result="offsetBlur"/&
&feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut"&
&fePointLight x="-5000" y="-10000" z="20000"/&
&/feSpecularLighting&
&feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/&
&feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/&
&feMergeNode in="offsetBlur"/&
&feMergeNode in="litPaint"/&
&/feMerge&
&rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" /&
&g filter="url(#MyFilter)" &
&path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /&
&path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /&
&g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" &
&text x="52" y="76"&SVG&/text&
&/svg&Example filters01
The filter effect used in the example above is repeated here
with reference numbers in the left column before each of the
six filter primitives:
&filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"&
&desc&Produces a 3D lighting effect.&/desc&
&feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/&
&feOffset in="blur" dx="4" dy="4" result="offsetBlur"/&
&feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut"&
&fePointLight x="-5000" y="-10000" z="20000"/&
&/feSpecularLighting&
&feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/&
&feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/&
&feMergeNode in="offsetBlur"/&
&feMergeNode in="litPaint"/&
&/feMerge&
The following pictures show the intermediate image results
from each of the six filter elements:
Source graphic
After filter primitive 1
After filter primitive 2
After filter primitive 3
After filter primitive 4
After filter primitive 5
After filter primitive 6
Filter primitive
takes input
, which is the alpha
channel of the source graphic. The result is stored in a
temporary buffer named "blur". Note that "blur" is used as
input to both filter primitives 2 and 3.Filter primitive
takes buffer
"blur", shifts the result in a positive direction in both x
and y, and creates a new buffer named "offsetBlur". The
effect is that of a drop shadow.Filter primitive , uses
buffer "blur" as a model of a surface elevation and generates
a lighting effect from a single point source. The result is
stored in buffer "specOut".Filter primitive
masks out the
result of filter primitive 3 by the original source graphics
alpha channel so that the intermediate result is no bigger
than the original source graphic.Filter primitive
composites the
result of the specular lighting with the original source
graphic.Filter primitive
composites two
layers together. The lower layer consists of the drop shadow
result from filter primitive 2. The upper layer consists of
the specular lighting result from filter primitive 5.
15.3 The ‘filter’ element
The description of the
element follows:
‘filter’Categories:NoneContent model:Any number of the following elements, in any order:
— , , , , , , , , , , , , , , , Attributes: — , , ,
— , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
— , , , , , , DOM Interfaces:
Attribute definitions:
filterUnits = "userSpaceOnUse
| objectBoundingBox"See .primitiveUnits =
"userSpaceOnUse | objectBoundingBox"Specifies the coordinate system for the various length
values within the filter primitives and for the attributes
that define the .
If primitiveUnits="userSpaceOnUse", any
length values within the filter definitions represent
values in the current user coordinate system in place at
the time when the
element is
referenced (i.e., the user coordinate system for the
element referencing the
element via a
property).
If primitiveUnits="objectBoundingBox",
then any length values within the filter definitions
represent fractions or percentages of the bounding box on
the referencing element (see ). Note that if only one number was specified in a
this number is expanded out before the
computation takes place.
If attribute
is not specified, then the effect is as if a value of userSpaceOnUse were
specified.
yes.x = ""See .y = ""See .width = ""See .height = ""See .filterRes = ""See .xlink:href = ""An
to another
element within the
current SVG document fragment. Any attributes which are
defined on the referenced
element which are not
defined on this element are inherited by this element. If
this element has no defined filter nodes, and the
referenced element has defined filter nodes (possibly due
to its own
attribute),
then this element inherits the filter nodes defined from
the referenced
element. Inheritance can be indirect t
thus, if the referenced
element inherits
attributes or its filter node specification due to its own
attribute, then the
current element can inherit those attributes or filter node
specifications.
inherit into the
elemen properties do not inherit
from the element referencing the
elements are
nev their only usage is as something that
can be referenced using the
property. The
property does not apply
elements are
not directly rendered even if the
property is set to a
value other than none, and
elements are
available for referencing even when the
property on the
element or any of its
ancestors is set to none.
15.4 The ‘filter’
The description of the
property is as follows:
‘filter’
&funciri&An
element which
defines the filter effects that shall be applied to this
element.noneDo not apply any filter effects to this element.
15.5 Filter effects region
element can define a
region on the canvas to which a given filter effect applies and
can provide a resolution for any intermediate continuous tone
images used to process any raster-based filter primitives. The
element has the
following attributes which work together to define the filter
effects region:
Defines the coordinate system for attributes , ,
If filterUnits="userSpaceOnUse",
values in the current user coordinate system in place at the time
is referenced (i.e., the user
coordinate system for the element referencing the
property).
If filterUnits="objectBoundingBox",
represent fractions or percentages of the bounding box on the referencing
element (see ).
If attribute
is not specified, then the effect
is if a value of 'objectBoundingBox'
were specified.
These attributes define a rectangular region on the canvas to
which this filter applies.
The amount of memory and processing time required to apply
the filter are related to the size of this rectangle and the
attribute of the filter.
The coordinate system for these attributes depends on the
value for attribute .
Negative values for
are an error
Zero values disable rendering of the element which referenced
the filter.
The bounds of this rectangle act as a hard clipping region for each
included w thus, if
the effect of a given filter primitive would extend beyond
the bounds of the rectangle (this sometimes happens when
primitive with a very large ),
parts of the effect will get clipped.
is not specified, the effect is as if a
value of -10% were specified.
is not specified, the effect is as if a
value of 120% were specified.
This attribute takes the form x-pixels [y-pixels],
and indicates the width and height of the intermediate images in
pixels. If not provided, then the user agent will use reasonable values
to produce a high-quality result on the output device.
Care should be taken when assigning a non-default value to
this attribute. Too small of a value may result in unwanted
pixelation in the result. Too large of a value may result in
slow processing and large memory usage.
Negative values are an error (see
Zero values disable rendering of the element which referenced
the filter.
Non-integer values are truncated, i.e rounded to the closest integer value towards zero.
Note that both of the two possible value for
(i.e., 'objectBoundingBox' and
'userSpaceOnUse') result in a filter
region whose coordinate system has its X-axis and Y-axis each
parallel to the X-axis and Y-axis, respectively, of the user
coordinate system for the element to which the filter will be
Sometimes implementers can achieve faster performance when
can be mapped direc
thus, for best performance on display devices, it is suggested
that authors define their region such that SVG user agent can
pixel-for-pixel with the background. In
particular, for best filter effects performance, avoid rotating
or skewing the user coordinate system. Explicit values for
can either
help or harm performance. If
is smaller than the
automatic (i.e., default) filter resolution, then filter effect
might have faster performance (usually at the expense of
quality). If
than the automatic (i.e., default) filter resolution, then
filter effects performance will usually be slower.
It is often necessary to provide padding space because the
filter effect might impact bits slightly outside the
tight-fitting bounding box on a given object. For these
purposes, it is possible to provide negative percentage values
and , and percentages values greater than
and . This, for example, is
why the defaults for the filter effects region are x="-10%"
y="-10%" width="120%" height="120%".
15.6 Accessing the background image
Two possible pseudo input images for filter effects are
and , which each
represent an image snapshot of the canvas under the filter
region at the time that the
element is invoked.
represents both the
color values and alpha channel of the canvas (i.e., RGBA pixel
values), whereas
represents only the alpha channel.
Implementations of SVG user agents often will need to
maintain supplemental background image buffers in order to
support the
pseudo input
images. Sometimes, the background image buffers will contain an
in-memory copy of the accumulated painting operations on the
current canvas.
Because in-memory image buffers can take up significant
system resources, SVG content must explicitly indicate to the
SVG user agent that the document needs access to the background
image before
pseudo input
images can be used. The property which enables access to the
background image is , defined below:
‘enable-background’
applicable to
and specifies how the SVG user agents manages the accumulation
of the background image.
A value of new indicates two things:
It enables the ability of children of the current
to access the background image.It indicates that a new (i.e., initially transparent
black) background image canvas is established and that (in
effect) all children of the current
shall be rendered into the new background image canvas in
addition to being rendered onto the target device.
A meaning of enable-background: accumulate
(the initial/default value) depends on context:
If an ancestor
has a property value of enable-background: new, then all
within the current
are rendered both onto the parent 's background image canvas and onto the target
device.Otherwise, there is no current background image canvas,
so it is only necessary to render
onto the target device. (No need to render to the background
image canvas.)
If a filter effect specifies either the
pseudo input images
and no ancestor
has a property value of enable-background: new, then the
background image request is technically in error. Processing
will proceed without interruption (i.e., no error message) and
a transparent black image shall be provided in response to the
The optional
&x&,&y&,&width&,&height&
parameters on the new value are
values that indicate the
subregion of the 's
where access
to the background image is allowed to happen. These parameters
enable the SVG user agent potentially to allocate smaller
temporary image buffers than the default values. Thus, the values
&x&,&y&,&width&,&height& act as a
clipping rectangle on the background image canvas. Negative
values for &width& or &height& are an error (see ). If
more than zero but less than four of the values
&x&,&y&,&width& and &height& are
specified or if zero values are specified for &width& or
processed as if background image processing were not
Assume you have an element E in the document and that E has
a series of ancestors A1 (its immediate parent),
A2, etc. (Note: A0 is E.) Each ancestor
Ai will have a corresponding temporary background
image offscreen buffer BUFi. The contents of the
background image available to a
referenced by E is
defined as follows:
Find the element Ai with the smallest
subscript i (including A0=E) for which the
property has
the value new. (Note: if
there is no such ancestor element, then there is no
background image available to E, in which case a transparent
black image will be used as E's background image.)For each Ai (from i=n to 1), initialize
BUFi to transparent black. Render all children of
Ai up to but not including Ai-1 into
BUFi. The children are painted, then filtered,
clipped, masked and composited using the various painting,
filtering, clipping, masking and object opacity settings on
the given child. Any filter effects, masking and group
opacity that might be set on Ai do not
apply when rendering the children of Ai into
(Note that for the case of A0=E, the graphical
contents of E are not rendered into BUF1 and thus
are not part of the background image available to E. Instead,
the graphical contents of E are available via the
pseudo input
images.)Then, for each Ai (from i=1 to n-1), composite
BUFi into BUFi+1.The accumulated result (i.e., BUFn) represents
the background image available to E.
enable-background-01 illustrates the rules for
background image processing.
&?xml version="1.0" standalone="no"?&
&!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&
&svg width="13.5cm" height="2.7cm" viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&title&Example enable-background01&/title&
&desc&This test case shows five pictures which illustrate the rules
for background image processing.&/desc&
&filter id="ShiftBGAndBlur"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"&
This filter discards the SourceGraphic, if any, and just produces
a result consisting of the BackgroundImage shifted down 125 units
and then blurred.
&feOffset in="BackgroundImage" dx="0" dy="125" /&
&feGaussianBlur stdDeviation="8" /&
&filter id="ShiftBGAndBlur_WithSourceGraphic"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"&
This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
and then renders the SourceGraphic on top of the shifted/blurred background.
&feOffset in="BackgroundImage" dx="0" dy="125" /&
&feGaussianBlur stdDeviation="8" result="blur" /&
&feMergeNode in="blur"/&
&feMergeNode in="SourceGraphic"/&
&/feMerge&
&g transform="translate(0,0)"&
&desc&The first picture is our reference graphic without filters.&/desc&
&rect x="25" y="25" width="100" height="100" fill="red"/&
&g opacity=".5"&
&circle cx="125" cy="75" r="45" fill="green"/&
&polygon points="160,25 160,125 240,75" fill="blue"/&
&rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&
&g enable-background="new" transform="translate(270,0)"&
&desc&The second adds an empty 'g' element which invokes ShiftBGAndBlur.&/desc&
&rect x="25" y="25" width="100" height="100" fill="red"/&
&g opacity=".5"&
&circle cx="125" cy="75" r="45" fill="green"/&
&polygon points="160,25 160,125 240,75" fill="blue"/&
&g filter="url(#ShiftBGAndBlur)"/&
&rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&
&g enable-background="new" transform="translate(540,0)"&
&desc&The third invokes ShiftBGAndBlur on the inner group.&/desc&
&rect x="25" y="25" width="100" height="100" fill="red"/&
&g filter="url(#ShiftBGAndBlur)" opacity=".5"&
&circle cx="125" cy="75" r="45" fill="green"/&
&polygon points="160,25 160,125 240,75" fill="blue"/&
&rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&
&g enable-background="new" transform="translate(810,0)"&
&desc&The fourth invokes ShiftBGAndBlur on the triangle.&/desc&
&rect x="25" y="25" width="100" height="100" fill="red"/&
&g opacity=".5"&
&circle cx="125" cy="75" r="45" fill="green"/&
&polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur)"/&
&rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&
&g enable-background="new" transform="translate(1080,0)"&
&desc&The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.&/desc&
&rect x="25" y="25" width="100" height="100" fill="red"/&
&g opacity=".5"&
&circle cx="125" cy="75" r="45" fill="green"/&
&polygon points="160,25 160,125 240,75" fill="blue"
filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/&
&rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&
&/svg&Example enable-background-01
The example above contains five parts, described as
The first set is the reference graphic. The reference
graphic consists of a red rectangle followed by a 50%
transparent
element. Inside the
is a green circle that
partially overlaps the rectangle and a a blue triangle that
partially overlaps the circle. The three objects are then
outlined by a rectangle stroked with a thin blue line. No
filters are applied to the reference graphic.The second set enables background image processing and
adds an empty
element which invokes the
ShiftBGAndBlur filter. This filter takes the current
accumulated background image (i.e., the entire reference
graphic) as input, shifts its offscreen down, blurs it, and
then writes the result to the canvas. Note that the offscreen
for the filter is initialized to transparent black, which
allows the already rendered rectangle, circle and triangle to
show through after the filter renders its own result to the
canvas.The third set enables background image processing and
instead invokes the ShiftBGAndBlur filter on the inner
element. The accumulated
background at the time the filter is applied contains only
the red rectangle. Because the children of the inner
(i.e., the circle and
triangle) are not part of the inner
element's background and
because ShiftBGAndBlur ignores SourceGraphic, the children of
do not appear in the
result.The fourth set enables background image processing and
invokes the ShiftBGAndBlur on the
element that draws
the triangle. The accumulated background at the time the
filter is applied contains the red rectangle plus the green
circle ignoring the effect of the
property on the inner
element. (Note that the
blurred green circle at the bottom does not let the red
rectangle show through on its left side. This is due to
ignoring the effect of the
property.) Because the
triangle itself is not part of the accumulated background and
because ShiftBGAndBlur ignores SourceGraphic, the triangle
does not appear in the result.The fifth set is the same as the fourth except that
filter ShiftBGAndBlur_WithSourceGraphic is invoked instead of
ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the
same effect as ShiftBGAndBlur, but then renders the
SourceGraphic on top of the shifted, blurred background
image. In this case, SourceGraphic
thus, the result is the same as in the fourth case except
that the blue triangle now appears.
15.7 Filter primitives overview
15.7.1 Overview
This section describes the various filter primtives that can
be assembled to achieve a particular filter effect.
Unless otherwise stated, all image filters operate on
premultiplied RGBA samples. Filters which work more naturally
on non-premultiplied data (feColorMatrix and
feComponentTransfer) will temporarily undo and redo
premultiplication as specified. All raster effect filtering
operations take 1 to N input RGBA images, additional attributes
as parameters, and produce a single output RGBA image.
The RGBA result from each filter primitive will be clamped
into the allowable ranges for colors and opacity values. Thus,
for example, the result from a given filter primitive will have
any negative color values or opacity values adjusted up to
color/opacity of zero.
The color space in which a particular filter primitive
performs its operations is determined by the value of property
the given filter primitive. A different property,
determines
the color space for other color operations. Because these two
properties have different initial values ( has
an initial value of linearRGB
initial value of sRGB), in some
cases to achieve certain results (e.g., when coordinating
gradient interpolation with a filtering operation) it will be
necessary to explicitly set
to linearRGB or
sRGB on particular elements.
Note that the examples below do not explicitly set either
the initial values for these properties apply to the
15.7.2 Common attributes
With the exception of the
attribute, all of the following
attributes are available on all filter primitive elements:
Attribute definitions:
x = ""The minimum x coordinate for the subregion which
restricts calculation and rendering of the given filter
primitive. See .
yes.y = ""The minimum y coordinate for the subregion which
restricts calculation and rendering of the given filter
primitive. See .:
yes.width = ""The width of the subregion which restricts calculation
and rendering of the given filter primitive. See .
A negative value is an error (see ).
A value of zero disables the effect of the given filter
primitive (i.e., the result is a transparent black
yes.height = ""The height of the subregion which restricts calculation
and rendering of the given filter primitive. See .
A negative value is an error (see ).
A value of zero disables the effect of the given filter
primitive (i.e., the result is a transparent black
yes.result =
"&filter-primitive-reference&"Assigned name for this filter primitive. If supplied,
then graphics that result from processing this filter
primitive can be referenced by an
attribute on a subsequent
filter primitive within the same
element. If no
value is provided, the output will only be available for
re-use as the implicit input into the next filter primitive
if that filter primitive provides no value for its
attribute.
Note that a &filter-primitive-reference& is
not an XML ID; instead, a
&filter-primitive-reference& is only
meaningful within a given
element and thus
have only local scope. It is legal for the same
&filter-primitive-reference& to appear
multiple times within the same
element. When
referenced, the &filter-primitive-reference&
will use the closest preceding filter primitive with the
given result.
yes.in = " |
&filter-primitive-reference&"
Identifies input for the given filter primitive. The
value can be either one of six keywords or can be a
string which matches a previous
attribute value
within the same
element. If no
value is provided and this is the first filter primitive,
then this filter primitive will use
as its input.
If no value is provided and this is a subsequent filter
primitive, then this filter primitive will use the result
from the previous filter primitive as its input.
If the value for
appears multiple times within a given
element, then a
reference to that result will use the closest preceding
filter primitive with the given value for attribute . Forward references to
results are .
Definitions for the six keywords:
SourceGraphicThis keyword represents the
that were the original input into the
element. For
raster effects filter primitives, the
will be rasterized into an initially clear
RGBA raster in image space. Pixels left untouched by
the original graphic will be left clear. The image is
specified to be rendered in linear RGBA pixels. The
alpha channel of this image captures any anti-aliasing
specified by SVG. (Since the raster is linear, the
alpha channel of this image will represent the exact
percent coverage of each pixel.)SourceAlphaThis keyword represents the
that were the original input into the
element. SourceAlpha has all of the
same rules as
except that
only the alpha channel is used. The input image is an
RGBA image consisting of implicitly black color values
for the RGB channels, but whose alpha channel is the
same as . If this
option is used, then some implementations might need to
rasterize the
in order to extract the alpha
channel.BackgroundImageThis keyword represents an image snapshot of the
canvas under the
at the time that the
element was
invoked. See .BackgroundAlphaSame as
except only
the alpha channel is used. See
and .FillPaintThis keyword represents the value of the
property on the
target element for the filter effect. The FillPaint
image has conceptually infinite extent. Frequently this
image is opaque everywhere, but it might not be if the
"paint" itself has alpha, as in the case of a gradient
or pattern which itself includes transparent or
semi-transparent parts.StrokePaintThis keyword represents the value of the
property on the
target element for the filter effect. The StrokePaint
image has conceptually infinite extent. Frequently this
image is opaque everywhere, but it might not be if the
"paint" itself has alpha, as in the case of a gradient
or pattern which itself includes transparent or
semi-transparent parts.
attribute is available on all filter
primitive elements that require an input.
15.7.3 Filter primitive subregion
All filter primitives have attributes ,
which identify a subregion which
restricts calculation and rendering of the given filter
primitive. These attributes are defined according to the same
rules as other filter primitives' coordinate and length
attributes and thus represent values in the coordinate system
established by attribute
default to
the union (i.e., tightest fitting bounding box) of the
subregions defined for all referenced nodes. If there are no
referenced nodes (e.g., for
or ), or one or more
of the referenced nodes is a standard input (one of , , , ,
or ), or for
(which is special
because its principal function is to replicate the referenced
node in X and Y and thereby produce a usually larger result),
the default subregion is 0%,0%,100%,100%,
where as a special-case the percentages are relative to the dimensions of the , thus making the
the default
equal to the .
hard clip clipping rectangle on both the filter primitive's input image(s) and the filter primitive result.
All intermediate offscreens are defined to not exceed the
intersection of , ,
with the . The
and any of the ,
subregions are to be set up such that
all offscreens are made big enough to accommodate any pixels
which even partly intersect with either the
the x,y,width,height subregions.
references a previous
filter primitive and then stitches the tiles together based on
the referenced filter primitive in order to fill its own
Example primitive-subregion-01 demonstrates the effect
of specifying a filter primitive subregion:
&svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"&
&filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox"&
&feFlood x="25%" y="25%" width="50%" height="50%"
flood-color="green" flood-opacity="0.75"/&
&filter id="blend" primitiveUnits="objectBoundingBox"&
&feBlend x="25%" y="25%" width="50%" height="50%"
in2="SourceGraphic" mode="multiply"/&
&filter id="merge" primitiveUnits="objectBoundingBox"&
&feMerge x="25%" y="25%" width="50%" height="50%"&
&feMergeNode in="SourceGraphic"/&
&feMergeNode in="FillPaint"/&
&/feMerge&
&g fill="none" stroke="blue" stroke-width="4"&
&rect width="200" height="200"/&
&line x2="200" y2="200"/&
&line x1="200" y2="200"/&
&circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/&
&g transform="translate(200 0)"&
&g fill="none" stroke="blue" stroke-width="4"&
&rect width="200" height="200"/&
&line x2="200" y2="200"/&
&line x1="200" y2="200"/&
&circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/&
&g transform="translate(0 200)"&
&g fill="none" stroke="blue" stroke-width="4"&
&rect width="200" height="200"/&
&line x2="200" y2="200"/&
&line x1="200" y2="200"/&
&circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/&
&/svg&Example primitive-subregion-01
In the example above there are three rects that each have a cross and a circle in them.
The circle element in each one has a different filter applied, but with the same .
The filter output should be limited to the , so you should never see the circles themselves,
just the rects that make up the .
The upper left rect shows an
with flood-opacity="75%" so the cross should be visible through the green rect in the middle.
The lower left rect shows an
that merges SourceGraphic with FillPaint. Since the circle has fill-opacity="0.5" it will also be transparent so that the cross is visible through the green rect in the middle.
The upper right rect shows an
that has mode="multiply". Since the circle in this case isn't transparent the result is totally opaque. The rect should be dark green and the cross should not be visible through it.
15.8 Light source elements and properties
15.8.1 Introduction
The following sections define the elements that define a
light source, ,
and , and property , which defines
the color of the light.
15.8.2 Light source ‘feDistantLight’
‘feDistantLight’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , , DOM Interfaces:
Attribute definitions:
azimuth = ""Direction angle for the light source on the XY plane (clockwise),
in degrees from the x axis.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.elevation = ""Direction angle for the light source from the XY plane towards the z
axis, in degrees. Note the positive Z-axis points towards the viewer of
the content.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
The following diagram illustrates the angles which
represent in an XYZ coordinate system.
15.8.3 Light source ‘fePointLight’
‘fePointLight’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , , DOM Interfaces:
Attribute definitions:
x = ""X location for the light source in the coordinate
system established by attribute
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.y = ""Y location for the light source in the coordinate
system established by attribute
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.z = ""Z location for the light source in the coordinate
system established by attribute
element, assuming
that, in the , the positive Z-axis comes out
towards the person viewing the content and assuming that
one unit along the Z-axis equals .
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
15.8.4 Light source ‘feSpotLight’
‘feSpotLight’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , , DOM Interfaces:
Attribute definitions:
x = ""X location for the light source in the coordinate
system established by attribute
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.y = ""Y location for the light source in the coordinate
system established by attribute
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.z = ""Z location for the light source in the coordinate
system established by attribute
element, assuming
that, in the , the positive Z-axis comes out
towards the person viewing the content and assuming that
one unit along the Z-axis equals .
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.pointsAtX = ""X location in the coordinate system established by
element of the
point at which the light source is pointing.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.pointsAtY = ""Y location in the coordinate system established by
element of the
point at which the light source is pointing.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.pointsAtZ = ""Z location in the coordinate system established by
element of the
point at which the light source is pointing, assuming that, in the , the positive Z-axis comes out
towards the person viewing the content and assuming that
one unit along the Z-axis equals .
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.specularExponent = ""Exponent value controlling the focus for the light
If the attribute is not specified, then the effect is as
if a value of 1 were
specified.
yes.limitingConeAngle = ""A limiting cone which restricts the region where the
light is projected. No light is projected outside the cone.
represents
the angle in degrees between the spot light axis (i.e. the axis
between the light source and the point to which it is
pointing at) and the spot light cone. User agents should
apply a smoothing technique such as anti-aliasing at the
boundary of the cone.
If no value is specified, then no limiting cone will be
15.8.5 The ‘lighting-color’ property
defines the color of the light source for filter primitives
‘lighting-color’
15.9 Filter primitive ‘feBlend’
This filter composites two objects together using commonly
used imaging software blending modes. It performs a pixel-wise
combination of two input images.
‘feBlend’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
— , , , , DOM Interfaces:
Attribute definitions:
mode = "normal | multiply | screen
| darken | lighten"One of the image blending modes (see
below). If attribute
is not specified, then the effect is as if a value of normal were specified.
yes.in2 = "(see
attribute)"The second input image to the blending operation. This
attribute can take on the same values as the
attribute.
For all feBlend modes, the result opacity is computed as
qr = 1 - (1-qa)*(1-qb)
For the compositing formulas below, the following
definitions apply:
cr = Result color (RGB) - premultiplied
qa = Opacity value at a given pixel for image A
qb = Opacity value at a given pixel for image B
ca = Color (RGB) at a given pixel for image A - premultiplied
cb = Color (RGB) at a given pixel for image B - premultiplied
The following
table provides the list of available image blending modes:
Image Blending ModeFormula for computing result colornormalcr = (1 - qa) * cb + camultiplycr = (1-qa)*cb + (1-qb)*ca + ca*cbscreencr = cb + ca - ca * cbdarkencr = Min ((1 - qa) * cb + ca, (1 - qb) * ca
+ cb)lightencr = Max ((1 - qa) * cb + ca, (1 - qb) * ca
'normal' blend mode is
equivalent to
filter primitive,
matches the blending method used by
and matches the
technique used in SVG for all compositing
outside of filter effects.
Example feBlend shows
examples of the five blend modes.
&?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 width="5cm" height="5cm" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&title&Example feBlend - Examples of feBlend modes&/title&
&desc&Five text strings blended into a gradient,
with one text string for each of the five feBlend modes.&/desc&
&linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0"&
&stop offset="0" stop-color="#000000" /&
&stop offset=".33" stop-color="#ffffff" /&
&stop offset=".67" stop-color="#ff0000" /&
&stop offset="1" stop-color="#808080" /&
&/linearGradient&
&filter id="Normal"&
&feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/&
&filter id="Multiply"&
&feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/&
&filter id="Screen"&
&feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/&
&filter id="Darken"&
&feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/&
&filter id="Lighten"&
&feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/&
&rect fill="none" stroke="blue"
x="1" y="1" width="498" height="498"/&
&g enable-background="new" &
&rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" /&
&g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" &
&text x="50" y="90" filter="url(#Normal)" &Normal&/text&
&text x="50" y="180" filter="url(#Multiply)" &Multiply&/text&
&text x="50" y="270" filter="url(#Screen)" &Screen&/text&
&text x="50" y="360" filter="url(#Darken)" &Darken&/text&
&text x="50" y="450" filter="url(#Lighten)" &Lighten&/text&
&/svg&Example feBlend
15.10 Filter primitive ‘feColorMatrix’
This filter applies a matrix transformation:
| a00 a01 a02 a03 a04 |
| a10 a11 a12 a13 a14 |
| a20 a21 a22 a23 a24 | * | B |
| a30 a31 a32 a33 a34 |
on the RGBA color and alpha values of every pixel on the
input graphics to produce a result with a new set of RGBA color
and alpha values.
The calculations are performed on non-premultiplied color
values. If the input graphics consists of premultiplied color
values, those values are automatically converted into
non-premultiplied color values for this operation.
These matrices often perform an identity mapping in the
alpha channel. If that is the case, an implementation can avoid
the costly undoing and redoing of the premultiplication for all
pixels with A = 1.
‘feColorMatrix’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
— , , , , DOM Interfaces:
Attribute definitions:
type = "matrix | saturate |
hueRotate | luminanceToAlpha"Indicates the type of matrix operation. The keyword
'matrix' indicates that a full
5x4 matrix of values will be provided. The other keywords
represent convenience shortcuts to allow commonly used
color operations to be performed without specifying a
complete matrix. If attribute
is not specified, then the effect is as if a value of matrix were specified.
yes.values = "list of s"
The contents of
depends on the value of attribute :
For type="matrix",
is a list of 20
matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34),
separated by whitespace and/or a comma. For example,
the identity matrix could be expressed as:
type="matrix"
values="1 0 0 0 0
0 0 0 1 0"
For type="saturate",
is a single
real number value (0 to 1). A saturate operation is
equivalent to the following matrix operation:
|0.213+0.787s
0.715-0.715s
0.072-0.072s 0
|0.213-0.213s
0.715+0.285s
0.072-0.072s 0
|0.213-0.213s
0.715-0.715s
0.072+0.928s 0
0 | * | B |
For type="hueRotate",
is a single one
real number value (degrees). A hueRotate operation is
equivalent to the following matrix operation:
0 | * | B |
where the terms a00, a01, etc. are calculated as
| a00 a01 a02 |
[+0.213 +0.715 +0.072]
| a10 a11 a12 | =
[+0.213 +0.715 +0.072] +
| a20 a21 a22 |
[+0.213 +0.715 +0.072]
[+0.787 -0.715 -0.072]
cos(hueRotate value) *
[-0.213 +0.285 -0.072] +
[-0.213 -0.715 +0.928]
[-0.213 -0.715+0.928]
sin(hueRotate value) *
[+0.143 +0.140-0.283]
[-0.787 +0.715+0.072]
Thus, the upper left term of the hue matrix turns out
.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213
For type="luminanceToAlpha",
applicable. A luminanceToAlpha operation
is equivalent to the following matrix operation:
0 | * | B |
If the attribute is not specified, then the default
behavior depends on the value of attribute . If type="matrix", then this
attribute defaults to the identity matrix. If type="saturate", then this
attribute defaults to the value 1, which results in the
identity matrix. If type="hueRotate", then this
attribute defaults to the value 0, which results in the
identity matrix.
Example feColorMatrix shows
examples of the four types of feColorMatrix operations.
&?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 width="8cm" height="5cm" viewBox="0 0 800 500"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&title&Example feColorMatrix - Examples of feColorMatrix operations&/title&
&desc&Five text strings showing the effects of feColorMatrix:
an unfiltered text string acting as a reference,
use of the feColorMatrix matrix option to convert to grayscale,
use of the feColorMatrix saturate option,
use of the feColorMatrix hueRotate option,
and use of the feColorMatrix luminanceToAlpha option.&/desc&
&linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0"&
&stop offset="0" stop-color="#ff00ff" /&
&stop offset=".33" stop-color="#88ff88" /&
&stop offset=".67" stop-color="#2020ff" /&
&stop offset="1" stop-color="#d00000" /&
&/linearGradient&
&filter id="Matrix" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feColorMatrix type="matrix" in="SourceGraphic"
values=".33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0
.33 .33 .33 0 0"/&
&filter id="Saturate40" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/&
&filter id="HueRotate90" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/&
&filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/&
&feComposite in="SourceGraphic" in2="a" operator="in" /&
&rect fill="none" stroke="blue"
x="1" y="1" width="798" height="498"/&
&g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" &
&rect x="100" y="0" width="500" height="20" /&
&text x="100" y="90"&Unfiltered&/text&
&text x="100" y="190" filter="url(#Matrix)" &Matrix&/text&
&text x="100" y="290" filter="url(#Saturate40)" &Saturate&/text&
&text x="100" y="390" filter="url(#HueRotate90)" &HueRotate&/text&
&text x="100" y="490" filter="url(#LuminanceToAlpha)" &Luminance&/text&
&/svg&Example feColorMatrix
15.11 Filter primitive ‘feComponentTransfer’
This filter primitive performs component-wise remapping of
data as follows:
R' = ( R )
G' = ( G )
B' = ( B )
A' = ( A )
for every pixel. It allows operations like brightness
adjustment, contrast adjustment, color balance or
thresholding.
The calculations are performed on non-premultiplied color
values. If the input graphics consists of premultiplied color
values, those values are automatically converted into
non-premultiplied color values for this operation. (Note that
the undoing and redoing of the premultiplication can be avoided
identity transform and all alpha values on the source graphic
are set to 1.)
‘feComponentTransfer’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
— , , , , DOM Interfaces:
The child elements of a
element specify the
transfer functions for the four channels:
— transfer function for the red component of the input graphic — transfer function for the green component of the input graphic — transfer function for the blue component of the input graphic — transfer function for the alpha component of the input graphic
The following rules apply to the processing of the
If more than one
of the same kind is specified, the last occurrence is to be used.If any of the
are unspecified, the
must be processed as if those
were specified with their
attributes set to 'identity'.
‘feFuncR’Categories:NoneContent model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , DOM Interfaces:
‘feFuncG’Categories:NoneContent model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , DOM Interfaces:
‘feFuncB’Categories:NoneContent model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , DOM Interfaces:
‘feFuncA’Categories:NoneContent model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , DOM Interfaces:
The attributes below are the
transfer function element attributes,
which apply to sub-elements , ,
that define the transfer functions.
Attribute definitions:
type = "identity | table | discrete
| linear | gamma"
Indicates the type of component transfer function. The
type of function determines the applicability of the
other attributes.
In the following, C is the initial component (e.g.,
), C' is th both
in the closed interval [0,1].
For identity:
For table, the
function is defined by linear interpolation
between values given in the attribute
. The table has n+1
values (i.e., v0 to vn)
specifying the start and end values for n
evenly sized interpolation regions. Interpolations
use the following formula:
For a value C & 1 find k
such that:
k/n &= C & (k+1)/n
The result C' is given by:
C' = vk + (C -
k/n)*n * (vk+1 - vk)
If C = 1 then:
For discrete, the
function is defined by the step function given in the
attribute , which
provides a list of n values (i.e.,
v0 to vn-1) in order to
identify a step function consisting of n
steps. The step function is defined by the following
For a value C & 1 find k
such that:
k/n &= C & (k+1)/n
The result C' is given by:
If C = 1 then:
C' = vn-1.
For linear, the
function is defined by the following linear equation:
For gamma, the
function is defined by the following exponential
tableValues = "(list of s)"When type="table", the
v0,v1,...vn, separated by white space and/or a
comma, which define the lookup table. An empty list results
in an identity transfer function.
If the attribute is not
specified, then the effect is as if an empty list were
yes.slope = ""When type="linear", the
slope of the linear function.
If the attribute is not specified, then the effect is as
if a value of 1 were
specified.
yes.intercept = ""When type="linear", the
intercept of the linear function.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
yes.amplitude = ""When type="gamma", the
amplitude of the gamma function.
If the attribute is not specified, then the effect is as
if a value of 1 were
specified.
yes.exponent = ""When type="gamma", the
exponent of the gamma function.
If the attribute is not specified, then the effect is as
if a value of 1 were
specified.
yes.offset = ""When type="gamma", the
offset of the gamma function.
If the attribute is not specified, then the effect is as
if a value of 0 were
specified.
Example feComponentTransfer shows
examples of the four types of feComponentTransfer operations.
&?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 width="8cm" height="4cm" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"&
&title&Example feComponentTransfer - Examples of feComponentTransfer operations&/title&
&desc&Four text strings showing the effects of feComponentTransfer:
an identity function acting as a reference,
use of the feComponentTransfer table option,
use of the feComponentTransfer linear option,
and use of the feComponentTransfer gamma option.&/desc&
&linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="600" y2="0"&
&stop offset="0" stop-color="#ff0000" /&
&stop offset=".33" stop-color="#00ff00" /&
&stop offset=".67" stop-color="#0000ff" /&
&stop offset="1" stop-color="#000000" /&
&/linearGradient&
&filter id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feComponentTransfer&
&feFuncR type="identity"/&
&feFuncG type="identity"/&
&feFuncB type="identity"/&
&feFuncA type="identity"/&
&/feComponentTransfer&
&filter id="Table" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feComponentTransfer&
&feFuncR type="table" tableValues="0 0 1 1"/&
&feFuncG type="table" tableValues="1 1 0 0"/&
&feFuncB type="table" tableValues="0 1 1 0"/&
&/feComponentTransfer&
&filter id="Linear" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feComponentTransfer&
&feFuncR type="linear" slope=".5" intercept=".25"/&
&feFuncG type="linear" slope=".5" intercept="0"/&
&feFuncB type="linear" slope=".5" intercept=".5"/&
&/feComponentTransfer&
&filter id="Gamma" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%"&
&feComponentTransfer&
&feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/&
&feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/&
&feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/&
&/feComponentTransfer&
&rect fill="none" stroke="blue"
x="1" y="1" width="798" height="398"/&
&g font-family="Verdana" font-size="75"
font-weight="bold" fill="url(#MyGradient)" &
&rect x="100" y="0" width="600" height="20" /&
&text x="100" y="90"&Identity&/text&
&text x="100" y="190" filter="url(#Table)" &TableLookup&/text&
&text x="100" y="290" filter="url(#Linear)" &LinearFunc&/text&
&text x="100" y="390" filter="url(#Gamma)" &GammaFunc&/text&
&/svg&Example feComponentTransfer
15.12 Filter primitive ‘feComposite’
This filter performs the combination of the two input images
pixel-wise in image space using one of the Porter-Duff [] compositing
operations: over, in, atop, out, xor []. Additionally, a
component-wise arithmetic operation (with the result
clamped between [0..1]) can be applied.
The arithmetic operation is useful for combining
the output from the
with texture data. It is also useful for implementing
dissolve. If the arithmetic operation is
chosen, each result pixel is computed using the following
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively
k1, k2, k3 and k4 indicate the values of the attributes with the same name
For this filter primitive, the extent of the resulting image
might grow as described in the section that describes the .
‘feComposite’Categories:Content model:Any number of the following elements, in any order:
Attributes: — , , ,
— , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
— , , , , DOM Interfaces:
Attribute definitions:
operator = "over | in | out | atop
| xor | arithmetic"The compositing operation that is to be performed. All
types except
arithmetic match the
corresponding operation as described in []. The arithmetic operator is described
above. If attribute
is not specified, then the effect is as if a value of over were specified.
yes.k1 = ""Only applicable if operator="arithmetic".
If the attribute is not specified, the effect is as if a
value of 0 were specified.
yes.k2 = ""Only applicable if operator="arithmetic".
If the attribute is not specified, the effect is as if a
value of 0 were specified.
yes.k3 = ""Only applicable if operator="arithmetic".
If the attribute is not specified, the effect is as if a
value of 0 were specified.
yes.k4 = ""Only applicable if operator="arithmetic".
If the attribute is not specified, the effect is as if a
value of 0 were specified.
yes.in2 = "(see
attribute)"The second input image to the compositing operation.
This attribute can take on the same values as the
attribute.
Example feComposite shows
examples of the six types of feComposite operations. It also
shows two different techniques to using the
as part of the
compositing operation.
The first two rows render bluish triangles into the
background. A filter is applied which composites reddish
triangles into the bluish triangles using one of the
compositing operations. The result from compositing is drawn
onto an opaque white temporary surface, and then that result is
written to the canvas. (The opaque white temporary surface
obliterates the original bluish triangle.)
The last two rows apply the same compositing operations of
reddish triangles into bluish triangles. However, the
compositing result is directly blended into the canvas (the
opaque white temporary surface technique is not used). In some
cases, the results are different than when a temporary opaque
white surface is used. The original bluish triangle from the
background shines through wherever the compositing operation
results in completely transparent pixel. In other cases, the
result from compositing is blended into the bluish triangle,
resulting in a different final color value.
&?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 width="330" height="195" viewBox="0 0 " version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&
&title&Example feComposite - Examples of feComposite operations&/title&
&desc&Four rows of six pairs of overlapping triangles depicting
the six different feComposite operators under different
opacity values and different clearing of the background.&/desc&
&desc&Define two sets of six filters for each of the six compositing operators.
The first set wipes out the background image by flooding with opaque white.
The second set does not wipe out the background, with the result
that the background sometimes shines through and is other cases
is blended into itself (i.e., "double-counting").&/desc&
&filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="arithmeticFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%"&
&feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&
&feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&
&feMerge& &feMergeNode in="flood"/& &feMergeNode in="comp"/& &/feMerge&
&filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&
&filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&
&filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&
&filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&
&filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&
&filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%"&
&feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&
&path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /&
&path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /&
&path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /&
&path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /&
&g id="TwoBlueTriangles"&
&use xlink:href="#Blue100"/&
&use xlink:href="#Blue50"/&
&g id="BlueTriangles"&
&use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/&
&use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/&
&use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/&
&use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/&
&use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/&
&use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/&
&rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/&
&g font-family="Verdana" font-size="40" shape-rendering="crispEdges"&
&desc&Render the examples using the filters that draw on top of
an opaque white surface, thus obliterating the background.&/desc&
&g enable-background="new"&
&text x="15" y="75"&opacity 1.0&/text&
&text x="15" y="115" font-size="27"&(with feFlood)&/text&
&text x="15" y="200"&opacity 0.5&/text&
&text x="15" y="240" font-size="27"&(with feFlood)&/text&
&use xlink:href="#BlueTriangles"/&
&g transform="translate(275,25)"&
&use xlink:href="#Red100" filter="url(#overFlood)" /&
&use xlink:href="#Red50" filter="url(#overFlood)" /&
&text x="5" y="275"&over&/text&
&g transform="translate(400,25)"&
&use xlink:href="#Red100" filter="url(#inFlood)" /&
&use xlink:href="#Red50" filter="url(#inFlood)" /&
&text x="35" y="275"&in&/text&
&g transform="translate(525,25)"&
&use xlink:href="#Red100" filter="url(#outFlood)" /&
&use xlink:href="#Red50" filter="url(#outFlood)" /&
&text x="15" y="275"&out&/text&
&g transform="translate(650,25)"&
&use xlink:href="#Red100" filter="url(#atopFlood)" /&
&use xlink:href="#Red50" filter="url(#atopFlood)" /&
&text x="10" y="275"&atop&/text&
&g transform="translate(775,25)"&
&use xlink:href="#Red100" filter="url(#xorFlood)" /&
&use xlink:href="#Red50" filter="url(#xorFlood)" /&
&text x="15" y="275"&xor&/text&
&g transform="translate(900,25)"&
&use xlink:href="#Red100" filter="url(#arithmeticFlood)" /&
&use xlink:href="#Red50" filter="url(#arithmeticFlood)" /&
&text x="-25" y="275"&arithmetic&/text&
&g transform="translate(0,325)" enable-background="new"&
&desc&Render the examples using the filters that do not obliterate
the background, thus sometimes causing the background to continue
to appear in some cases, and in other cases the background
image blends into itself ("double-counting").&/desc&
&text x="15" y="75"&opacity 1.0&/text&
&text x="15" y="115" font-size="27"&(without feFlood)&/text&
&text x="15" y="200"&opacity 0.5&/text&
&text x="15" y="240" font-size="27"&(without feFlood)&/text&
&use xlink:href="#BlueTriangles"/&
&g transform="translate(275,25)"&
&use xlink:href="#Red100" filter="url(#overNoFlood)" /&
&use xlink:href="#Red50" filter="url(#overNoFlood)" /&
&text x="5" y="275"&over&/text&
&g transform="translate(400,25)"&
&use xlink:href="#Red100" filter="url(#inNoFlood)" /&
&use xlink:href="#Red50" filter="url(#inNoFlood)" /&
&text x="35" y="275"&in&/text&
&g transform="translate(525,25)"&
&use xlink:href="#Red100" filter="url(#outNoFlood)" /&
&use xlink:href="#Red50" filter="url(#outNoFlood)" /&
&text x="15" y="275"&out&/text&
&g transform="translate(650,25)"&
&use xlink:href="#Red100" filter="url(#atopNoFlood)" /&
&use xlink:href="#Red50" filter="url(#atopNoFlood)" /&
&text x="10" y="275"&atop&/text&
&g transform="translate(775,25)"&
&use xlink:href="#Red100" filter="url(#xorNoFlood)" /&
&use xlink:href="#Red50" filter="url(#xorNoFlood)" /&
&text x="15" y="275"&xor&/text&
&g transform="translate(900,25)"&
&use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /&
&use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /&
&text x="-25" y="275"&arithmetic&/text&
&/svg&Example feComposite
15.13 Filter primitive ‘feConvolveMatrix’
feConvolveMatrix applies a matrix convolution filter effect.
A convolution combines pixels in the input image with
neighboring pixels to produce a resulting image. A wide variety
of imaging operations can be achieved through convolutions,
including blurring, edge detection, sharpening, embossing and
A matrix convolution is based on an n-by-m matrix (the
convolution kernel) which describes how a given pixel value in
the input image is combined with its neighboring pixel values
to produce a resulting pixel value. Each result pixel is
determined by applying the kernel matrix to the corresponding
source pixel and its neighboring pixels. The basic convolution
formula which is applied to each color value for a given pixel
COLORX,Y = (
I=0 to [-1] {
J=0 to [-1] {
X-+J, Y-+I *
* ALPHAX,Y
where "orderX" and "orderY" represent the X and Y values for
attribute, "targetX"
represents the value of the
attribute, "targetY"
represents the value of the
attribute, "kernelMatrix"
represents the value of the
attribute,
"divisor" represents the value of the
attribute, and "bias"
represents the value of the
attribute.
Note in the above formulas that the values in the kernel
matrix are applied such that the kernel matrix is rotated 180
degrees relative to the source and destination images in order
to match convolution theory as described in many computer
graphics textbooks.
To illustrate, suppose you have a input image which is 5
pixels by 5 pixels, whose color values for one of the color}