SVG is language for describing vector graphics, however it's typically rendered on raster displays. SVG filter effects is a way of processing the generated raster image before it's displayed.
Although originally designed for use in SVG, filter effects are defined in XML and are accessed via a presentation property, and therefore could be used in other environments, such as HTML styled with CSS and XSL:FO.
This document defines the markup used by SVG filters.
Status of This Document
This section describes the status of this document at the time of its
publication. Other documents may supersede this document. The latest status
of this document series is maintained at the W3C.
This document is the first public working draft of this specification.
There is an accompanying Filter Effects 1.0, Part
1: Primer that lists the ways SVG filters may be used.
We explicitly invite comments on this specification. Please send them to
public-fx@w3.org (archives).
Acceptance of the archiving policy is requested automatically upon first post to the
list. To subscribe to the list send an email to public-fx-request@w3.org with
the word subscribe in the subject line.
The latest information regarding patent disclosures
related to this document is available on the Web. As of this publication, the
SVG Working Group are not aware of any royalty-bearing patents they believe
to be essential to SVG.
Publication of this document does not imply endorsement by the W3C
membership. A list of current W3C Recommendations and other technical
documents can be found at http://www.w3.org/TR/. W3C publications may
be updated, replaced, or obsoleted by other documents at any time. It is
inappropriate to cite a W3C Working Draft as anything other than a work
in progress."
How to read this document and give feedback
This draft of Filter Effects 1.0 is essentially the filter chapter from SVG 1.1. One of the goals is that this specification
can be re-used more easily by other specifications that want to have filter
effects. Some things that have been changed are: error handling is more
similar to SVG Tiny 1.2, the addition of a ‘feDropShadow’ filter primitive and the
possibility to filter bitmap data with the DOM.
The main purpose of this document is to encourage public feedback. The
best way to give feedback is by sending an email to public-fx@w3.org. Please
include some kind of keyword that identifies the area of the specification
the comment is referring to in the subject line of your message (e.g "Section
X.Y - the 'filter' property" or "Filtering primitive handling"). If you have
comments on multiple areas of this document, then it is probably best to
split those comments into multiple messages.
The public are welcome to comment on any aspect in this document, but
there are a few areas in which the SVG Working Group are explicitly
requesting feedback. These areas are noted in place within this document.
There is also a specific area related to the specification that is listed
here:
This chapter describes a declarative filter effects feature set, which
when combined with the other web technologies, like SVG or HTML, can describe
much of the common artwork on the Web in such a way that client-side
generation and alteration can be performed easily. In addition, the ability
to apply filter effects to SVG graphics elements and container elements helps to
maintain the semantic structure of the document, instead of resorting to
images which aside from generally being a fixed resolution tend to obscure
the original semantics of the elements they replace. This is especially true
for effects applied to text.
Note that even though this specification references parts of SVG 1.1 it does not require a complete SVG 1.1
implementation. Add link to conformance classes here.
This document is normative.
This document contains explicit conformance criteria that overlap with
some RNG definitions in requirements. If there is any conflict between the
two, the explicit conformance criteria are the definitive reference.
A filter effect consists of a series of graphics operations that are
applied to a given source graphic to produce a modified graphical
result. The result of the filter effect is rendered to the target device
instead of the original source graphic. The following illustrates the
process:
When used in this specification, terms have the meanings assigned in this section.
null filter
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.
The union of all CSS border-boxes for the element if formatted by CSS, as defined by the CSS OM method
getBoundingClientRect [CSSOM].
CSS bounding box
The union of all CSS border-boxes for the element and all it's descendant elements, provided the element is formatted by CSS. [CSS].
current user coordinate system
For elements formatted by CSS: the current user coordinate system has its origin at the top-left corner of the
bounding client rect and one unit equals on CSS px. The viewport for resolving percentage values is defined by the width and height of the
bounding client rect.
Specifies the coordinate system for the various length values within
the filter primitives and for the attributes that define the filter primitive subregion.
If primitiveUnits="userSpaceOnUse", any length values
within the filter definitions represent values in the current user
coordinate system in place at the time when the ‘filter’
element is referenced (i.e., the user coordinate system for the element
referencing the ‘filter’ element via a ‘filter’
property).
If primitiveUnits="objectBoundingBox", then any length
values within the filter definitions represent fractions or percentages
of the bounding box on the referencing element (see object bounding box
units). Note that if only one number was specified in a <number-optional-number> value
this number is expanded out before the ‘primitiveUnits’ computation takes place.
If attribute ‘primitiveUnits’ is not
specified, then the effect is as if a value of userSpaceOnUse were specified. Animatable: yes.
Specifies the coordinate system for the margin attributes within the
filter primitives which is used for determining the filter primitive subregion.
If primitiveMarginUnits="userSpaceOnUse", any margin
attribute values within the filter definitions 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 primitiveMarginUnits="objectBoundingBox", then any
margin attribute values within the filter definitions represent
fractions or percentages of the bounding box on the referencing element
(see object bounding box units). The lacuna value for ‘primitiveMarginUnits’ is userSpaceOnUse. Animatable: yes.
The margin delta for the x coordinate of the subregion which
restricts calculation and rendering of the given filter primitive. If
this attribute is not specified, the effect is as if a value of 0 were specified. See filter primitive subregion. Animatable: yes.
The margin delta for the y coordinate of the subregion which
restricts calculation and rendering of the given filter primitive. If
this attribute is not specified, the effect is as if a value of 0 were specified. See filter primitive subregion. Animatable: yes.
The margin delta for the width of the subregion which restricts
calculation and rendering of the given filter primitive. If this
attribute is not specified, the effect is as if a value of 0 were specified. See filter primitive subregion. Animatable: yes.
The margin delta for the height of the subregion which restricts
calculation and rendering of the given filter primitive. If this
attribute is not specified, the effect is as if a value of 0 were specified. See filter primitive subregion. Animatable: yes.
An IRI reference
to another ‘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.
This attribute is deprecated and should not be used, it's included for
backwards compatibility reasons only.
Animatable: yes.
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.
4 The ‘filter’
property
The description of the ‘filter’ property is
as follows:
An IRI reference
to a ‘filter’ element which defines the
filter effects that shall be applied to this element.
none
Do not apply any filter effects to this element.
If a ‘filter’ property references a non-existent object or the referenced
object is not a ‘filter’ element, then the null filter will be applied instead.
How the 'filter' property applies to content formatted by CSS (e.g HTML)
The application of the ‘filter’ property to an element formatted by CSS establishes a pseudo-stacking-context the same way
that CSS 'opacity' does,
and all the element's boxes 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:
first any filter effect is applied, then any clipping, masking and/or group opacity.
These effects all apply after any other CSS effects such as 'clip'. As per SVG, the application of ‘filter’ has no effect on mouse event hit-testing.
5 Filter effects region
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.
5.1 Filter Region extensions
In SVG 1.1, a filter
defines the area upon which it applies. This makes it difficult to develop a
generic filter that can be applied to arbitrary graphics, since the filter
must define a large enough area to cover any graphical object to which it is
applied. An example of this is a generic "drop shadow" filter, which is
commonly specified as a combination of a Gaussian blur ‘feGaussianBlur’) that is offset ‘feOffset’) and then composed ‘feComposite’) with the original source graphic.
Since the shadow has to extend beyond the original graphic's boundaries, the
filter must be defined to have a larger area than the original graphic.
Overestimating this margin has a negative effect on performance, since the
complex filter operation has to touch a larger amount of user space (ie.
pixels).
In order to solve this problem this spec allows additional control over
the filter region. The outer filter region is expressed by delta to the
‘x’,
‘y’,
‘width’,
‘height’
of the input filter region.
In particular, the ‘filterMarginUnits’, ‘primitiveMarginUnits’,
‘mx’, ‘my’, ‘mw’ and ‘mh’ are
added to the ‘filter’ element. The ‘filterMarginUnits’ specifies the coordinate space of
the margin attributes, which are used to increase or decrease the ‘filter’ element's
‘x’,
‘y’,
‘width’ and
‘height’
attributes (once they have been calculated). The ‘primitiveMarginUnits’ specifies the units for the
new margin attributes on the filter primitives, also named
‘mx’,
‘my’,
‘mw’,
‘mh’.
These margins attribute override those set on the parent ‘filter’ element.
Note that this doesn't mean that a can expand the filter region itself, just that the
coordinate system used for filter primitive's margin attributes can be
different than the one used for the margin attributes on the
‘filter’ element.
An example of the new attributes, which defines a generic drop shadow
filter:
In the above example, the filter region by default covers the entire
bounds of the object (which is not enough to show the shadow). Adding the new
margins extends the width and height by 5 user units each, which is always
enough to display the blur (which has a standard deviation of 2 user units)
and offset (which is another 2 units).
The ‘filter’
element has the following attributes which work together to define the filter
effects region:
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).
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.
If filterMarginUnits="objectBoundingBox", then ‘mx’, ‘my’,
‘mw’, ‘mh’ represent fractions or percentages of the
on the referencing element (see object bounding box units).
Defines the width and height of the intermediate
images in pixels. If not provided, then a reasonable default resolution
appropriate for the target device will be used. (For displays, an
appropriate display resolution, preferably the current display's pixel
resolution, is the default. For printing, an appropriate common printer
resolution, such as 1200dpi, is the default.)
Care should be taken when assigning a non-default value to this
attribute. Too small of a value may result in unwanted pixelation in the
result. Too large of a value may result in slow processing and large
memory usage.
Negative 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.
It is often necessary to provide padding space because the filter effect
might impact bits slightly outside the tight-fitting on a given
object. For these purposes, it is possible to provide negative percentage
values for ‘x’, ‘y’ and percentages values greater than 100% for
‘width’, ‘height’. This, for example, is why the defaults for
the filter effects region are x="-10%" y="-10%" width="120%"
height="120%".
6 Accessing the background image
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.
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’:
Typically elements that can contain renderable elements.
language is responsible for defining the applicable set of
elements.
For SVG: container elements
It enables the ability of children of the current container element
element to access the background image.
It indicates that a new (i.e., initially transparent black) background
image canvas is established and that (in effect) all children of the
current container element
element shall be rendered into the new background image canvas in
addition to being rendered onto the target device.
A meaning of enable-background: accumulate (the
initial/default value) depends on context:
If an ancestor container element
element has a property value of '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.
Otherwise, there is no current background image canvas, so it is only
necessary to render graphics elements
the renderable elements onto the target device. (No need to render to the
background image canvas.)
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.
The optional
<x>,<y>,<width>,<height>ISSUE: define the type of each of these, probably <number>
parameters
on the new value indicate the subregion of the container element
element to which ‘enable-background’ applies' user space where access to the
background image is allowed to happen. These parameters enable the user
agent potentially to allocate smaller temporary image buffers than the
default values, which might require the user agent to allocate buffers as
large as the current viewport. Thus, the values
<x>,<y>,<width>,<height> act as a clipping rectangle
on the background image canvas. If more than zero but less than four of the
values <x>,<y>,<width> and <height> are specified or
if negative or zero values are specified for <width> or <height>,
BackgroundImage and BackgroundAlpha are processed as if background
image processing were not enabled.
6.1 Accessing the background image in SVG
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:
Find the element Ai with the smallest subscript i (including
A0=E) for which the ‘enable-background’ property has the value
new. (Note: if there is no such ancestor
element, then there is no background image available to E, in which case
a transparent black image will be used as E's background image.)
For each Ai (from i=n to 1), initialize BUFi to
transparent black. Render all children of Ai up to but not
including Ai-1 into BUFi. The children are painted,
then filtered, clipped, masked and composited using the various painting,
filtering, clipping, masking and object opacity settings on the given
child. Any filter effects, masking and group opacity that might be set on
Ai do not apply when rendering the children of
Ai into BUFi.
(Note that for the case of A0=E, the graphical contents of E
are not rendered into BUF1 and thus are not part of the
background image available to E. Instead, the graphical contents of E are
available via the SourceGraphic and SourceAlpha pseudo input images.)
Then, for each Ai (from i=1 to n-1), composite
BUFi into BUFi+1.
The accumulated result (i.e., BUFn) represents the
background image available to E.
<?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>
The example above contains five parts, described as follows:
The first set is the reference graphic. The reference graphic consists
of a red rectangle followed by a 50% transparent ‘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.
The second set enables background image processing and adds an empty
‘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.
The third set enables background image processing and instead invokes
the ShiftBGAndBlur filter on the inner ‘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.
The fourth set enables background image processing and invokes the
ShiftBGAndBlur on the ‘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.
The fifth set is the same as the fourth except that filter
ShiftBGAndBlur_WithSourceGraphic is invoked instead of ShiftBGAndBlur.
ShiftBGAndBlur_WithSourceGraphic performs the same effect as
ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted,
blurred background image. In this case, SourceGraphic is the blue
triangle; thus, the result is the same as in the fourth case except that
the blue triangle now appears.
7 Filter primitives overview
7.1 Overview
This section describes the various filter primtives that can be assembled
to achieve a particular filter effect.
Unless otherwise stated, all image filters operate on premultiplied RGBA
samples. Filters which work more naturally on non-premultiplied data
(‘feColorMatrix’ and ‘feComponentTransfer’) will temporarily undo and redo
premultiplication as specified. All raster effect filtering operations take 1
to N input RGBA images, additional attributes as parameters, and produce a
single output RGBA image.
The RGBA result from each filter primitive will be clamped into the
allowable ranges for colors and opacity values. Thus, for example, the result
from a given filter primitive will have any negative color values or opacity
values adjusted up to color/opacity of zero.
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.
7.2 Common attributes
The following attributes are available for most of the filter
primitives:
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.
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:
SourceGraphic
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.)
SourceAlpha
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.
BackgroundImage
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.
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.
ISSUE: Consider whether this should be e.g the CSS bounding box filled with the current color, or if it makes sense to use the 'fill' property for this case too.
Note that text is generally painted filled, not stroked.
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.
StrokePaint
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.
ISSUE: Consider whether this should be e.g the CSS bounding box filled with the one of the border colors, or if it makes sense to use the 'stroke' property for this case too.
Note that text is generally painted filled, not stroked.
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.
‘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 percentages are relative to the
dimensions of the filter region.
After the x, y, width,
height have been calculated for the filter primitive
subregion the margin attributes mx, my,
mw, mh are calculated and added to the
former to make the filter primitive subregion. If the filter primitive
subregion has a negative or zero width or height, the effect of the filter
primitive is disabled.
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.
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.
The upper left rect shows an ‘feFlood’ with flood-opacity="75%" so the cross should be visible through the green rect in the middle.
The lower left rect shows an ‘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.
The upper right rect shows an ‘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.
Direction angle for the light source on the XY plane (clockwise), in
degrees.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Direction angle for the light source on the YZ plane, in degrees.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
X location for the light source in the coordinate system established
by attribute ‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Y location for the light source in the coordinate system established
by attribute ‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Z location for the light source in the coordinate system established
by attribute ‘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.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
X location for the light source in the coordinate system established
by attribute ‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Y location for the light source in the coordinate system established
by attribute ‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Z location for the light source in the coordinate system established
by attribute ‘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.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
X location in the coordinate system established by attribute ‘primitiveUnits’
on the ‘filter’
element of the point at which the light source is pointing.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Y location in the coordinate system established by attribute ‘primitiveUnits’
on the ‘filter’ element of the point at which the light source is pointing.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Z location in the coordinate system established by the
attribute ‘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.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
Exponent value controlling the focus for the light source.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
A limiting cone which restricts the region where the light is
projected. No light is projected outside the cone. limitingConeAngle represents the angle in degrees between
the spot light axis (i.e. the axis between the light source and the
point to which it is pointing at) and the spot light cone. User agents
should apply a smoothing technique such as anti-aliasing at the
boundary of the cone.
If no value is specified, then no limiting cone will be applied. Animatable: yes.
This filter composites two objects together using commonly used imaging
software blending modes. It performs a pixel-wise combination of two input
images.
The second input image to the blending operation. This attribute can
take on the same values as the in attribute. Animatable: yes.
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:
ED: make table look nicer
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)
'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.
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 =
"matrix | saturate | hueRotate | luminanceToAlpha"
Indicates the type of matrix operation. The keyword matrix indicates that a full 5x4 matrix of
values will be provided. The other keywords represent convenience
shortcuts to allow commonly used color operations to be performed
without specifying a complete matrix. Animatable: yes.
The contents of values depends on the
value of attribute type:
For type="matrix", values is a list of 20 matrix values (a00
a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a
comma. For example, the identity matrix could be expressed as:
For type="saturate", values is a single real number value (0 to
1). A saturate operation is
equivalent to the following matrix operation:
For type="hueRotate", values is a single one real number value
(degrees). A hueRotate operation is
equivalent to the following matrix operation:
where the terms a00, a01, etc. are calculated as follows:
Thus, the upper left term of the hue matrix turns out to be:
For type="luminanceToAlpha",
values is not applicable. A luminanceToAlpha operation is equivalent
to the following matrix operation:
If the attribute is not specified, then the default behavior depends on
the value of attribute ‘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
identify matrix. If type="hueRotate",
then this attribute defaults to the value 0, which results in the identify matrix. 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="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>
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 attributes below are the
transfer function element attributes,
which apply to the transfer function elements.
Attribute definitions:
type
= "identity | table | discrete | linear | gamma"
Indicates the type of component transfer function. The type of
function determines the applicability of the other attributes.
For identity:
C' = C
For table, the function is
defined by linear interpolation into a lookup table by attribute tableValues, which provides a list of
n+1 values (i.e., v0 to vn) in order
to identify n interpolation ranges. Interpolations use the
following formula.
For a value C pick a k such that:
k/N <= C < (k+1)/N
The result C' is given by:
C' = vk + (C - k/N)*N *
(vk+1 - vk)
For discrete, the function is
defined by the step function defined by attribute 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 pick a k such that:
k/N <= C < (k+1)/N
The result C' is given by:
C' = vk
For linear, the function is
defined by the following linear equation:
When type="table", the list of
<number>
s v0,v1,...vn, separated by white space and/or a comma, which
define the lookup table. An empty list results in an identity transfer
function. If the attribute is not specified, then the effect is as if
an empty list were provided. Animatable: yes.
When type="linear", the slope of the
linear function.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
When type="linear", the intercept of
the linear function.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
When type="gamma", the amplitude of
the gamma function.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
When type="gamma", the exponent of
the gamma function.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
When type="gamma", the offset of the
gamma function.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
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. 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 + k4
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
= "over | in | out | atop | xor | arithmetic"
The compositing operation that is to be performed. All of the operator types except arithmetic match the correspond operation as
described in [PORTERDUFF]. The arithmetic operator is described above. Animatable: yes.
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:
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:
and you define a 3-by-3 convolution kernel as follows:
1 2 3
4 5 6
7 8 9
ED: Consider making this into mathml
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:
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.
Indicates the number of cells in each dimension for ‘kernelMatrix’. The values provided must be
<integer>
s greater than 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>.
A typical value is order="3". It is recommended that only small values
(e.g., 3) be used; higher values may result in very high CPU overhead
and usually do not produce results that justify the impact on
performance.
If the attribute is not specified, the effect is as if a value of "3"
were specified. Animatable: yes.
kernelMatrix = "<list of
numbers>"
The list of <number>
s that make up the kernel matrix for the convolution. Values are
separated by space characters and/or a comma. The number of entries in
the list must equal <orderX> times <orderY>. Animatable: yes.
After applying the kernelMatrix to the
input image to yield a number, that number is divided by ‘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 default 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. Animatable: yes.
After applying the kernelMatrix to the
input image to yield a number and applying the ‘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. If
‘bias’ is not specified, then the effect
is as if a value of zero were specified. Animatable: yes.
Determines the positioning in X of the convolution matrix relative to
a given target pixel in the input image. The leftmost column of the
matrix is column number zero. The value must be such that: 0 <=
targetX < orderX. By default, the convolution matrix is centered in
X over each pixel of the input image (i.e., targetX = floor ( orderX /
2 )). Animatable: yes.
Determines the positioning in Y of the convolution matrix relative to
a given target pixel in the input image. The topmost row of the matrix
is row number zero. The value must be such that: 0 <= targetY <
orderY. By default, the convolution matrix is centered in Y over each
pixel of the input image (i.e., targetY = floor ( orderY / 2 )). Animatable: yes.
edgeMode = "duplicate | wrap |
none"
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.
The first number is the <dx> value. The second number is the
<dy> value. If the <dy> value is not specified, it defaults
to the same value as <dx>. Indicates the intended distance in
current filter units (i.e., units as determined by the value of
attribute ‘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.
If a negative or zero value is specified the default value will be used
instead. Animatable: yes.
preserveAlpha = "false |
true"
A value of false indicates that the
convolution will apply to all channels, including the alpha channel.
A value of true indicates that the
convolution will only apply to the color channels. In this case, the
filter will temporarily unpremultiply the color component values, apply
the kernel, and then re-premultiply at the end.
If ‘preserveAlpha’ is not specified, then
the effect is as if a value of false
were specified. Animatable: yes.
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:
ED: Consider making the following in mathml
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
kd = diffuse lighting constant
N = surface normal unit vector, a function of x and y
L = unit vector pointing from surface to light, a function of x and y
in the point and spot light cases
Lr,Lg,Lb = RGB components of light, a
function of x and y in the spot light case
N is a function of x and y and depends on the surface gradient as
follows:
The surface described by the input alpha image Ain(x,y) is:
Z (x,y) = surfaceScale * Ain(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:
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’.
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.
kd in Phong lighting model. In SVG, this can be any non-negative
number.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
The first number is the <dx> value. The second number is the
<dy> value. If the <dy> value is not specified, it defaults
to the same value as <dx>. Indicates the intended distance in
current filter units (i.e., units as determined by the value of
attribute ‘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’.
If a negative or zero value is specified the default value will be used
instead. Animatable: yes.
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.
Displacement scale factor. The amount is expressed in the coordinate
system established by attribute ‘primitiveUnits’ on the ‘filter’
element.
When the value of this attribute is 0,
this operation has no effect on the source image.
The second input image, which is used to displace the pixels in the
image from attribute ‘in’. This attribute can take on the same
values as the ‘in’ attribute. Animatable: yes.
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.
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.
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(-x^2/ (2s^2)) / sqrt(2* pi*s^2)
and
I(y) = exp(-y^2/ (2t^2)) / sqrt(2* pi*t^2)
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.
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, this operation has no effect. If the input has infinite extent and
is a tile, the filter is evaluated with periodic boundary conditions.
The standard deviation for the blur operation. If two <number>
s are provided, the first number represents a standard deviation value
along the x-axis of the coordinate system established by attribute ‘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.
A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
The example at the start of this chapter makes
use of the ‘feGaussianBlur’ filter primitive
to create a drop shadow effect.
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:
xlink:href =
"<IRI>"
An IRI reference
to an image resource or to an element.
Animatable: yes.
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.
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.
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, this operation has no
effect. If the input has infinite extent and is a tile, the filter is
evaluated with periodic boundary conditions.
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 = "erode | dilate"
A keyword indicating whether to erode (i.e., thin) or dilate (fatten)
the source graphic. Animatable: yes.
The radius (or radii) for the operation. If two <number>
s are provided, the first number represents a x-radius and the second
value represents a y-radius. If one number is provided, then that value
is used for both X and Y. The values are in the coordinate system
established by attribute ‘primitiveUnits’ on the ‘filter’
element.
A negative or zero value disables the effect of the given filter
primitive (i.e., the result is a transparent black image).
If the attribute is not specified, then the effect is as if a value of
0 were specified. 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="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>
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.
The amount to offset the input graphic along the x-axis. The offset
amount is expressed in the coordinate system established by attribute
‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
The amount to offset the input graphic along the y-axis. The offset
amount is expressed in the coordinate system established by attribute
‘primitiveUnits’ on the ‘filter’
element.
If the attribute is not specified, then the effect is as if a value of
0 were specified. Animatable: yes.
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.
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
ks = specular lighting constant
N = surface normal unit vector, a function of x and y
H = "halfway" unit vector between eye unit vector and light unit
vector
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.
ks in Phong lighting model. In SVG, this can be any non-negative
number.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
Exponent for specular term, larger is more "shiny". Range 1.0 to
128.0.
If the attribute is not specified, then the effect is as if a value of
1 were specified. Animatable: yes.
The first number is the <dx> value. The second number is the
<dy> value. If the <dy> value is not specified, it defaults
to the same value as <dx>. Indicates the intended distance in
current filter units (i.e., units as determined by the value of
attribute ‘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.
If a negative or zero value is specified the default value will be used
instead. Animatable: yes.
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.
25 Filter primitive ‘feTurbulence’
ISSUE: 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.
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;
}
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.
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.
stitchTiles = "stitch | noStitch"
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.
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:
Composite the result of the ‘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"/>
Finally merge the result of the previous step, doing processing as if
the following ‘feMerge’ was performed:
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.
The SVG WG is looking at providing a shorthand for diffuse+specular.
28 Filter primitive ‘feCustom’
The SVG WG is looking to add a filter primitive that allows programmatic access
to the pixel data for a filter, e.g via OpenCL.
29 RelaxNG Schema for Filter Effects 1.0
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.
30 DOM interfaces
The interfaces below will be made available in a IDL file for an upcoming draft.
30 DOM interfaces
31.1 Interface ImageData
The ImageData interface corresponds to pixel data that can be used as input to the SVGFilterElement interface.
interface ImageData {
readonly attribute long width;
readonly attribute long height;
readonly attribute data;
};
Attributes:
width (readonly long)
The width of the bitmap that the ImageData represents.
height (readonly long)
The height of the bitmap that the ImageData represents.
data (readonly )
An array of pixel values that is the bitmap. This array must
always be in the form of width×height×4 integer values. The
pixel data is in left-to-right order, starting from the top-left
corner, and going row by row downwards. Every pixel is
represented by four integer values, red, green, blue and alpha,
in that order. The range of each color component is 0..255. The
intent is that this is compatible with the HTML5 [HTML5]
canvas interfaces, in particular see
ImageData.
Corresponds to attribute ‘filterRes’ on the given ‘filter’
element. Contains the Y component (possibly computed automatically) of
attribute ‘filterRes’.
Operations:
void setFilterRes(in unsigned long filterResX, in unsigned long filterResY)
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
Corresponds to attribute ‘operator’ on the given ‘feComposite’
element. Takes one of the SVG_FECOMPOSITE_OPERATOR_* constants defined
on this interface.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
Corresponds to attribute ‘xChannelSelector’ on the given
‘feDisplacementMap’ element. Takes one of the SVG_CHANNEL_*
constants defined on this interface.
Corresponds to attribute ‘yChannelSelector’ on the given
‘feDisplacementMap’ element. Takes one of the SVG_CHANNEL_*
constants defined on this interface.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
Corresponds to attribute ‘operator’ on the given ‘feMorphology’
element. Takes one of the SVG_MORPHOLOGY_OPERATOR_* constants
defined on this interface.
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
SVG_TURBULENCE_TYPE_FRACTALNOISE (unsigned short)
Corresponds to value 'fractalNoise'.
SVG_TURBULENCE_TYPE_TURBULENCE (unsigned short)
Corresponds to value 'turbulence'.
Constants in group “Stitch Options”:
SVG_STITCHTYPE_UNKNOWN (unsigned short)
The type is not one of predefined types. It is invalid to attempt to
define a new value of this type or to attempt to switch an existing
value to this type.
Document Schema Definition Languages (DSDL) — Part 4:
Namespace-based Validation Dispatching Language — NVDL. ISO/IEC FCD
19757-4, See http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/
[PORTERDUFF]
Compositing Digital Images, T. Porter, T. Duff,
SIGGRAPH '84 Conference Proceedings, Association for Computing
Machinery, Volume 18, Number 3, July 1984.
