Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
Filter effects are a way of processing an element's rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image.
Although originally designed for use in SVG, filter effects are a set a
set of operations to apply on an image buffer and therefore can be applied
to nearly any presentational environment, including CSS. They are
triggered by a style instruction (the ‘filter
’ property). This specification
describes filters in a manner that allows them to be used in content
styled by CSS, such as HTML and SVG. It also defines a CSS property value
function that produces a CSS <image> value.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
The (archived) public mailing list public-fx@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “filter-effects” in the subject, preferably like this: “[filter-effects] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity) and the SVG Working Group (part of the Graphics Activity).
This document was produced by groups operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures (CSS) and a public list of any patent disclosures (SVG) made in connection with the deliverables of each group; these pages also include instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This is the first public Working draft of the Filter Effects specification.
filter
’ property
filter-margin-top
’, ‘filter-margin-bottom
’, ‘filter-margin-left
’, ‘filter-margin-right
’, and ‘filter-margin
’ properties
color-interpolation-filters
’
property
filter
’
element
feBlend
’
feColorMatrix
’
feComponentTransfer
’
feComposite
’
feConvolveMatrix
’
feDiffuseLighting
’
feDisplacementMap
’
feFlood
’
feGaussianBlur
’
feUnsharpMask
’
feImage
’
feMerge
’
feMorphology
’
feOffset
’
feSpecularLighting
’
feTile
’
feTurbulence
’
feDropShadow
’
feDiffuseSpecular
’
feCustom
’
filter
’
element
A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output. The output image is either rendered into the document instead of the original element, used as an input image to another filter effect, or provided as a CSS image value.
A simple example of a filter effect is a "flood". It takes no image inputs but has a parameter defining a color. The effect produces an output image that is completely filled with the given color. A slightly more complex example is an "inversion" which takes a single image input (typically an image of the element as it would normally be rendered into its parent) and adjusts each pixel such that they have the opposite color values.
Filter effects are exposed with three levels of complexity:
The following shows an example of a filter effect.
Example filters01 - introducing filter effects.
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:
1 2 3 4 5 6 |
<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"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter> |
The following pictures show the intermediate image results from each of the six filter elements:
|
|
|
| |||
|
|
|
feGaussianBlur
’ takes input SourceAlpha, 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.
feOffset
’
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.
feSpecularLighting
’, 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".
feComposite
’ 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.
feComposite
’ composites the result of the
specular lighting with the original source graphic.
feMerge
’
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.
Each section of this document is normative unless otherwise specified.
This document contains explicit conformance criteria that overlap with some RelaxNG definitions in requirements. If there is any conflict between the two, the explicit conformance criteria are the definitive reference.
Note that even though this specification references parts of SVG 1.1 [SVG11] it does not require an SVG 1.1 implementation.
Add link to conformance classes here.
When used in this specification, terms have the meanings assigned in this section.
The null filter output is all transparent black pixels. If applied to an element it means that the element (and children if any) becomes invisible. Note that it does not affect event processing.
feFuncR
’, ‘feFuncG
’, ‘feFuncB
’, ‘feFuncA
’
elements, that define the transfer function for the ‘feComponentTransfer
’ filter
primitive.
The union of all border boxes for the element that has an associated
CSS layout box and is not in the http://www.w3.org/2000/svg
namespace and it's descendant elements. Or the object bounding box [SVG11], if the
element does not have an associated CSS layout box and is in the
http://www.w3.org/2000/svg
namespace (See getBoundingClientRect
[CSSOM]]).
In general, a coordinate system defines locations and distances on the current canvas. The current local coordinate system (also user coordinate system) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas [CSS3-TRANSFORMS].
For elements that have an associated CSS layout box, the current user coordinate system has its origin at the top-left corner of the bounding client rect and one unit equals one CSS pixel. The viewport for resolving percentage values is defined by the width and height of the bounding client rect.
If the element does not have an associated CSS layout box and is in
the http://www.w3.org/2000/svg
namespace, the current local
coordinate system has its origin at the top-left corner of the element's
nearest viewport.
The set of elements that control the output of a ‘filter
’ element, particularly: ‘feSpotLight
’, ‘feBlend
’, ‘feColorMatrix
’, ‘feComponentTransfer
’, ‘feComposite
’, ‘feConvolveMatrix
’, ‘feDiffuseLighting
’, ‘feDisplacementMap
’, ‘feFlood
’, ‘feGaussianBlur
’, ‘feImage
’, ‘feMerge
’, ‘feMorphology
’, ‘feOffset
’,
‘feSpecularLighting
’, ‘feTile
’, ‘feTurbulence
’, ‘feDropShadow
’, ‘feDiffuseSpecular
’, ‘feUnsharpMask
’, ‘feCustom
’.
The following elements are light sources: ‘feDistantLight
’, ‘fePointLight
’, ‘feSpotLight
’.
x
’, ‘y
’, ‘width
’ and ‘height
’ as filter primitive attributes.
filter
’ property The description of the ‘filter
’ property is as follows:
Name: | filter |
Value: | none | <filter-function> [ <filter-function> ]* |
---|---|
Initial: | none |
Applies to: | All elements In SVG 1.1 it applies only to "container elements (except ‘mask’) and graphics elements" |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
If the value of the ‘filter
’ property is ‘none
’ then there is no filter effect applied.
Otherwise, the list of functions (described below) are applied in order.
The application of the ‘filter
’ property to an element formatted with
the CSS box model establishes a pseudo-stacking-context the same way that
CSS ‘opacity
’ does, and all the element's
descendants are rendered together as a group with the filter effect
applied to the group as a whole.
The ‘filter
’
property has no effect on the geometry of the target element's CSS boxes,
even though ‘filter
’
can cause painting outside of an element's border box.
The compositing model follows the SVG compositing
model [SVG11]:
first any filter effect is applied, then any clipping, masking and
opacity. These effects all apply after any other CSS effects such as
‘border
’. As per SVG, the application of
‘filter
’ has no
effect on hit-testing.
The CSS WG wants to look into how to apply the filter to certain parts of an object (background, border) instead of just the whole group with descendants.
filter-margin-top
’, ‘filter-margin-bottom
’, ‘filter-margin-left
’, ‘filter-margin-right
’, and ‘filter-margin
’
properties The filter-margin properties define the filter effect region for the filter functions ‘custom()
’. If the filter property references a ‘filter
’ element, then the filter effect region
defined by the element takes precedence over the ‘filter-margin
’
property.
On a regular ‘filter
’ element, the ‘x
’,
‘y
’, ‘width
’ and ‘height
’ attributes define the filter effects region.
The following sections describe the ‘filter-margin-top
’, ‘filter-margin-left
’, ‘filter-margin-bottom
’, ‘filter-margin-right
’ properties.
The filter-margin properties are a shorthand mechanism for defining a filter region equivalent to:
<filter filterUnits="objectBoundingBox" x="fx(targetBox, [filter-margin-left])" y="fy(targetBox, [filter-margin-top])" width="fw(targetBox, [filter-margin-left], [filter-margin-right])" height="fh(targetBox, [filter-margin-top], [filter-margin-bottom])"> <!-- filter primitives for the filter function --> </filter>
Where:
targetBox
is the bounding client rect
fx(box, left) = - (left / box.width)
fy(box, top) = - (top / box.height)
fw(box, left, right) = ((box.width + left + right) /
box.width)
fh(box, top, bottom) = ((box.height + top + bottom) /
box.height)
Margin properties specify the width of the filter region of a box. The ‘filter-margin
’
shorthand property sets the margin for all four sides while the other
margin properties only set their respective side. These properties apply
to all elements (which is different from the regular margin properties
where vertical margins will not have any effect on non-replaced inline
elements).
The ‘filter-margin-top
’, ‘filter-margin-bottom
’, ‘filter-margin-left
’, ‘filter-margin-right
’ can take the same values
as the ‘margin-top
’, ‘margin-bottom
’, ‘margin-left
’ and ‘margin-right
’ properties, respectively. In
addition, they can take the ‘auto
’ value which
is also their default value.
The ‘filter-margin
’ property can take the same
values as the ‘margin
’ property and is a
shorthand for setting ‘filter-margin-top
’, ‘filter-margin-right
’, ‘filter-margin-bottom
’ and ‘filter-margin-left
’ at the same place in the
stylesheet.
The following figure illustrates how the various filter-margin properties affect the filter region.
The filter region
The blue border delimit the filter region. The margins are represented by:
filter-margin-left
’
filter-margin-right
’
filter-margin-top
’
filter-margin-bottom
’
Name: | filter-margin-top, filter-margin-right, filter-margin-bottom, filter-margin-left |
---|---|
Value: | <margin-width> | auto
|
Initial | auto |
Applies to: | all elements |
Inherited: | no |
Percentages: | refer to the dimension of the bounding client rect |
Media: | visual |
Computed value: | the percentage as specified or the absolute length. A value of auto computes to 10% of the bounding client rect |
Name: | filter-margin |
---|---|
Value: | <margin-width>{1,4} | auto
|
Initial | auto |
Applies to: | all elements |
Inherited: | no |
Percentages: | refer to the dimension of the bounding client rect |
Media: | visual |
Computed value: | the percentage as specified or the absolute length. A value of auto computes to 10% of the bounding client rect |
color-interpolation-filters
’ property The description of the ‘color-interpolation-filters
’ property is as
follows:
Name: | color-interpolation-filters |
---|---|
Value: | auto | sRGB | linearRGB |
Initial: | linearRGB |
Applies to: | filter primitives |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
auto
’
sRGB or
’linearRGB'‘ spaces for
filter effects color operations. This option indicates that the author
doesn
’t require that color operations occur in a particular
color space.
sRGB
’
linearRGB
’
The ‘color-interpolation-filters
’ property
specifies the color space for imaging operations performed via filter
effects.
Note that ‘color-interpolation-filters
’ has a different
initial value than ‘color-interpolation
’.
‘color-interpolation-filters
’ has an initial
value of ‘linearRGB
’, where as ‘color-interpolation
’ has an initial value of
‘sRGB
’. Thus, in the default case, filter
effects operations occur in the linearRGB color space, whereas all other
color interpolations occur by default in the sRGB color space.
At the moment it is unspecified how the ‘color-interpolation-filters
’ property applies
to short hand filters. The FXTF discussed to apply it to the whole filter
chain.
The value of the ‘filter
’ property is a list of <filter-function>s applied in the order
provided. The individual filter functions are separated by whitespace. The
set of allowed filter functions is given below.
filter
’ element that defines the filter
effect. For example ‘url(commonfilters.xml#large-blur)
’. If the IRI
references a non-existent object or the referenced object is not a ‘filter
’ element, then the null filter will be applied instead.
inset
’
keyword is not allowed. The markup equivalent of this function is given below.
<vertex-shader>
| none | <uri>
|
<fragment-shader>
| none | <uri> | mix(<uri> [ <blend-mode> ||
<alpha-compositing> ]?)
|
<vertex-mesh>
| <integer>{0,2} <box>? [ detached | attached
]?
|
<box>
| filter-box | border-box | padding-box | content-box
|
<params>
| See the ‘feCustom ’‘s
|
<vertex-shader>
and
<fragment-shader>
parameters reference the shader
sources. The <vertex-mesh>
parameter specifies the
granularity of the vertex mesh. The <params>
specify
the parameters and corresponding passed to the shader programs. The
markup equivalent is given below.It might be clearer to name the custom()
function the shader()
function instead and introduce an
feCustomShader
filter primitive instead of ’feCustom'.
The above list is a collection of effects that can be easily defined in terms of SVG filters. However, there are many more interesting effects that can be considered for inclusion. If accepted, there will have to be equivalent XML elements for the effect. Effects considered include:
The first function in the list takes the element (SourceGraphic) as the input image. Subsequent
operations take the output from the previous function as the input image.
The exception is the function that references a ‘filter
’
element, which can specify an alternate input, but still uses the previous
output as its SourceGraphic.
filter
’ elementName: | filter |
---|---|
Categories: | None. |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFilterElement |
The description of the ‘filter
’ element
follows:
Attribute definitions:
filter
’
element is referenced (i.e., the user coordinate system for the element
referencing the ‘filter
’ element via a ‘filter
’ property).primitiveUnits
’ computation takes place.
primitiveUnits
’ is userSpaceOnUse.filter
’
element within the current SVG
document fragment. Any attributes which are defined on the
referenced ‘filter
’ 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 href
attribute), then this element inherits the filter nodes defined from the
referenced ‘filter
’ element. Inheritance can be indirect
to an arbitrary level; thus, if the referenced ‘filter
’
element inherits attributes or its filter node specification due to its
own href attribute, then the current
element can inherit those attributes or filter node specifications.
Properties inherit into the ‘filter
’ element
from its ancestors; properties do not inherit from the element
referencing the ‘filter
’ element.
‘filter
’ elements are never rendered directly;
their only usage is as something that can be referenced using the ‘filter
’ property. The ‘display
’ property does not apply to the ‘filter
’ element; thus, ‘filter
’
elements are not directly rendered even if the ‘display
’ property is set to a value other than
none, and ‘filter
’
elements are available for referencing even when the ‘display
’ property on the ‘filter
’ element
or any of its ancestors is set to none.
A ‘filter
’ 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 ‘filter
’ element has the following attributes
which work together to define the filter effects region:
filterUnits
’
Defines the coordinate system for attributes ‘x
’,
‘y
’, ‘width
’, ‘height
’.
If filterUnits="userSpaceOnUse", ‘x
’, ‘y
’,
‘width
’, ‘height
’ represent values in the current user
coordinate system in place at the time when the ‘filter
’
element is referenced (i.e., the user coordinate system for the element
referencing the ‘filter
’ element via a ‘filter
’ property).
If filterUnits="objectBoundingBox",
then ‘x
’, ‘y
’,
‘width
’, ‘height
’ represent fractions or percentages
of the bounding box on the referencing element (see object
bounding box units).
The lacuna
value for ‘filterUnits
’ is objectBoundingBox.
Animatable: yes.
x
’,
‘y
’, ‘width
’, ‘height
’
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 ‘filterRes
’ attribute of the filter.
The coordinate system for these attributes depends on the value for
attribute ‘filterUnits
’.
The bounds of this rectangle act as a hard clipping region for each
filter primitive included with
a given ‘filter
’ element; thus, if the effect of a
given filter primitive would extend beyond the bounds of the rectangle
(this sometimes happens when using a ‘feGaussianBlur
’ filter primitive with a very
large ‘stdDeviation
’), parts of the effect will get
clipped.
The lacuna
value for ‘x
’
and ‘y
’ is -10%.
The lacuna
value for ‘width
’ and ‘height
’ is 120%.
Negative or zero values for ‘width
’ or ‘height
’ disable rendering of the element
which referenced the filter.
Animatable: yes.
filterRes
’
Defines 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.
Non-integer values are truncated, i.e rounded to the closest integer value towards zero.
Negative or zero values disable rendering of the element which referenced the filter.
Animatable: yes.
Note that both of the two possible value for ‘filterUnits
’ (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 applied.
Sometimes implementers can achieve faster
performance when the filter region can be mapped directly to device
pixels; thus, for best performance on display devices, it is suggested
that authors define their region such that the user agent can align the filter region pixel-for-pixel with the
background. In particular, for best filter effects performance, avoid
rotating or skewing the user coordinate system. Explicit values for
attribute ‘filterRes
’ can either help or harm
performance. If ‘filterRes
’ is smaller than the automatic
(i.e., default) filter resolution, then filter effect might have faster
performance (usually at the expense of quality). If ‘filterRes
’ is larger than the automatic (i.e.,
default) filter resolution, then filter effects performance will usually
be slower.
Two possible pseudo input images for filter
effects are BackgroundImage and BackgroundAlpha, which each represent an image
snapshot of the canvas under the filter
region at the time that the ‘filter
’
element is invoked. BackgroundImage
represents both the color values and alpha channel of the canvas (i.e.,
RGBA pixel values), whereas BackgroundAlpha
represents only the alpha channel.
Implementations will often need to maintain supplemental background image buffers in order to support the BackgroundImage and BackgroundAlpha 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, content must explicitly indicate to the user agent that the document needs access to the background image before BackgroundImage and BackgroundAlpha pseudo input images can be used.
A background image is what's been rendered before the current element. The host language is responsible for defining what rendered before in this context means. For SVG, that uses the painter's algorithm, rendered before means all of the prior elements in pre order traversal previous to the element to which the filter is applied.
The property which enables access to the background image is ‘enable-background
’:
Name: | enable-background |
---|---|
Value: | accumulate | new |
Initial: | accumulate |
Applies to: | Typically elements that can contain renderable elements. language is responsible for defining the applicable set of elements. For SVG: container elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | no |
‘enable-background
’ is only applicable to container
elements and specifies how the SVG
user agent manages the accumulation of the background image.
new
accumulate (the initial/default value)
enable-background: new
’, then all renderable child
elements of the current container
element element are rendered both onto the parent container
element element's background image canvas and onto the target device.
If a filter effect specifies either the BackgroundImage or the BackgroundAlpha pseudo input images and no
ancestor container
element element 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 request.
This section only applies to the SVG definition of enable-background.
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 ‘filter
’
referenced by E is defined as follows:
enable-background
’ property has the value
‘new
’.
Note that if there is no such ancestor element, then the outermost element An will be chosen.
<?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 1350 270" 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> <defs> <filter id="ShiftBGAndBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> <desc> This filter discards the SourceGraphic, if any, and just produces a result consisting of the BackgroundImage shifted down 125 units and then blurred. </desc> <feOffset in="BackgroundImage" dx="0" dy="125" /> <feGaussianBlur stdDeviation="8" /> </filter> <filter id="ShiftBGAndBlur_WithSourceGraphic" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> <desc> This filter takes the BackgroundImage, shifts it down 125 units, blurs it, and then renders the SourceGraphic on top of the shifted/blurred background. </desc> <feOffset in="BackgroundImage" dx="0" dy="125" /> <feGaussianBlur stdDeviation="8" result="blur" /> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <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"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <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> <g filter="url(#ShiftBGAndBlur)"/> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <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"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <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)"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> <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)"/> </g> <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
The example above contains five parts, described as follows:
g
’ element.
Inside the ‘g
’ 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.
g
’
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.
g
’ element. The accumulated background at
the time the filter is applied contains only the red rectangle. Because
the children of the inner ‘g
’ (i.e., the circle and triangle) are not
part of the inner ‘g
’ element's background and because
ShiftBGAndBlur ignores SourceGraphic, the children of the inner ‘g
’ do not
appear in the result.
polygon
’ 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 ‘opacity
’ property
on the inner ‘g
’ 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 ‘opacity
’
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.
This section describes the various filter primitives 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
’, ‘feCustom
’ 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 ‘color-interpolation-filters
’ on the given filter primitive. A different
property, ‘color-interpolation
’ determines the color
space for other color operations. Because these two properties have
different initial values (‘color-interpolation-filters
’ has an initial
value of linearRGB whereas ‘color-interpolation
’ has an 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 ‘color-interpolation
’ to ‘linearRGB
’ or ‘color-interpolation-filters
’ to ‘sRGB
’ on particular elements. Note that the examples
below do not explicitly set either ‘color-interpolation
’ or ‘color-interpolation-filters
’, so the initial
values for these properties apply to the examples.
Sometimes filter primitives result in
undefined pixels. For example, filter primitive ‘feOffset
’ 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.
The following attributes are available for most of the filter primitives:
Attribute definitions:
The minimum x coordinate for the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
The lacuna value for x is 0%.
Animatable: yes.
The minimum y coordinate for the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
The lacuna value for y is 0%.
Animatable: yes.
The width of the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
A negative or zero value disables the effect of the given filter primitive (i.e., the result is a transparent black image).
The lacuna value for width is 100%.
Animatable: yes.
The height of the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
A negative or zero value disables the effect of the given filter primitive (i.e., the result is a transparent black image).
The lacuna value for height is 100%.
Animatable: yes.
Assigned name for this filter
primitive. If supplied, then graphics that result from processing
this filter primitive can be
referenced by an ‘in
’ attribute on a subsequent filter
primitive within the same ‘filter
’
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 ‘in
’ attribute.
Can <filter-primitive-reference> be defined as <author-ident> as in CSS Values and Units?
Note that a <filter-primitive-reference>
is not an XML ID; instead, a <filter-primitive-reference>
is only meaningful within a given ‘filter
’
element and thus have only local scope. It is legal for the same <filter-primitive-reference>
to appear multiple times within the same ‘filter
’
element. When referenced, the <filter-primitive-reference>
will use the closest preceding filter primitive with the given
result.
Animatable: yes.
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
‘result
’ attribute value within the same ‘filter
’ element. If no value is provided
and this is the first filter
primitive, then this filter
primitive will use SourceGraphic 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 result appears
multiple times within a given ‘filter
’
element, then a reference to that result will use the closest preceding
filter primitive with the
given value for attribute ‘result
’. Forward references to results are
not allowed, and will be treated as if no result was specified.
Definitions for the six keywords:
This keyword represents the graphics elements that were the
original input into the ‘filter
’
element. For raster effects filter primitives, the
graphics elements 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.)
This keyword represents the graphics elements that were the
original input into the ‘filter
’
element. SourceAlpha has all of the same
rules as SourceGraphic 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 SourceGraphic.
If this option is used, then some implementations might need to rasterize the graphics elements in order to extract the alpha channel.
This keyword represents an image snapshot of the canvas under the
filter region at the time that the
‘filter
’ element was invoked. See accessing the background image.
Same as BackgroundImage except only the alpha channel is used. See SourceAlpha and accessing the background image.
This keyword represents the target element rendered filled.
For svg this keyword represents the value of the ‘fill
’ property on the target element for
the filter effect.
For non-SVG cases FillPaint generates a transparent black image.
Consider whether this should be e.g the bounding client rect filled with the current color, or if
it makes sense to use the ‘fill
’
property for this case too.
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.
This keyword represents the target element rendered stroked.
For svg this keyword represents the value of the ‘stroke
’ on the target element for the
filter effect.
For non-SVG cases StrokePaint generates a transparent black image.
Consider whether this should be e.g the bounding client rect filled with the one of the border
colors, or if it makes sense to use the ‘stroke
’ property for this case too.
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.
Animatable: yes.
Define filter primitive subregion for shorthands. E.g. the outout bounds of the previous filter functions, extended by affected area of current filter function.
All filter primitives have
attributes ‘x
’, ‘y
’,
‘width
’ and ‘height
’ which together identify a subregion
which restricts calculation and rendering of the given filter primitive. The ‘x
’, ‘y
’,
‘width
’ and ‘height
’ 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
’primitiveUnits'
on the ‘filter
’ element.
‘x
’, ‘y
’,
‘width
’ and ‘height
’ 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 ‘feImage
’ or ‘feTurbulence
’), or one or more of the
referenced nodes is a standard input (one of SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint or StrokePaint), or for ‘feTile
’ (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 filter region, thus making the default filter primitive subregion equal to
the filter region.
If the filter primitive subregion has a negative or zero width or height, the effect of the filter primitive is disabled.
The filter primitive subregion act as a hard clip clipping rectangle on both the filter primitive's input image(s) and the filter primitive result.
Consider making it possible to do select between clip-input, clip-output, clip-both or none.
All intermediate offscreens are defined to not exceed the intersection of the filter primitive subregion with the filter region. The filter region and any of the filter primitive 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 filter region or the filter primitive subregions.
‘feTile
’ references a previous filter primitive
and then stitches the tiles together based on the filter primitive subregion of the
referenced filter primitive in order to fill its own filter primitive subregion.
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <defs> <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> <filter id="blend" primitiveUnits="objectBoundingBox"> <feBlend x="25%" y="25%" width="50%" height="50%" in2="SourceGraphic" mode="multiply"/> </filter> <filter id="merge" primitiveUnits="objectBoundingBox"> <feMerge x="25%" y="25%" width="50%" height="50%"> <feMergeNode in="SourceGraphic"/> <feMergeNode in="FillPaint"/> </feMerge> </filter> </defs> <g fill="none" stroke="blue" stroke-width="4"> <rect width="200" height="200"/> <line x2="200" y2="200"/> <line x1="200" y2="200"/> </g> <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"/> </g> <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/> </g> <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"/> </g> <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
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 filter primitive subregion. The filter output should be limited to the filter primitive subregion, so you should never see the circles themselves, just the rects that make up the filter primitive subregion.
feFlood
’ with
flood-opacity="75%" so the cross should be visible through the
green rect in the middle.
feMerge
’ 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.
feBlend
’ 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.
The following sections define the elements that define a light source, ‘feDistantLight
’, ‘fePointLight
’ and ‘feSpotLight
’, and property ‘lighting-color
’,
which defines the color of the light.
feDistantLight
’Name: | feDistantLight |
---|---|
Categories: | Light source element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEDistantLightElement |
Attribute definitions:
azimuth
’ is 0.elevation
’ is 0. The following diagram illustrates the angles which ‘azimuth
’ and ‘elevation
’ represent in an XYZ coordinate
system.
fePointLight
’Name: | fePointLight |
---|---|
Categories: | Light source element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEPointLightElement |
Attribute definitions:
primitiveUnits
’ on the ‘filter
’ element.x
’ is 0.primitiveUnits
’ on the ‘filter
’
element.y
’ is 0.primitiveUnits
’ on the ‘filter
’
element, assuming that, in the initial
coordinate system , the positive Z-axis comes out towards the person
viewing the content and assuming that one unit along the Z-axis equals
one
unit in X and Y.z
’ is 0.feSpotLight
’Name: | feSpotLight |
---|---|
Categories: | Light source element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFESpotLightElement |
Attribute definitions:
primitiveUnits
’ on the ‘filter
’
element.x
’ is 0.primitiveUnits
’ on the ‘filter
’
element.y
’ is 0.primitiveUnits
’ on the ‘filter
’
element, assuming that, in the initial
coordinate system , the positive Z-axis comes out towards the person
viewing the content and assuming that one unit along the Z-axis equals
one
unit in X and Y.z
’ is 0.primitiveUnits
’ on the ‘filter
’
element of the point at which the light source is pointing.pointsAtX
’ is 0.primitiveUnits
’ on the ‘filter
’
element of the point at which the light source is pointing.pointsAtY
’ is 0.primitiveUnits
’ on the ‘filter
’
element of the point at which the light source is pointing, assuming
that, in the initial
coordinate system, the positive Z-axis comes out towards the person
viewing the content and assuming that one unit along the Z-axis equals
one unit in X and Y.pointsAtZ
’ is 0.specularExponent
’ is 1.lighting-color
’
property The ‘lighting-color
’ property defines the color of
the light source for filter
primitives ‘feDiffuseLighting
’ and ‘feSpecularLighting
’.
Name: | lighting-color |
---|---|
Value: | currentColor | <color> <icccolor>? |
Initial: | white |
Applies to: | ‘feDiffuseLighting ’ and ‘feSpecularLighting ’ elements
|
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
feBlend
’Name: | feBlend |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEBlendElement |
This filter composites two objects together using commonly used imaging software blending modes. It performs a pixel-wise combination of two input images.
Attribute definitions:
mode
’ is normal.For all feBlend modes, the result opacity is computed as follows:
qr = 1 - (1-qa)*(1-qb)
For the compositing formulas below, the following definitions apply:
image A = in image B = in2 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 Mode | Formula for computing result color |
normal | cr = (1 - qa) * cb + ca |
multiply | cr = (1-qa)*cb + (1-qb)*ca + ca*cb |
screen | cr = cb + ca - ca * cb |
darken | cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
lighten | cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb) |
The ‘normal
’ blend mode is equivalent to operator="over" on the ‘feComposite
’ filter primitive, matches the
blending method used by ‘feMerge
’ and
matches the simple
alpha compositing technique used in SVG for all compositing outside of
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="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> <defs> <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> <filter id="Multiply"> <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Screen"> <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Darken"> <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Lighten"> <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/> </filter> </defs> <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> </g> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feColorMatrix
’Name: | feColorMatrix |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEColorMatrixElement |
This filter applies a matrix transformation:
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.
Attribute definitions:
type
’ is matrix. type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
where the terms a00, a01, etc. are calculated as follows:
Thus, the upper left term of the hue matrix turns out to be:
type
’. 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.<?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> <defs> <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> <filter id="Saturate40" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/> </filter> <filter id="HueRotate90" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/> </filter> <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" /> </filter> </defs> <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> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feComponentTransfer
’Name: | feComponentTransfer |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEComponentTransferElement |
This filter primitive performs component-wise remapping of data as follows:
R' = feFuncR( R ) G' = feFuncG( G ) B' = feFuncB( B ) A' = feFuncA( 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 if ‘feFuncA
’ is the identity transform and all
alpha values on the source graphic are set to 1.)
The child elements of a ‘feComponentTransfer
’ element specify the transfer functions for the four
channels:
feFuncR
’ — transfer function for the red
component of the input graphic
feFuncG
’ — transfer function for the green
component of the input graphic
feFuncB
’ — transfer function for the blue
component of the input graphic
feFuncA
’ — transfer function for the alpha
component of the input graphic
The following rules apply to the processing of the ‘feComponentTransfer
’ element:
feComponentTransfer
’ must be processed as if
those transfer function
elements were specified with their ‘type
’ attributes set to ‘identity
’.
Name: | feFuncR |
---|---|
Categories: | Transfer function element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEFuncRElement |
Name: | feFuncG |
---|---|
Categories: | Transfer function element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEFuncGElement |
Name: | feFuncB |
---|---|
Categories: | Transfer function element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEFuncBElement |
Name: | feFuncA |
---|---|
Categories: | Transfer function element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEFuncAElement |
The attributes below are the transfer function element attributes, which apply to the transfer function elements.
Attribute definitions:
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., ‘feFuncR
’), C' is the remapped
component; both in the closed interval [0,1].
C' = C
tableValues
’. 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:
C' = vn.
tableValues
’, 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 formula:
For a value C < 1
find k
such
that:
k/n <= C < (k+1)/n
For a value C
pick a k
such that:
k/N <= C < (k+1)/N
The result C'
is given by:
C' = vk
If C = 1
then:
C' = vn-1.
slope
’ is 1.intercept
’ is 0.amplitude
’ is 1.exponent
’ is 1.offset
’ is 0.<?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> <defs> <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> <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> <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> <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> </filter> </defs> <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> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feComposite
’Name: | feComposite |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFECompositeElement |
This filter performs the combination of the two input images pixel-wise in image space using one of the Porter-Duff [PORTERDUFF] compositing operations: over, in, atop, out, xor [SVG-COMPOSITING]. 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 ‘feDiffuseLighting
’ and ‘feSpecularLighting
’ filters with texture
data. It is also useful for implementing dissolve. If the
arithmetic operation is chosen, each result pixel is computed
using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4where:
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 filter primitive subregion.
Attribute definitions:
operator
’ is over. k1
’
is 0. k2
’
is 0. k3
’
is 0. k4
’
is 0. <?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 1100 650" 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> <defs> <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> <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> <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> <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> <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> <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> <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> </filter> <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> </filter> <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> </filter> <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> </filter> <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> </filter> <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"/> </filter> <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> <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"/> </g> </defs> <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> <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> <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> <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> <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> <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> </g> <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> <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> <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> <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> <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> <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> </g> </g> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feConvolveMatrix
’Name: | feConvolveMatrix |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEConvolveMatrixElement |
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 beveling.
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 is:
COLORX,Y = (
SUM I=0 to [‘orderY
’-1] {
SUM J=0 to [‘orderX
’-1] {
SOURCE X-‘targetX
’+J, Y-‘targetY
’+I * ‘kernelMatrix
’‘orderX
’-J-1, ‘orderY
’-I-1
}
}
) / ‘divisor
’ + ‘bias
’ * ALPHAX,Y
where "orderX" and "orderY" represent the X and Y values for the ‘order
’ attribute, "targetX" represents the
value of the ‘targetX
’ attribute, "targetY" represents
the value of the ‘targetY
’ attribute, "kernelMatrix"
represents the value of the ‘kernelMatrix
’ attribute, "divisor"
represents the value of the ‘divisor
’ attribute, and "bias" represents
the value of the ‘bias
’ 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 channels are as follows:
0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255
and you define a 3-by-3 convolution kernel as follows:
1 2 3 4 5 6 7 8 9
Let's focus on the color value at the second row and second column
of the image (source pixel value is 120). Assuming the simplest case
(where the input image's pixel grid aligns perfectly with the kernel's
pixel grid) and assuming default values for attributes ‘divisor
’, ‘targetX
’ and ‘targetY
’, then resulting color value will
be:
(9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
Because they operate on pixels, matrix convolutions are inherently
resolution-dependent. To make ‘feConvolveMatrix
’ produce
resolution-independent results, an explicit value should be provided
for either the ‘filterRes
’ attribute on the ‘filter
’ element and/or attribute ‘kernelUnitLength
’.
‘kernelUnitLength
’, in combination with the
other attributes, defines an implicit pixel grid in the filter effects
coordinate system (i.e., the coordinate system established by the ‘primitiveUnits
’ attribute). If the pixel
grid established by ‘kernelUnitLength
’ is not scaled to match
the pixel grid established by attribute ‘filterRes
’ (implicitly or explicitly),
then the input image will be temporarily rescaled to match its pixels
with ‘kernelUnitLength
’. The convolution happens
on the resampled image. After applying the convolution, the image is
resampled back to the original resolution.
When the image must be resampled to match the coordinate system
defined by ‘kernelUnitLength
’ prior to convolution, or
resampled to match the device coordinate system after convolution, it
is recommended that high quality viewers make use of appropriate
interpolation techniques, for example bilinear or bicubic. Depending
on the speed of the available interpolents, this choice may be
affected by the ‘image-rendering
’ property setting. Note
that implementations might choose approaches that minimize or
eliminate resampling when not necessary to produce proper results,
such as when the document is zoomed out such that ‘kernelUnitLength
’ is considerably smaller
than a device pixel.
Attribute definitions:
kernelMatrix
’. The values provided must
be <integer>
s greater than zero. Values that are not integers will be truncated,
i.e. rounded to the closest integer value towards zero. The first
number, <orderX>, indicates the number of columns in the
matrix. The second number, <orderY>, indicates the number of
rows in the matrix. If <orderY> is not provided, it defaults
to <orderX>.order
’ is 3. divisor
’ to yield the final destination
color value. A divisor that is the sum of all the matrix values
tends to have an evening effect on the overall color intensity of
the result. If the specified divisor is zero then the default value
will be used instead. The lacuna
value is the sum of all values in kernelMatrix, with the
exception that if the sum is zero, then the divisor is set to 1.divisor
’, the ‘bias
’ attribute is added to each
component. One application of ‘bias
’ is when it is desirable to have
.5 gray value be the zero response of
the filter. The bias property shifts the range of the filter. This
allows representation of values that would otherwise be clamped to 0
or 1.bias
’ is 0.Determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
"duplicate" indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
Original N-by-M image, where m=M-1 and n=N-1: 11 12 ... 1m 1M 21 22 ... 2m 2M .. .. ... .. .. n1 n2 ... nm nM N1 N2 ... Nm NM Extended by two pixels using "duplicate": 11 11 11 12 ... 1m 1M 1M 1M 11 11 11 12 ... 1m 1M 1M 1M 11 11 11 12 ... 1m 1M 1M 1M 21 21 21 22 ... 2m 2M 2M 2M .. .. .. .. ... .. .. .. .. n1 n1 n1 n2 ... nm nM nM nM N1 N1 N1 N2 ... Nm NM NM NM N1 N1 N1 N2 ... Nm NM NM NM N1 N1 N1 N2 ... Nm NM NM NM
"wrap" indicates that the input image is extended by taking the color values from the opposite edge of the image.
Extended by two pixels using "wrap": nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22 .. .. .. .. ... .. .. .. .. nm nM n1 n2 ... nm nM n1 n2 Nm NM N1 N2 ... Nm NM N1 N2 1m 1M 11 12 ... 1m 1M 11 12 2m 2M 21 22 ... 2m 2M 21 22
The value none indicates that the input image is extended with pixel values of zero for R, G, B and A.
The lacuna
value for ‘edgeMode
’ is duplicate.
Animatable: yes.
primitiveUnits
’) between successive
columns and rows, respectively, in the ‘kernelMatrix
’. By specifying value(s)
for ‘kernelUnitLength
’, the kernel becomes
defined in a scalable, abstract coordinate system. If ‘kernelUnitLength
’ is not specified, the
default value is one pixel in the offscreen bitmap, which is a
pixel-based coordinate system, and thus potentially not scalable.
For some level of consistency across display media and user agents,
it is necessary that a value be provided for at least one of ‘filterRes
’ and ‘kernelUnitLength
’. In some
implementations, the most consistent results and the fastest
performance will be achieved if the pixel grid of the temporary
offscreen images aligns with the pixel grid of the kernel.ALPHAX,Y
of the convolution formula for a
given pixel is:
ALPHAX,Y = (
SUM I=0 to [‘orderY
’-1] {
SUM J=0 to [‘orderX
’-1] {
SOURCE X-‘targetX
’+J, Y-‘targetY
’+I * ‘kernelMatrix
’‘orderX
’-J-1, ‘orderY
’-I-1
}
}
) / ‘divisor
’ + ‘bias
’
ALPHAX,Y
of the convolution formula for a
given pixel is:
ALPHAX,Y = SOURCEX,Y
The lacuna value for ‘preserveAlpha
’ is false.feDiffuseLighting
’Name: | feDiffuseLighting |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of descriptive elements and exactly one light source element, in any order. |
Attributes: | |
DOM Interfaces: | SVGFEDiffuseLightingElement |
This filter primitive lights an image using the alpha channel as a bump map. The resulting image is an RGBA opaque image based on the light color with alpha = 1.0 everywhere. The lighting calculation follows the standard diffuse component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map.
The light map produced by this filter primitive can be combined
with a texture image using the multiply term of the
arithmetic ‘feComposite
’ compositing method. Multiple
light sources can be simulated by adding several of these light maps
together before applying it to the texture image.
The formulas below make use of 3x3 filters. Because they operate on
pixels, such filters are inherently resolution-dependent. To make ‘feDiffuseLighting
’ produce
resolution-independent results, an explicit value should be provided
for either the ‘filterRes
’ attribute on the ‘filter
’ element and/or attribute ‘kernelUnitLength
’.
‘kernelUnitLength
’, in combination with the
other attributes, defines an implicit pixel grid in the filter effects
coordinate system (i.e., the coordinate system established by the ‘primitiveUnits
’ attribute). If the pixel
grid established by ‘kernelUnitLength
’ is not scaled to match
the pixel grid established by attribute ‘filterRes
’ (implicitly or explicitly),
then the input image will be temporarily rescaled to match its pixels
with ‘kernelUnitLength
’. The 3x3 filters are
applied to the resampled image. After applying the filter, the image
is resampled back to its original resolution.
When the image must be
resampled, it is recommended that high quality viewers make use of
appropriate interpolation techniques, for example bilinear or
bicubic. Depending on the speed of the available interpolents,
this choice may be affected by the ‘image-rendering
’ property setting. Note
that implementations might choose approaches that minimize or
eliminate resampling when not necessary to produce proper results,
such as when the document is zoomed out such that ‘kernelUnitLength
’ is considerably smaller
than a device pixel.
For the formulas that follow, the
Norm(Ax,Ay,Az)
function
is defined as:
Norm(Ax,Ay,Az) = sqrt(Ax^2+Ay^2+Az^2)
The resulting RGBA image is computed as follows:
Dr = kd * N.L *
Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0
where
N is a function of x and y and depends on the surface gradient as follows:
The surface described by the input alpha image I(x,y) is:
Z (x,y) = surfaceScale * I(x,y)
Surface normal is calculated using the Sobel gradient 3x3 filter. Different filter kernels are used depending on whether the given pixel is on the interior or an edge. For each case, the formula is:
Nx (x,y) = - surfaceScale *
FACTORx *
(Kx(0,0)*I(x-dx,y-dy) +
Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
Kx(0,1)*I(x-dx,y) +
Kx(1,1)*I(x,y) +
Kx(2,1)*I(x+dx,y) +
Kx(0,2)*I(x-dx,y+dy) +
Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y) = - surfaceScale * FACTORy *
(Ky(0,0)*I(x-dx,y-dy) +
Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
Ky(0,1)*I(x-dx,y) +
Ky(1,1)*I(x,y) +
Ky(2,1)*I(x+dx,y) +
Ky(0,2)*I(x-dx,y+dy) +
Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0
N = (Nx, Ny, Nz) /
Norm((Nx,Ny,Nz))
In these formulas, the dx
and dy
values
(e.g., I(x-dx,y-dy)
), represent deltas relative to a
given (x,y)
position for the purpose of estimating the
slope of the surface at that point. These deltas are determined by the
value (explicit or implicit) of attribute ‘kernelUnitLength
’.
Top/left corner: FACTORx=2/(3*dx) |
Top row: FACTORx=1/(3*dx) |
Top/right corner: FACTORx=2/(3*dx) |
Left column: FACTORx=1/(2*dx) |
Interior pixels: FACTORx=1/(4*dx) |
Right column: FACTORx=1/(2*dx) |
Bottom/left corner: FACTORx=2/(3*dx) |
Bottom row: FACTORx=1/(3*dx) |
Bottom/right corner: FACTORx=2/(3*dx) |
L, the unit vector from the image sample to the light, is calculated as follows:
For Infinite light sources it is constant:
Lx = cos(azimuth)*cos(elevation)
Ly = sin(azimuth)*cos(elevation)
Lz = sin(elevation)
For Point and spot lights it is a function of position:
Lx = Lightx - x
Ly = Lighty - y
Lz = Lightz - Z(x,y)
L = (Lx, Ly, Lz) /
Norm(Lx, Ly, Lz)
where Lightx, Lighty, and Lightz are the input light position.
Lr,Lg,Lb, the light color vector, is a function of position in the spot light case only:
Lr =
Lightr*pow((-L.S),specularExponent)
Lg = Lightg*pow((-L.S),specularExponent)
Lb = Lightb*pow((-L.S),specularExponent)
where S is the unit vector pointing from the light to the point (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:
Sx = pointsAtX -
Lightx
Sy = pointsAtY - Lighty
Sz = pointsAtZ - Lightz
S = (Sx, Sy, Sz) /
Norm(Sx, Sy, Sz)
If L.S is positive, no light is present. (Lr =
Lg = Lb = 0). If ‘limitingConeAngle
’ is specified, -L.S <
cos(limitingConeAngle) also indicates that no light is present.
Attribute definitions:
primitiveUnits
’) for dx
and
dy
, respectively, in the surface normal calculation
formulas. By specifying value(s) for kernelUnitLength, the kernel becomes defined
in a scalable, abstract coordinate system. If kernelUnitLength is not specified, the
dx
and dy
values should represent very
small deltas relative to a given (x,y)
position, which
might be implemented in some cases as one pixel in the intermediate
image offscreen bitmap, which is a pixel-based coordinate system,
and thus potentially not scalable. For some level of consistency
across display media and user agents, it is necessary that a value
be provided for at least one of ‘filterRes
’ and kernelUnitLength. Discussion of intermediate
images are in the Introduction and in
the description of attribute ‘filterRes
’. The light source is defined by one of the child elements ‘feDistantLight
’, ‘fePointLight
’ or ‘feSpotLight
’. The light color is specified
by property ‘lighting-color
’.
feDisplacementMap
’Name: | feDisplacementMap |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEDisplacementMapElement |
This filter primitive uses the pixels values from the image from ‘in2
’ to spatially displace the image from ‘in
’. This is the transformation to be
performed:
P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
where P(x,y) is the input image, ‘in
’, and P'(x,y) is the destination.
XC(x,y) and YC(x,y) are the component values of the channel designated
by the ‘xChannelSelector
’ and ‘yChannelSelector
’. For example, to use the
R component of ‘in2
’ to control displacement in x and the G
component of Image2 to control displacement in y, set ‘xChannelSelector
’ to "R" and ‘yChannelSelector
’ to "G".
The displacement map, ‘in2
’, defines the inverse of the mapping
performed.
The input image in is to remain premultiplied for this filter
primitive. The calculations using the pixel values from ‘in2
’ are performed using non-premultiplied
color values. If the image from ‘in2
’ consists of premultiplied color values,
those values are automatically converted into non-premultiplied color
values before performing this operation.
This filter can have arbitrary non-localized effect on the input
which might require substantial buffering in the processing pipeline.
However with this formulation, any intermediate buffering needs can be
determined by ‘scale
’ which represents the maximum range
of displacement in either x or y.
When applying this filter, the source pixel location will often lie
between several source pixels. In this case it is recommended that
high quality viewers apply an interpolent on the surrounding pixels,
for example bilinear or bicubic, rather than simply selecting the
nearest source pixel. Depending on the speed of the available
interpolents, this choice may be affected by the ‘image-rendering
’ property setting.
The ‘color-interpolation-filters
’ property only
applies to the ‘in2
’ source image and does not apply to the ‘in
’ source image. The ‘in
’ source image must remain in its
current color space.
Attribute definitions:
primitiveUnits
’ on the ‘filter
’ element. The lacuna
value for ‘scale
’ is 0.
in2
’ to use to displace the pixels in ‘in
’ along the x-axis. The lacuna
value for ‘xChannelSelector
’ is A. in2
’ to use to displace the pixels in ‘in
’ along the y-axis. The lacuna
value for ‘yChannelSelector
’ is A. in
’ attribute)"
in
’. This attribute can take on the same
values as the ‘in
’ attribute.feFlood
’Name: | feFlood |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEFloodElement |
This filter primitive creates a rectangle filled with the color and
opacity values from properties ‘flood-color
’ and ‘flood-opacity
’. The rectangle is as large
as the filter primitive
subregion established by the ‘feFlood
’
element.
flood-color
’
property The ‘flood-color
’ property indicates what color
to use to flood the current filter
primitive subregion. The keyword ‘currentColor
’ and ICC colors can be specified in
the same manner as within a <paint> specification for the
‘fill
’ and ‘stroke
’ properties.
Name: | flood-color |
Value: | currentColor | <color> <icccolor>? |
---|---|
Initial: | black |
Applies to: | ‘feFlood ’ and ‘feDropShadow ’ elements
|
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
flood-opacity
’
property The ‘flood-opacity
’ property defines the
opacity value to use across the entire filter primitive subregion.
Name: | flood-opacity |
---|---|
Value: | <number> | <percentage> |
Initial: | 1 |
Applies to: | ‘feFlood ’ and ‘feDropShadow ’ elements
|
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
feGaussianBlur
’Name: | feGaussianBlur |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEGaussianBlurElement |
This filter primitive performs a Gaussian blur on the input image.
The Gaussian blur kernel is an approximation of the normalized convolution:
G(x,y) = H(x)I(y)
where
H(x) = exp(-x2/ (2s2)) / sqrt(2* pi*s2)
and
I(x) = exp(-y2/ (2t2)) / sqrt(2* pi*t2)
with ‘s
’ being the standard
deviation in the x direction and ‘t
’
being the standard deviation in the y direction, as specified by ‘stdDeviation
’.
The value of ‘stdDeviation
’ can be either one or two
numbers. If two numbers are provided, the first number represents a
standard deviation value along the x-axis of the current coordinate
system and the second value represents a standard deviation in Y. If
one number is provided, then that value is used for both X and Y.
Even if only one value is provided for ‘stdDeviation
’, this can be implemented as
a separable convolution.
For larger values of ‘s
’ (s >=
2.0), an approximation can be used: Three successive box-blurs build a
piece-wise quadratic convolution kernel, which approximates the
Gaussian kernel to within roughly 3%.
let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)
... if d is odd, use three box-blurs of size ‘d
’, centered on the output pixel.
... if d is even, two box-blurs of size ‘d
’ (the first one centered on the pixel
boundary between the output pixel and the one to the left, the second
one centered on the pixel boundary between the output pixel and the
one to the right) and one box blur of size ‘d+1
’ centered on the output pixel.
The approximation formula also applies correspondingly to ‘t
’.
Frequently this operation will take place on alpha-only images,
such as that produced by the built-in input, SourceAlpha. The
implementation may notice this and optimize the single channel case.
If the input has infinite extent and is constant (e.g FillPaint where the
fill is a solid color), this operation has no effect. If the input has
infinite extent and the filter resultwhere the fill is a solid color)
is the input to an ‘feTile
’,
the filter is evaluated with periodic boundary conditions.
By default, the subregion interacts as input and output clipping and this sentence would be irrelevant. However, this changes if the WG decides to allow a choice between input and output clipping.
What about
other inputs with infinite extents? What is the ‘periodic boundary condition
’?
Attribute definitions:
primitiveUnits
’ on the ‘filter
’ element. The second value
represents a standard deviation in Y. If one number is provided,
then that value is used for both X and Y.stdDeviation
’ is 0 in only one of X or Y, then the effect is
that the blur is only applied in the direction that has a non-zero
value. stdDeviation
’ is 0.The example at the start of this chapter
makes use of the ‘feGaussianBlur
’ filter primitive to create
a drop shadow effect.
feUnsharpMask
’Name: | feUnsharpMask |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFETurbulenceElement |
This filter primitive performs an image sharpening operation on the input image. This is traditionally known as an unsharp mask operation.
The filter first does a ‘feGaussianBlur
’ operation on the input
image and then subtracts the difference between the input image and
the blurred image.
For controlling the result there are three attributes that can be used:
stdDeviation
’ attribute controls how much
to blur the input image
threshold
’ attribute can be used for
controlling when the difference should not be subtracted
amount
’ attribute specifies an optional
multiplier for the difference to subtract
The ‘stdDeviation
’, ‘threshold
’ and ‘amount
’ attributes need to be defined.
feImage
’Name: | feImage |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEImageElement |
This filter primitive refers to a graphic external to this filter element, which is loaded or rendered into an RGBA raster and becomes the result of the filter primitive.
This filter primitive can refer to an external image or can be a reference to another piece of SVG. It produces an image similar to the built-in image source SourceGraphic except that the graphic comes from an external source.
If the xlink:href references a
stand-alone image resource such as a JPEG, PNG or SVG file, then the
image resource is rendered according to the behavior of the ‘image
’
element; otherwise, the referenced resource is rendered according to
the behavior of the ‘use
’ element. In either case, the
current user coordinate system depends on the value of attribute ‘primitiveUnits
’ on the ‘filter
’ element. The processing of
the preserveAspectRatio attribute on the
‘feImage
’ element is identical to that of
the ‘image
’ element.
When the
referenced image must be resampled to match the device coordinate
system, it is recommended that high quality viewers make use of
appropriate interpolation techniques, for example bilinear or
bicubic. Depending on the speed of the available interpolents,
this choice may be affected by the ‘image-rendering
’ property setting.
Attribute definitions:
The lacuna value for ‘preserveAspectRatio
’ is xMidYMid meet.
Animatable: yes.
Example feImage illustrates how images are placed relative to an object. From left to right:
x
’ and ‘y
’ values relative to the viewport the
object is in.
<svg width="600" height="250" viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Example feImage - Examples of feImage use</title> <desc>Three examples of using feImage, the first showing the default rendering, the second showing the image fit to a box and the third showing the image shifted and clipped.</desc> <defs> <filter id="Default"> <feImage xlink:href="smiley.png" /> </filter> <filter id="Fitted" primitiveUnits="objectBoundingBox"> <feImage xlink:href="smiley.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/> </filter> <filter id="Shifted"> <feImage xlink:href="smiley.png" x="500" y="5"/> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="598" height="248"/> <g> <rect x="50" y="25" width="100" height="200" filter="url(#Default)"/> <rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/> <rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/> <rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/> <rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/> <rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feMerge
’Name: | feMerge |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEMergeElement |
This filter primitive composites input image layers on top of each
other using the over operator with Input1
(corresponding to the first ‘feMergeNode
’ child element) on the
bottom and the last specified input, InputN (corresponding to
the last ‘feMergeNode
’ child element), on
top.
Many effects produce a number of intermediate layers in order to create the final output image. This filter allows us to collapse those into a single image. Although this could be done by using n-1 Composite-filters, it is more convenient to have this common operation available in this form, and offers the implementation some additional flexibility.
Each ‘feMerge
’ element can have any number of
‘feMergeNode
’ subelements, each of which
has an in
attribute.
Name: | feMergeNode |
---|---|
Categories: | None. |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEMergeNodeElement |
The canonical implementation of feMerge is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device. In certain cases (in particular if the output device itself is a continuous tone device), and since merging is associative, it might be a sufficient approximation to evaluate the effect one layer at a time and render each layer individually onto the output device bottom to top.
If the topmost image input is SourceGraphic and this ‘feMerge
’ is the last filter primitive in
the filter, the implementation is encouraged to render the layers up
to that point, and then render the SourceGraphic directly from its vector
description on top.
The example at the start of this chapter makes use of the feMerge filter primitive to composite two intermediate filter results together.
feMorphology
’Name: | feMorphology |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEMorphologyElement |
This filter primitive performs "fattening" or "thinning" of artwork. It is particularly useful for fattening or thinning an alpha channel.
The dilation (or erosion) kernel is a rectangle with a width of 2*x-radius and a height of 2*y-radius. In dilation, the output pixel is the individual component-wise maximum of the corresponding R,G,B,A values in the input image's kernel rectangle. In erosion, the output pixel is the individual component-wise minimum of the corresponding R,G,B,A values in the input image's kernel rectangle.
Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. In that case, the implementation might want to optimize the single channel case.
If the input has infinite extent and is constant (e.g FillPaint where the
fill is a solid color), this operation has no effect. If the input has
infinite extent and the filter result is the input to an ‘feTile
’, the filter is evaluated with
periodic boundary conditions.
By default, the subregion interacts as input and output clipping and this sentence would be irrelevant. However, this changes if the WG decides to allow a choice between input and output clipping.
What about other
inputs with infinite extents? What is the ‘periodic
boundary condition
’?
Because ‘feMorphology
’ operates on premultipied
color values, it will always result in color values less than or equal
to the alpha channel.
Attribute definitions:
operator
’ is erode. primitiveUnits
’ on the ‘filter
’ element.<?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="7cm" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example feMorphology - Examples of erode and dilate</title> <desc>Five text strings drawn as outlines. The first is unfiltered. The second and third use 'erode'. The fourth and fifth use 'dilate'.</desc> <defs> <filter id="Erode3"> <feMorphology operator="erode" in="SourceGraphic" radius="3" /> </filter> <filter id="Erode6"> <feMorphology operator="erode" in="SourceGraphic" radius="6" /> </filter> <filter id="Dilate3"> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> <filter id="Dilate6"> <feMorphology operator="dilate" in="SourceGraphic" radius="6" /> </filter> </defs> <rect fill="none" stroke="blue" stroke-width="2" x="1" y="1" width="698" height="498"/> <g enable-background="new" > <g font-family="Verdana" font-size="75" fill="none" stroke="black" stroke-width="6" > <text x="50" y="90">Unfiltered</text> <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text> <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text> <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text> <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text> </g> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feOffset
’Name: | feOffset |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEOffsetElement |
This filter primitive offsets the input image relative to its current position in the image space by the specified vector.
This is important for effects like drop shadows.
When applying this filter, the destination location may be offset
by a fraction of a pixel in device space. In this case a high quality viewer
should make use of appropriate interpolation techniques, for example
bilinear or bicubic. This is especially recommended for dynamic
viewers where this interpolation provides visually smoother movement
of images. For static viewers this is less of a concern. Close
attention should be made to the ‘image-rendering
’ property setting to
determine the authors intent.
Attribute definitions:
primitiveUnits
’ on the ‘filter
’ element.primitiveUnits
’ on the ‘filter
’ element.The example at the start of this chapter makes use of the feOffset filter primitive to offset the drop shadow from the original source graphic.
feSpecularLighting
’Name: | feSpecularLighting |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of descriptive elements and exactly one light source element, in any order. |
Attributes: | |
DOM Interfaces: | SVGFESpecularLightingElement |
This filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction (i.e., the unit vector in the eye direction is (0,0,1) everywhere).
This filter primitive produces an image which contains the specular
reflection part of the lighting calculation. Such a map is intended to
be combined with a texture using the add term of the
arithmetic ‘feComposite
’ method. Multiple light
sources can be simulated by adding several of these light maps before
applying it to the texture image.
The resulting RGBA image is computed as follows:
Sr = ks * pow(N.H,
specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) *
Lg
Sb = ks * pow(N.H, specularExponent) *
Lb
Sa = max(Sr, Sg,
Sb)
where
See ‘feDiffuseLighting
’ for definition
of N and (Lr, Lg, Lb).
The definition of H reflects our assumption of the constant eye vector E = (0,0,1):
H = (L + E) / Norm(L+E)
where L is the light unit vector.
Unlike the ‘feDiffuseLighting
’, the ‘feSpecularLighting
’ filter produces a
non-opaque image. This is due to the fact that the specular result
(Sr,Sg,Sb,Sa) is meant to
be added to the textured image. The alpha channel of the result is the
max of the color components, so that where the specular light is zero,
no additional coverage is added to the image and a fully white
highlight will add opacity.
The ‘feDiffuseLighting
’ and ‘feSpecularLighting
’ filters will often be
applied together. An implementation may detect this and calculate both
maps in one pass, instead of two.
Attribute definitions:
primitiveUnits
’) for dx
and
dy
, respectively, in the surface normal calculation
formulas. By specifying value(s) for kernelUnitLength, the kernel becomes defined
in a scalable, abstract coordinate system. If kernelUnitLength is not specified, the
dx
and dy
values should represent very
small deltas relative to a given (x,y)
position, which
might be implemented in some cases as one pixel in the intermediate
image offscreen bitmap, which is a pixel-based coordinate system,
and thus potentially not scalable. For some level of consistency
across display media and user agents, it is necessary that a value
be provided for at least one of filterRes and kernelUnitLength. Discussion of intermediate
images are in the Introduction and in
the description of attribute ‘filterRes
’. The light source is defined by one of the child elements ‘feDistantLight
’, ‘fePointLight
’ or ‘feDistantLight
’. The light color is
specified by property ‘lighting-color
’.
The example at the start of this chapter makes use of the feSpecularLighting filter primitive to achieve a highly reflective, 3D glowing effect.
feTile
’Name: | feTile |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFETileElement |
This filter primitive fills a target rectangle with a repeated,
tiled pattern of an input image. The target rectangle is as large as
the filter primitive subregion
established by the ‘feTile
’ element.
Typically, the input image has been defined with its own filter primitive subregion in
order to define a reference tile. ‘feTile
’ replicates
the reference tile in both X and Y to completely fill the target
rectangle. The top/left corner of each given tile is at location
(x+i*width,y+j*height)
, where (x,y)
represents the top/left of the input image's filter primitive subregion,
width
and height
represent the width and
height of the input image's filter
primitive subregion, and i
and j
can be
any integer value. In most cases, the input image will have a smaller
filter primitive subregion
than the ‘feTile
’ in order to achieve a repeated
pattern effect.
Implementers must take appropriate measures in constructing the tiled image to avoid artifacts between tiles, particularly in situations where the user to device transform includes shear and/or rotation. Unless care is taken, interpolation can lead to edge pixels in the tile having opacity values lower or higher than expected due to the interaction of painting adjacent tiles which each have partial overlap with particular pixels.
feTurbulence
’Name: | feTurbulence |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFETurbulenceElement |
Consider phasing out this C algorithm in favor of Simplex noise, which is more HW friendly.
This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. For a detailed description the of the Perlin turbulence function, see "Texturing and Modeling", Ebert et al, AP Professional, 1994. The resulting image will fill the entire filter primitive subregion for this filter primitive.
It is possible to create bandwidth-limited noise by synthesizing only one octave.
The C code below shows the exact algorithm used for this filter effect. The filter primitive subregion is to be passed as the arguments fTileX, fTileY, fTileWidth and fTileHeight.
For fractalSum, you get a turbFunctionResult that is aimed at a
range of -1 to 1 (the actual result might exceed this range in some
cases). To convert to a color value, use the formula colorValue
= ((turbFunctionResult * 255) + 255) / 2
, then clamp to the
range 0 to 255.
For turbulence, you get a turbFunctionResult that is aimed at a
range of 0 to 1 (the actual result might exceed this range in some
cases). To convert to a color value, use the formula colorValue
= (turbFunctionResult * 255)
, then clamp to the range 0 to 255.
The following order is used for applying the pseudo random numbers.
An initial seed value is computed based on the ‘seed
’ attribute. Then the implementation
computes the lattice points for R, then continues getting additional
pseudo random numbers relative to the last generated pseudo random
number and computes the lattice points for G, and so on for B and A.
The generated color and alpha values are in the color space
determined by the ‘color-interpolation-filters
’ property:
/* Produces results in the range [1, 2**31 - 2]. Algorithm is: r = (a * r) mod m where a = 16807 and m = 2**31 - 1 = 2147483647 See [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988 To test: the algorithm should produce the result 1043618065 as the 10,000th generated number if the original seed is 1. */ #define RAND_m 2147483647 /* 2**31 - 1 */ #define RAND_a 16807 /* 7**5; primitive root of m */ #define RAND_q 127773 /* m / a */ #define RAND_r 2836 /* m % a */ long setup_seed(long lSeed) { if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1; if (lSeed > RAND_m - 1) lSeed = RAND_m - 1; return lSeed; } long random(long lSeed) { long result; result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q); if (result <= 0) result += RAND_m; return result; } #define BSize 0x100 #define BM 0xff #define PerlinN 0x1000 #define NP 12 /* 2^PerlinN */ #define NM 0xfff static uLatticeSelector[BSize + BSize + 2]; static double fGradient[4][BSize + BSize + 2][2]; struct StitchInfo { int nWidth; // How much to subtract to wrap for stitching. int nHeight; int nWrapX; // Minimum value to wrap. int nWrapY; }; static void init(long lSeed) { double s; int i, j, k; lSeed = setup_seed(lSeed); for(k = 0; k < 4; k++) { for(i = 0; i < BSize; i++) { uLatticeSelector[i] = i; for (j = 0; j < 2; j++) fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize; s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1])); fGradient[k][i][0] /= s; fGradient[k][i][1] /= s; } } while(--i) { k = uLatticeSelector[i]; uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize]; uLatticeSelector[j] = k; } for(i = 0; i < BSize + 2; i++) { uLatticeSelector[BSize + i] = uLatticeSelector[i]; for(k = 0; k < 4; k++) for(j = 0; j < 2; j++) fGradient[k][BSize + i][j] = fGradient[k][i][j]; } } #define s_curve(t) ( t * t * (3. - 2. * t) ) #define lerp(t, a, b) ( a + t * (b - a) ) double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo) { int bx0, bx1, by0, by1, b00, b10, b01, b11; double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v; register i, j; t = vec[0] + PerlinN; bx0 = (int)t; bx1 = bx0+1; rx0 = t - (int)t; rx1 = rx0 - 1.0f; t = vec[1] + PerlinN; by0 = (int)t; by1 = by0+1; ry0 = t - (int)t; ry1 = ry0 - 1.0f; // If stitching, adjust lattice points accordingly. if(pStitchInfo != NULL) { if(bx0 >= pStitchInfo->nWrapX) bx0 -= pStitchInfo->nWidth; if(bx1 >= pStitchInfo->nWrapX) bx1 -= pStitchInfo->nWidth; if(by0 >= pStitchInfo->nWrapY) by0 -= pStitchInfo->nHeight; if(by1 >= pStitchInfo->nWrapY) by1 -= pStitchInfo->nHeight; } bx0 &= BM; bx1 &= BM; by0 &= BM; by1 &= BM; i = uLatticeSelector[bx0]; j = uLatticeSelector[bx1]; b00 = uLatticeSelector[i + by0]; b10 = uLatticeSelector[j + by0]; b01 = uLatticeSelector[i + by1]; b11 = uLatticeSelector[j + by1]; sx = double(s_curve(rx0)); sy = double(s_curve(ry0)); q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1]; q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1]; a = lerp(sx, u, v); q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1]; q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1]; b = lerp(sx, u, v); return lerp(sy, a, b); } double turbulence(int nColorChannel, double *point, double fBaseFreqX, double fBaseFreqY, int nNumOctaves, bool bFractalSum, bool bDoStitching, double fTileX, double fTileY, double fTileWidth, double fTileHeight) { StitchInfo stitch; StitchInfo *pStitchInfo = NULL; // Not stitching when NULL. // Adjust the base frequencies if necessary for stitching. if(bDoStitching) { // When stitching tiled turbulence, the frequencies must be adjusted // so that the tile borders will be continuous. if(fBaseFreqX != 0.0) { double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth; double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth; if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX) fBaseFreqX = fLoFreq; else fBaseFreqX = fHiFreq; } if(fBaseFreqY != 0.0) { double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight; double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight; if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY) fBaseFreqY = fLoFreq; else fBaseFreqY = fHiFreq; } // Set up initial stitch values. pStitchInfo = &stitch; stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f); stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth; stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f); stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight; } double fSum = 0.0f; double vec[2]; vec[0] = point[0] * fBaseFreqX; vec[1] = point[1] * fBaseFreqY; double ratio = 1; for(int nOctave = 0; nOctave < nNumOctaves; nOctave++) { if(bFractalSum) fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio); else fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio); vec[0] *= 2; vec[1] *= 2; ratio *= 2; if(pStitchInfo != NULL) { // Update stitch values. Subtracting PerlinN before the multiplication and // adding it afterward simplifies to subtracting it once. stitch.nWidth *= 2; stitch.nWrapX = 2 * stitch.nWrapX - PerlinN; stitch.nHeight *= 2; stitch.nWrapY = 2 * stitch.nWrapY - PerlinN; } } return fSum; }
Attribute definitions:
The base frequency (frequencies) parameter(s) for the noise function. If two <number>s are provided, the first number represents a base frequency in the X direction and the second value represents a base frequency in the Y direction. If one number is provided, then that value is used for both X and Y.
The lacuna
value for ‘baseFrequency
’ is 0.
Negative values are unsupported.
Animatable: yes.
The numOctaves parameter for the noise function.
The lacuna
value for ‘numOctaves
’ is 1.
Negative values are unsupported.
Animatable: yes.
The starting number for the pseudo random number generator.
The
lacuna
value for ‘seed
’ is 0.
When the seed number is handed over to the algorithm above it must first be truncated, i.e. rounded to the closest integer value towards zero.
Animatable: yes.
If stitchTiles="noStitch", no
attempt it made to achieve smooth transitions at the border of
tiles which contain a turbulence function. Sometimes the result
will show clear discontinuities at the tile borders.
If stitchTiles="stitch", then the
user agent will automatically adjust baseFrequency-x and
baseFrequency-y values such that the ‘feTurbulence
’ node's width and height
(i.e., the width and height of the current subregion) contains an
integral number of the Perlin tile width and height for the first
octave. The baseFrequency will be adjusted up or down depending on
which way has the smallest relative (not absolute) change as
follows: Given the frequency, calculate
lowFreq=floor(width*frequency)/width
and
hiFreq=ceil(width*frequency)/width
. If
frequency/lowFreq < hiFreq/frequency then use lowFreq, else use
hiFreq. While generating turbulence values, generate lattice
vectors as normal for Perlin Noise, except for those lattice points
that lie on the right or bottom edges of the active area (the size
of the resulting tile). In those cases, copy the lattice vector
from the opposite edge of the active area.
The lacuna
value for ‘stitchTiles
’ is noStitch.
Animatable: yes.
Indicates whether the filter primitive should perform a noise or turbulence function.
The
lacuna
value for ‘type
’ is turbulence.
Animatable: yes.
<?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="450px" height="325px" viewBox="0 0 450 325" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example feTurbulence - Examples of feTurbulence operations</title> <desc>Six rectangular areas showing the effects of various parameter settings for feTurbulence.</desc> <g font-family="Verdana" text-anchor="middle" font-size="10" > <defs> <filter id="Turb1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> </filter> <filter id="Turb2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/> </filter> <filter id="Turb3" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/> </filter> <filter id="Turb4" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/> </filter> <filter id="Turb5" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/> </filter> <filter id="Turb6" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/> </filter> </defs> <rect x="1" y="1" width="448" height="323" fill="none" stroke="blue" stroke-width="1" /> <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" /> <text x="75" y="117">type=turbulence</text> <text x="75" y="129">baseFrequency=0.05</text> <text x="75" y="141">numOctaves=2</text> <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" /> <text x="225" y="117">type=turbulence</text> <text x="225" y="129">baseFrequency=0.1</text> <text x="225" y="141">numOctaves=2</text> <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" /> <text x="375" y="117">type=turbulence</text> <text x="375" y="129">baseFrequency=0.05</text> <text x="375" y="141">numOctaves=8</text> <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" /> <text x="75" y="272">type=fractalNoise</text> <text x="75" y="284">baseFrequency=0.1</text> <text x="75" y="296">numOctaves=4</text> <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" /> <text x="225" y="272">type=fractalNoise</text> <text x="225" y="284">baseFrequency=0.4</text> <text x="225" y="296">numOctaves=4</text> <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" /> <text x="375" y="272">type=fractalNoise</text> <text x="375" y="284">baseFrequency=0.1</text> <text x="375" y="296">numOctaves=1</text> </g> </svg>
View this example as SVG (SVG-enabled browsers only)
feDropShadow
’Name: | feDropShadow |
---|---|
Categories: | Filter primitive element |
Content model: | Any number of the following elements, in any order: |
Attributes: | |
DOM Interfaces: | SVGFEDropShadowElement |
This filter creates a drop shadow of the input image. It is a shorthand filter, and is defined in terms of combinations of other filter primitives. The expectation is that it can be optimized more easily by implementations.
The result of a ‘feDropShadow
’ filter primitive is
equivalent to the following:
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/> <feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/> <feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/> <feComposite in2="offsetblur" operator="in"/> <feMerge> <feMergeNode/> <feMergeNode in="in-of-feDropShadow"/> </feMerge>
The above divided into steps:
feDropShadow
’ filter primitive and the ‘stdDeviation
’ on the ‘feDropShadow
’ and do processing as if the
following ‘feGaussianBlur
’ was applied:
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/>
dx
’ and ‘dy
’ as specified on the ‘feDropShadow
’ element, equivalent to
applying an ‘feOffset
’ with these parameters:
<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/>
feFlood
’
element with ‘flood-color
’ and ‘flood-opacity
’ as specified on the ‘feDropShadow
’ was applied:
<feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/>
feFlood
’ in step 3 with the result
of the ‘feOffset
’ in step 2 as if an ‘feComposite
’ filter primitive with operator=‘in
’ was applied:
<feComposite in2="offsetblur" operator="in"/>
feMerge
’
was performed:
<feMerge> <feMergeNode/> <feMergeNode in="in-of-feDropShadow"/> </feMerge>
Note that while the definition of the ‘feDropShadow
’ filter primitive says that
it can be expanded into an equivalent tree it is not required that it
is implemented like that. The expectation is that user agents can
optimize the handling by not having to do all the steps separately.
Beyond the DOM interface SVGFEDropShadowElement
there is no way of accessing the internals of the ‘feDropShadow
’ filter primitive, meaning
if the
filter primitive is implemented as an equivalent tree then that tree
must not be exposed to the DOM.
Attribute definitions:
The x offset of the drop shadow.
The lacuna
value for ‘dx
’ is 2.
This attribute is then forwarded to the ‘dx
’ attribute of the internal ‘feOffset
’ element.
Animatable: yes.
The y offset of the drop shadow.
The lacuna
value for ‘dy
’ is 2.
This attribute is then forwarded to the ‘dy
’ attribute of the internal ‘feOffset
’ element.
Animatable: yes.
The standard deviation for the blur operation in the drop shadow.
The lacuna
value for ‘stdDeviation
’ is 2.
This attribute is then forwarded to the ‘stdDeviation
’ attribute of the internal
‘feGaussianBlur
’ element.
Animatable: yes.
feDiffuseSpecular
’feCustom
’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.
<uri>
feCustom
’ vertex shader. If the shader
cannot be retrieved, or if the shader cannot be loaded or compiled
because it contains erroneous code, the shader is a pass through. Otherwise, the vertex
shader is invoked for all the vertex mesh vertices.
<uri> | mix(<uri> [ <blend-mode> ||
<alpha-compositing> ]?)
<integer>{0,2} <box>? [ detached | attached
]?
<param-def> [ ,
<param-def> ]*
<param-def> | <param-name> <param-value> |
<param-name> | <author-ident> |
<param-value> | [ true | false ]{1,4} | <number>{1,4} | <array> | <transform-function>+ | <mat> | <color> | texture(<uri> | <filter-primitive-reference>) |
<array> | array(<number>#) |
<mat> | mat2(<number> [ , <number> ]{3,3} ) | mat3(<number> [ , <number> ]{8,8} ) | mat4(<number> [ , <number> ]{15,15} ) |
The data type <filter-primitive-reference> can just be used for the primitive feCustom.
There are two ways to specify a 4x4 matrix. They differ in how they are interpolated.
The <mat>
values are in column major order.
For example, mat2(1, 2, 3, 4)
has [1, 2]
in the first column and [3, 4]
in the second one.
There may be different ways
to specify the <param-value> syntax. For example, it might be
better to not have a texture()
function and simply a
<uri> for texture parameters. Or it might be better to not have
a mat<n>
prefixes for matrices.
The following document
from Mozilla describes how WebGL vertex and fragment shaders can be
defined in <script>
elements.
CSS shaders can reference shaders defined in
<script>
elements, as shown in the following code
snippet.
<script id="warp" type="x-shader/x-vertex" > <-- source code here --> </script> .. <style> .shaded { filter: custom(url(#warp)); }
fragmentShader
’ attributefeCustom
’ element fragment shader. If the
shader cannot be retrieved, or if the shader cannot be loaded or
compiled because it contains erroneous code, the shader is a pass through. Otherwise, the fragment
shader is invoked for each of the pixels during the rasterization
phase that follows the vertex shader processing.
mix
’ function for a basic control of
compositing and color managment within a fragment shader. The
processing model for ‘mix
’ is provided below.
feCustom
’ element fragment shader. If
the shader cannot be retrieved, or if the shader cannot be loaded
or compiled because it contains erroneous code, the shader is a pass through. Otherwise, the fragment
shader is invoked for each of the pixels during the rasterization
phase that follows the vertex shader processing.
Each pixel is blended with the mix color by using one of the predefined blend modes and it's appropriate blend mode keyword (See [COMPOSITING]).
Each pixel is composed with the mix color by using one of the predefined alpha-compositing operators and it's appropriate alpha-compositing keyword (See [COMPOSITING]).
The lacuna value for ‘fragmentShader
’ is ‘mix(<default-fragment-shader> normal
source-atop)
’.
The ‘vertexMesh
’ attribute of the ‘feCustom
’ element defines the granularity
of vertices in the shader mesh. By default,
the vertex mesh is made of two triangles that encompass the filter region area.
One or two positive integers greater then zero indicate the
additional number of vertex lines and columns that will make the
vertex mesh. With the initial value of ‘1
1
’ there is a single row and a single column, resulting in
a four-vertices mesh (top-left, top-right, bottom-right,
bottom-left). If the second parameter is not provided, it takes a
value equal to the first. A value of ‘n
m
’ results in a vertex mesh that has n
columns and m rows. This results in a total of (n + 1)
* (m + 1) vertices as illustrated in the figure below.
The lacuna value is ‘1 1
’.
If one of the passed parameters is zero or negative, the UA must fallback to the lacuna values.
The lacuna value is ‘filter-box
’.
Are padding-box or content-box needed? Can border-box be the bounding client rect?
detached
’ is specified, the
triangles are detached. The geometry provided to the vertex shader
is made of triangles which do not share adjacent edges' vertices.
attached
’ is specified, the
triangles are attached. The geometry provided to the vertex shader
is made of triangles which share adjacent edges' vertices.
attached
’.
In the following figure, let us consider the top-left "tile" in the shader mesh. In the detached mode, the vertex shader will receive the bottom right and top left vertices multiple time, one of each of the two triangles which make up the tile. Otherwise, the shader will receive these vertices only once, because they are shared by the "connected" triangles.
See the discussion on uniforms passed to shaders to understand how the shader programs can leverage that feature.
Reference to discussion missing.
The figure illustrates how a ‘vertexMesh
’ value of ‘6
6
’ adds vertices passed to the vertex shader. The red
vertices are the default ones and the gray vertices are resulting
from the ‘vertexMesh
’ value.
The following example applies a vertex shader (‘distort.vs
’) to elements with class ‘distorted
’. The vertex shader will operate on
a mesh that has 6 lines and 6 columns (because there are 5 additional
lines and 5 additional columns).
<style> .distorted { filter: custom(url(distort.vs), 6 6); } </style> ... <div class="distorted"> .. </div>
which could also be written as:
<style> .distorted { filter: url(#distort); } </style> ... <filter id="distort"> <feCustom vertexShader="url(distort.vs)" vertexMesh="6 6" /> </filter> <div class="distorted"> .. </div>
When an ‘feCustom
’ filter primitive is used in a
filter graph, a ‘texture
’ parameter can
take a value of <filter-primitive-reference>
where <filter-primitive-reference>
references the result of a previous filter primitive in the same
filter graph. This result is used as a texture and must fulfill the security
requirments.
The ‘feCustom
’ filter primitive in the
following examples requests the resulting texture of the previous
filter primitive ‘feTurbulence
’. This texture gets passed
to the shader with the parameter name ‘tex
’.
<filter> <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4" result="turbulence" /> <feCustom fragmentShader="url(complex.fs)" params="tex texture(turbulence)" /> </filter>
The ‘feCustom
’ filter primitive in the
following examples requests the resulting texture of the previous
filter primitive ‘feGaussianBlur
’. This primitive has
access to rendered content, therefore the custom filter primitive
must fall back to a pass through.
<filter> <feGaussianBlur stdDeviation="8" result="blur" /> <feCustom fragmentShader="url(complex.fs)" params="tex texture(blur)" /> </filter>
This section illustrates the shader processing model as it applies to an element whose unfiltered rendering is shown in the figure below.
Element before applying shaders
Prior to the shader processing, the input of the filter primitive gets rendered into an offscreen image (the source texture). The offscreen size and position is controlled by the filter primitive subregion.
Source texture created by rendering
the element offscreen and adding filter primitive margins
An ‘feCustom
’ element or a
custom()
filter function defines a custom filter
primitive. The following figure illustrates its model.
The shader processing model
In a first step the source texture is used on a vertex mesh. By default, the vertex mesh has the position and size of the filter primitive subregion. In the following figure, the red markers represent the default vertices in the default vertex mesh. The diagonal line illustrate how the vertices define two triangles.
The default vertex mesh and its default vertices
The ‘vertexMesh
’ attribute on the ‘feCustom
’ element and the
<vertex-mesh> parameter on the custom()
filter
function give more granularity controll over the vertex mesh.
A finer, custom vertex mesh
In a second step, the vertex mesh gets processesed through the vertex shader, which produces a set of transformed vertices. These transformed vertices are the output as shown in the figure below.
Transformed vertices after applying the vertex shader
The third step is the rasterization step. The filter primitive invokes the fragment shader for every pixel location inside the vertex mesh to perform per pixel operation and produce the final pixel color at that vertex mesh location.
Transformed vertices after applying the vertex shader
Note that the fragment shader may be called several time for what corresponds to the same pixel coordinate on the output, for example when the vertex mesh folds over itself.
There is no guarantee which shader gets applied first. Because the depth buffer is used there's no guarantee that blending will happen.
The mix
function provides basic functionalities for
color manipulation like blending and alpha compositing on a fragment
shader. The processing model of mix
is illustrated in the
following figure:
fragmentShader: processing model for mix
Each color value passed to the fragment shader gets multiplied with the color matrix, a predefined fragment shader variable that represents a 4x4 matrix. The matrix is initialized to an identity matrix, but can be set by a fragment shader. The resulting color is the multiplied color.
Note that color matrices usually operate on 5x4 values, where the last column defines an offset that is added to the color value. The WG may consider to turn the current 4x4 matrix into a 5x4 matrix.
The mix color is a second, predefined fragment shader
variable and represents an ‘RGBA
’
<color> value. The mix color can be set by the
fragment shader. If not specified, the default value is transparent
black. The ‘RGB
’ channels of the
multiplied color get blended with the ‘RGB
’ channels of the mix color with the
multiplied color as destination and the mix color as
source [[!compositing]]. The applied blend mode depends on the passed
<blend-mode> parameter which is ‘normal
’ by default. The result of the blending and
the opacity of the mix color define the blended color.
The multiplied color and the mix color get composed
using the alpha-compositing rules as described in the Compositing and
Blending spec [[compositing]]. The applied alpha-compositing mode is
specified by the passed <alpha-compositing> parameter and is
‘source-atop
’ by default.
The last step, step 4, shows rasterized output. If the custom filter primitive is the last primitive in the filter chain, then this output is the filtered rendering of the element. Otherwise, the output of the primitive becomes the input to the next filter primitive using it.
feOffset
’
element moves the element's rendering by a given offset, which biases
the interaction: the end user may click on an element and actually hit
a different one because of the offset. This issue is expected to be
more acute with vertex shaders and the working group should consider a
general solution to this issue that works for both predefined filter
effects and custom ones.The filter() function produces a CSS <image> value. It has the following syntax:
<filter> = filter(
<image>,
none | <filter-function> [ <filter-function> ]*
)
The function takes two parameters. The first is a CSS <image>
value. The second is the value of a ‘filter
’ property. The function take the
input image parameter and apply the filter rules, returning a
processing image.
Since a custom filter primitive is applying a processing operation on input values, it is important that no protected information leaks from that operation.
A study of the security issues has led to the requirement that vertex shaders and fragment shaders do not get access to the rendered content in order to prevent timing attacks.
If a custom filter primitive does not fulfill these requirements, the primitive is a pass through.
Input to a filter effect must not include anything as input that would violate same origin restrictions. If cross-origin access is required, then the requested content should be explicitly marked with CORS data.
This restriction includes:
For content that falls under this restriction, it should not be
rendered into the input image. For example, a filter effect that is
applying to a cross-origin ‘iframe
’
element would receive a completely blank input image.
The schema for Filter Effects 1.0 is written in RelaxNG [RelaxNG], a namespace-aware schema language that uses the datatypes from XML Schema Part 2 [Schema2]. This allows namespaces and modularity to be much more naturally expressed than using DTD syntax. The RelaxNG schema for Filter Effects 1.0 may be imported by other RelaxNG schemas, or combined with other schemas in other languages into a multi-namespace, multi-grammar schema using Namespace-based Validation Dispatching Language [NVDL].
Unlike a DTD, the schema used for validation is not hardcoded into the document instance. There is no equivalent to the DOCTYPE declaration. Simply point your editor or other validation tool to the IRI of the schema (or your local cached copy, as you prefer).
The RNG is under construction, and only the individual RNG snippets are available at this time. They have not yet been integrated into a functional schema. The individual RNG files are available here.
filter
’ element Below are the equivalents for each of the filter functions
expressed in terms of the ‘filter element
’
element. The parameters from the function are labelled with brackets
in the following style: [amount]. In the case of parameters that are
percentage values, they are converted to real numbers.
<filter id="grayscale"> <feColorMatrix type="matrix" values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0 0 0 0 1 0"/> </filter>
<filter id="sepia"> <feColorMatrix type="matrix" values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0 (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0 (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0 0 0 0 1 0"/> </filter>
<filter id="saturate"> <feColorMatrix type="saturate" values="(1 - [amount])"/> </filter>
<filter id="hue-rotate"> <feColorMatrix type="hueRotate" values="[angle]"/> </filter>
<filter id="invert"> <feComponentTransfer> <feFuncR type="table" tableValues="[amount] (1 - [amount])"/> <feFuncG type="table" tableValues="[amount] (1 - [amount])"/> <feFuncB type="table" tableValues="[amount] (1 - [amount])"/> </feComponentTransfer> </filter>
<filter id="opacity"> <feComponentTransfer> <feFuncA type="table" tableValues="0 [amount]"/> </feComponentTransfer> </filter>
<filter id="brightness"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]"/> <feFuncG type="linear" slope="[amount]"/> <feFuncB type="linear" slope="[amount]"/> </feComponentTransfer> </filter>
<filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> </feComponentTransfer> </filter>
<filter id="blur"> <feGaussianBlur stdDeviation="[radius radius]"> </filter>
<filter id="drop-shadow"> <feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> <feFlood flood-color="[color]"/> <feComposite in2="offsetblur" operator="in"/> <feMerge> <feMergeNode/> <feMergeNode in="[input-image]"/> </feMerge> </filter>
<filter id="custom"> <feCustom vertexShader="vertex-shader" fragmentShader="fragment-shader" vertexMesh="vertex-mesh" params="params"/> </filter>
custom()
function the shader()
function
instead and introduce an feCustomShader
filter primitive
instead of ‘feCustom
’.There are many precedents for shading languages, for example:
This document recommends the adoption of the subset of GLSL ES [GLSLES] defined in the WebGL 1.0 WEBGL] specification.
In particular, the same restrictions as defined in WebGL should apply to CSS shaders:
All the parameters specified in the
<shader-params>
values (e.g., the feCustom's
param
attribute or the custom(<uri>,
<shader-params>)
filter function or the
shader
property value) will be available as uniforms to
the shader(s) referenced by the ‘shader
’ property.
The group may consider applying further restrictions to the GLSL ES language to make it easier to write vertex and fragment shaders.
The OpenGL ES shading language provides a number of variables that
can be passed to shaders, exchanged between shaders or set by shaders.
In particular, a vertex shader can provide specific data to the
fragment shader in the form of ‘varying
’ parameters (parameters that vary per
pixel). The following sections describe particular variables that are
assumed for the vertex and fragment shaders in CSS shaders.
A normal GLSL shader requires that the fragment shaders computes a
gl_FragColor
value which is the color value for the
processed fragment (pixel).
Because of the security restrictions, fragment shaders are not allowed to access rendered content pixel values directly. However, fragment shaders in this specification have the option to compute a value that is automatically mixed with the rendered content values (but without ever providing direct access to these values to the shader code).
In the context of this specification, fragment shaders have the options to compute the following values:
gl_FragColor
. When the fragment shader parameter is a
direct reference to a source file, that shader should compute a
gl_FragColor
. This may be userful, for example, to
compute complex patterns.
css_MixColor
. When the fragment shader parameter uses
the mix()
function, then it can compute a mix color value that is
composited with the rendered content as explained in the shaders processing model.
css_ColorMatrix
. When the fragment shader parameter
uses the mix()
function, then it can compute a color matrix value that is
multiplied with the rendered content as explained in the shaders processing model.
The following example shows a fragment shader which computes a simple solid red color:
CSS
#filtered-element { filter: custom(url(simple.vs) url(simple.fs)); }
simple.fs
void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
The following example shows a fragment shader which darkens the
rendered content by computing a css_MixColor
which is
multiplied with the rendered content:
CSS
#filtered-element { filter: custom(url(simple.vs) mix(url(simple2.fs) multiply)); }
simple2.fs
void main() { css_MixColor = vec4(0.8, 0.8, 0.8, 1.0); }
The following example shows a fragment shader which darkens the
rendered content by computing a css_ColorMatrix
which
varies depending on the texture coordinate:
CSS
#filtered-element { filter: custom(url(simple.vs) mix(url(simple3.fs))); }
simple3.fs
varying vec2 v_texCoord; void main() { float x = v_texCoord.x; css_ColorMatrix = mat4( vec4(x, x, x, x), // 1rst column vec4(x, x, x, x), // 2nd column vec4(x, x, x, x), // 3rd column vec4(x, x, x, x), // 4th column ); }
attribute vec4 a_position
| The vertex coordinates in the filter region box. Coordinates are normalized to the [-0.5, 0.5] range along the x, y and z axis. |
attribute vec2 a_texCoord;
| The vertex's texture coordinate. Coordinates are in the [0, 1] range on both axis |
attribute vec2 a_meshCoord;
| The vertex's coordinate in the mesh box. Coordinates are in the [0, 1] range on both axis. |
attribute vec3 a_triangleCoord;
|
The x and y values provide the coordinate of the current
‘ The z coordinate is computed according to the following figure. The z coordinate value is provided for each vertex and corresponding triangle. For example, for the bottom right vertex of the top triangle, the z coordinate will be 2. For the bottom right vertex of the bottom triangle, the z coordinate will be 4. |
The a_triangleCoord.z value
uniform mat4 u_projectionMatrix
| The current projection matrix to the destination texture's
coordinate space). Note that the ‘model
matrix ’ which the ‘transform ’ property sets, is not passed to
the shaders. It is applied to the filtered element's
rendering.
|
uniform vec2 u_textureSize
| The input texture's size. Includes the filter margins. |
uniform vec4 u_meshBox
| The mesh box position and size in the filter box coordinate system. For example, if the mesh box is the filter box, the value will be (-0.5, -0.5, 1, 1). |
uniform vec2 u_tileSize
| The size of the current mesh tile, in the same coordinate space as the vertices. |
uniform vec2 u_meshSize
| The size of the current mesh in terms of tiles. The x coordinate provides the number of columns and the y coordinate provides the number of rows. |
When the author provides both a vertex and a fragment shader, there
is no requirement on the varyings passed from the vertex shader to the
fragment shader. If no vertex shader is provided, the fragment shader
can expect the v_texCoord
varying. If no fragment shader
is provided, the vertex shader must compute a v_texCoord varying for
the default shaders.
varying vec2 v_texCoord; | The current pixel's texture coordinates (in the content texture). |
When there parameters are passed to the custom()
filter
function or the ‘feCustom
’ filter primitive, the user agent
pass uniforms of the corresponding name and type to the shaders.
The following table shows the mapping between CSS shader parameters and uniform types.
CSS param type | GLSL uniform type |
---|---|
[ true | false ]{1,4} | bool, bvec2, bvec3 or bvec4 |
<number>{1,4} | float, vec2, vec3 or vec4 |
<array> | float[n] |
<transform-function> | mat4 |
mat2(<number> [ , <number> ]{3,3}) | mat3(<number> [ , <number> ]{8,8}) | mat4(<number> [ , <number> ]{15,15}) | mat2, mat3 or mat4 |
texture(<uri> | <filter-primitive-reference>) | sampler2D |
The following code sample illustrates that mechanism.
CSS .shaded { filter: custom( url(distort.vs) url(tint.fs), distortAmount 0.5, lightVector 1.0 1.0 0.0, disp texture(disp.png) ); } Shader (vertex or fragment) ... uniform float distortAmount; uniform vec3 lightVector; uniform sampler2D disp; uniform vec2 dispSize; ...
As illustrated in the example, for each <textureName>
texture()
parameter, an additional vec2
uniform is
passed to the shaders with the size of the corresponding texture.
If no vertex shader is provided, the default one is as shown below.
attribute vec4 a_position; uniform mat4 u_projectionMatrix; void main() { gl_Position = u_projectionMatrix * a_position; }
If no fragment shader is provided, the default one is shown below.
void main() { }
If shaders access texture values outside the [0, 1]
range on both axis, the returned value is a fully transluscent black
pixel.
The CSS ‘filter
’ property is animatable.
Interpolation happens between the filter functions only if the ‘filter
’ values have
the same number of filter functions, and the same functions appearing
in the same order.
The CSS WG may define different fading transitions in the future.
All properties defined as animatable, provided they are one of the property types listed in CSS3 Transitions [CSS3-TRANSITIONS], can be animated.
To interpolate between params
values in a
custom()
filter function or between ‘feCustom
’
‘params
’ attribute values, the user agent
should interpolate between each of the [param-def] values according to its
type. List of values need to be of the same length. Matrices need to
be of the same dimension. Arrays need to be of the same size.
Interpolation between shader params only happens if all the other shader properties are identical: vertex shader, fragment shader, filter margins and vertex mesh.
<number>[wsp<number>{0-3}]
| Interpolate between each of the values. |
<true|false>[wsp<true|fals>{0-3}]
| Interpolate between each of the values using a step function. |
<array>
| Interpolate between the array elements. |
<transform-function>
| Follows the CSS3 transform interpolation rules. |
<mat>
| Interpolate between the matrix components (applies to mat2, mat3 and mat4). |
transform
’ property, it is not possible to
animate the different components of the ‘shader-params
’ property on different timelines
or with different keyframes. This is a generic issue of animating
properties that have multiple components to them.interface ImageData { readonly attribute long width; readonly attribute long height; readonly attribute data; };
interface SVGFilterElement : ::svg::SVGElement, ::svg::SVGURIReference, ::svg::SVGLangSpace, ::svg::SVGExternalResourcesRequired, ::svg::SVGStylable, ::svg::SVGUnitTypes { readonly attribute SVGAnimatedEnumeration filterUnits; readonly attribute SVGAnimatedEnumeration primitiveUnits; readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedInteger filterResX; readonly attribute SVGAnimatedInteger filterResY; void setFilterRes(in unsigned long filterResX, in unsigned long filterResY) raises(DOMException); ImageData apply(in ImageData source); };
interface SVGFilterPrimitiveStandardAttributes : ::svg::SVGStylable { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedString result; };
interface SVGFEBlendElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Blend Mode Types const unsigned short SVG_FEBLEND_MODE_UNKNOWN = 0; const unsigned short SVG_FEBLEND_MODE_NORMAL = 1; const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2; const unsigned short SVG_FEBLEND_MODE_SCREEN = 3; const unsigned short SVG_FEBLEND_MODE_DARKEN = 4; const unsigned short SVG_FEBLEND_MODE_LIGHTEN = 5; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration mode; };
normal
’.multiply
’.screen
’.darken
’.lighten
’.interface SVGFEColorMatrixElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Color Matrix Types const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX = 1; const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE = 2; const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE = 3; const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList values; };
matrix
’.saturate
’.hueRotate
’.luminanceToAlpha
’.interface SVGFEComponentTransferElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
interface SVGComponentTransferFunctionElement : ::svg::SVGElement { // Component Transfer Types const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN = 0; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE = 2; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE = 3; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR = 4; const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA = 5; readonly attribute SVGAnimatedEnumeration type; readonly attribute SVGAnimatedNumberList tableValues; readonly attribute SVGAnimatedNumber slope; readonly attribute SVGAnimatedNumber intercept; readonly attribute SVGAnimatedNumber amplitude; readonly attribute SVGAnimatedNumber exponent; readonly attribute SVGAnimatedNumber offset; };
identity
’.table
’.discrete
’.linear
’.gamma
’.interface SVGFEFuncRElement : SVGComponentTransferFunctionElement { };
interface SVGFEFuncGElement : SVGComponentTransferFunctionElement { };
interface SVGFEFuncBElement : SVGComponentTransferFunctionElement { };
interface SVGFEFuncAElement : SVGComponentTransferFunctionElement { };
interface SVGFECompositeElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Composite Operators const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN = 0; const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER = 1; const unsigned short SVG_FECOMPOSITE_OPERATOR_IN = 2; const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT = 3; const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP = 4; const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR = 5; const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedEnumeration operator; readonly attribute SVGAnimatedNumber k1; readonly attribute SVGAnimatedNumber k2; readonly attribute SVGAnimatedNumber k3; readonly attribute SVGAnimatedNumber k4; };
over
’.in
’.out
’.atop
’.xor
’.arithmetic
’.interface SVGFEConvolveMatrixElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Edge Mode Values const unsigned short SVG_EDGEMODE_UNKNOWN = 0; const unsigned short SVG_EDGEMODE_DUPLICATE = 1; const unsigned short SVG_EDGEMODE_WRAP = 2; const unsigned short SVG_EDGEMODE_NONE = 3; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedInteger orderX; readonly attribute SVGAnimatedInteger orderY; readonly attribute SVGAnimatedNumberList kernelMatrix; readonly attribute SVGAnimatedNumber divisor; readonly attribute SVGAnimatedNumber bias; readonly attribute SVGAnimatedInteger targetX; readonly attribute SVGAnimatedInteger targetY; readonly attribute SVGAnimatedEnumeration edgeMode; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; readonly attribute SVGAnimatedBoolean preserveAlpha; };
duplicate
’.wrap
’.none
’.interface SVGFEDiffuseLightingElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber surfaceScale; readonly attribute SVGAnimatedNumber diffuseConstant; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; };
interface SVGFEDistantLightElement : ::svg::SVGElement { readonly attribute SVGAnimatedNumber azimuth; readonly attribute SVGAnimatedNumber elevation; };
interface SVGFEPointLightElement : ::svg::SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; };
interface SVGFESpotLightElement : ::svg::SVGElement { readonly attribute SVGAnimatedNumber x; readonly attribute SVGAnimatedNumber y; readonly attribute SVGAnimatedNumber z; readonly attribute SVGAnimatedNumber pointsAtX; readonly attribute SVGAnimatedNumber pointsAtY; readonly attribute SVGAnimatedNumber pointsAtZ; readonly attribute SVGAnimatedNumber specularExponent; readonly attribute SVGAnimatedNumber limitingConeAngle; };
interface SVGFEDisplacementMapElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Channel Selectors const unsigned short SVG_CHANNEL_UNKNOWN = 0; const unsigned short SVG_CHANNEL_R = 1; const unsigned short SVG_CHANNEL_G = 2; const unsigned short SVG_CHANNEL_B = 3; const unsigned short SVG_CHANNEL_A = 4; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedString in2; readonly attribute SVGAnimatedNumber scale; readonly attribute SVGAnimatedEnumeration xChannelSelector; readonly attribute SVGAnimatedEnumeration yChannelSelector; };
R
’.G
’.B
’.A
’.interface SVGFEFloodElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { };
interface SVGFEGaussianBlurElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber stdDeviationX; readonly attribute SVGAnimatedNumber stdDeviationY; void setStdDeviation(in float stdDeviationX, in float stdDeviationY) raises(DOMException); };
interface SVGFEImageElement : ::svg::SVGElement, ::svg::SVGURIReference, ::svg::SVGLangSpace, ::svg::SVGExternalResourcesRequired, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio; };
interface SVGFEMergeElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { };
interface SVGFEMergeNodeElement : ::svg::SVGElement { readonly attribute SVGAnimatedString in1; };
interface SVGFEMorphologyElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Morphology Operators const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0; const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE = 1; const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE = 2; readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedEnumeration operator; readonly attribute SVGAnimatedNumber radiusX; readonly attribute SVGAnimatedNumber radiusY; };
erode
’.dilate
’.interface SVGFEOffsetElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber dx; readonly attribute SVGAnimatedNumber dy; };
interface SVGFESpecularLightingElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber surfaceScale; readonly attribute SVGAnimatedNumber specularConstant; readonly attribute SVGAnimatedNumber specularExponent; readonly attribute SVGAnimatedNumber kernelUnitLengthX; readonly attribute SVGAnimatedNumber kernelUnitLengthY; };
interface SVGFETileElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; };
interface SVGFETurbulenceElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { // Turbulence Types const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN = 0; const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1; const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE = 2; // Stitch Options const unsigned short SVG_STITCHTYPE_UNKNOWN = 0; const unsigned short SVG_STITCHTYPE_STITCH = 1; const unsigned short SVG_STITCHTYPE_NOSTITCH = 2; readonly attribute SVGAnimatedNumber baseFrequencyX; readonly attribute SVGAnimatedNumber baseFrequencyY; readonly attribute SVGAnimatedInteger numOctaves; readonly attribute SVGAnimatedNumber seed; readonly attribute SVGAnimatedEnumeration stitchTiles; readonly attribute SVGAnimatedEnumeration type; };
fractalNoise
’.turbulence
’.stitch
’.noStitch
’.interface SVGFEDropShadowElement : ::svg::SVGElement, SVGFilterPrimitiveStandardAttributes { readonly attribute SVGAnimatedString in1; readonly attribute SVGAnimatedNumber dx; readonly attribute SVGAnimatedNumber dy; readonly attribute SVGAnimatedNumber stdDeviationX; readonly attribute SVGAnimatedNumber stdDeviationY; };
84 Conference Proceedings, Association
for Computing Machinery, Volume 18, Number 3, July 1984.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
color-interpolation-filters | ||||||
enable-background | accumulate | new | accumulate | Typically elements that can contain renderable elements. language is responsible for defining the applicable set of elements. For SVG: container elements | no | N/A | visual |
feBlend | ||||||
feColorMatrix | ||||||
feComponentTransfer | ||||||
feComposite | ||||||
feConvolveMatrix | ||||||
feDiffuseLighting | ||||||
feDisplacementMap | ||||||
feDistantLight | ||||||
feDropShadow | ||||||
feFlood | ||||||
feFuncA | ||||||
feFuncB | ||||||
feFuncG | ||||||
feFuncR | ||||||
feGaussianBlur | ||||||
feImage | ||||||
feMergeNode | ||||||
feMerge | ||||||
feMorphology | ||||||
feOffset | ||||||
fePointLight | ||||||
feSpecularLighting | ||||||
feSpotLight | ||||||
feTile | ||||||
feTurbulence | ||||||
feUnsharpMask | ||||||
filter-margin | <margin-width>{1,4} | auto | all elements | no | refer to the dimension of the bounding client rect | visual | |
filter-margin-top, filter-margin-right, filter-margin-bottom, filter-margin-left | <margin-width> | auto | all elements | no | refer to the dimension of the bounding client rect | visual | |
filter | none | <filter-function> [ <filter-function> ]* | none | All elements In SVG 1.1 it applies only to "container elements (except ‘mask’) and graphics elements" | no | N/A | visual |
filter | ||||||
flood-color | currentColor | <color> <icccolor>? | black | ‘feFlood’ and ‘feDropShadow’ elements | no | N/A | visual |
flood-opacity | <number> | <percentage> | 1 | ‘feFlood’ and ‘feDropShadow’ elements | no | N/A | visual |
lighting-color | currentColor | <color> <icccolor>? | white | ‘feDiffuseLighting’ and ‘feSpecularLighting’ elements | no | N/A | visual |