filters/master/Filters.html@b31bb9367aef
filters/master/Filters.html
Wed, 07 Sep 2011 10:26:03 +1000
- author
- Dean Jackson <dino@apple.com>
- date
- Wed, 07 Sep 2011 10:26:03 +1000
- changeset 36
- b31bb9367aef
- parent 34
- cc281b90a47a
- child 40
- 3f1fdd4a8004
- permissions
- -rw-r--r--
- Added opacity function
- Corrected luminanceToAlpha values
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"
4 xmlns:edit="http://xmlns.grorg.org/SVGT12NG/" xml:lang="en" lang="en">
5 <head>
6 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
7 <title>Filter Effects 1.0: Language</title>
8 <link rel="stylesheet" type="text/css" href="style/svg-style.css" />
9 <link rel="stylesheet" type="text/css" href="style/svg-style-extra.css"/>
10 </head>
12 <body>
14 <div class="head">
15 <p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
16 <h1 id="pagetitle">Filter Effects 1.0: Language</h1>
17 <h2 id="pagesubtitle">W3C <edit:maturity/> <em><edit:date/></em></h2>
18 <dl>
19 <dt>This version:</dt>
20 <dd><edit:thisversion/></dd>
21 <dt>Latest version:</dt>
22 <dd><edit:latestversion/></dd>
23 <dt>Previous version:</dt>
24 <dd><edit:previousversion/></dd>
25 <dt>Editors:</dt>
26 <dd><a href="mailto:ed@opera.com">Erik Dahlström</a>, (<a href="http://www.opera.com/">Opera Software ASA</a>)</dd>
27 <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a href="http://www.apple.com/">Apple Inc</a>)</dd>
28 <dt>Authors:</dt>
29 <dd>The authors of this specification are the participants of the W3C SVG and CSS Working Groups.</dd>
30 </dl>
31 <edit:copyright/>
32 </div>
34 <hr/>
36 <h2 id="abstract" edit:toc="no">Abstract</h2>
38 <p>
39 Filter effects are a way of processing an element's display before it is
40 displayed in the document. Typically, rendering an element via CSS or SVG
41 can conceptually described as if the element, including its children, are
42 drawn into a buffer (such as a raster image) and then that buffer is
43 composited into the elements parent. Filters apply an effect before the
44 compositing stage. Examples of such effects are blurring, changing color
45 intensity and warping the image.
46 </p>
48 <p>
49 Although originally designed for use in SVG, filter effects simply define
50 a set of operations to apply on an image buffer. In SVG they are triggered
51 by a style instruction (the 'filter property' property), and have very little
52 specific to an SVG environment. This specification describes filters in
53 a manner that allow them to be used in other presentational environments,
54 such as HTML styled by CSS and XSL:FO. It also defines a CSS property
55 value function that allows a filter chain to produce a CSS <image> value.
56 </p>
58 <h2 id="status" edit:toc="no">Status of This Document</h2>
60 <p><em>This section describes the status of this document at the time of its
61 publication. Other documents may supersede this document. The latest status
62 of this document series is maintained at the W3C. </em> </p>
64 <p>
65 This document is the first public working draft of this specification. There
66 is an accompanying <a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilterPrimer.html">Filter Effects 1.0, Part 1:
67 Primer</a> that lists the ways SVG filters may be used.
68 </p>
70 <p>
71 This document has been produced by the <a
72 href="http://www.w3.org/Style/CSS">W3C CSS</a> and <a
73 href="http://www.w3.org/Graphics/SVG">SVG</a> Working Groups as part of the
74 <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>.
75 </p>
77 <p>
78 The (<a href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>)
79 public mailing list <a
80 href="mailto:www-style@w3.org?Subject=%5Bfilters%5D%20PUT%20SUBJECT%20HERE">
81 public-fx@w3.org</a> (see <a
82 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
83 discussion of this specification. Acceptance of the archiving policy is
84 requested automatically upon first post to the list. When sending e-mail,
85 please put the text “filters” in the subject, preferably like
86 this: “[<!---->filters<!---->] <em>…summary of
87 comment…</em>”
88 </p>
90 <p>
91 The latest information regarding <a
92 href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a>
93 related to this document is available on the Web. As of this publication,
94 the SVG Working Group are not aware of any royalty-bearing patents they
95 believe to be essential to SVG. <span class="note">[@@ Add patent link for CSS WG]</span>
96 </p>
98 <p>
99 Publication of this document does not imply endorsement by the W3C
100 membership. A list of current W3C Recommendations and other technical
101 documents can be found at <a
102 href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>. W3C publications may
103 be updated, replaced, or obsoleted by other documents at any time. It is
104 inappropriate to cite a W3C Working Draft as anything other than a <em>work
105 in progress</em>."
106 </p>
108 <p>
109 The <a href="ChangeLog">list of changes made to this specification</a> is
110 available.
111 </p>
113 <edit:fulltoc/>
115 <h2 id="introduction">Introduction</h2>
117 <p>
118 This chapter describes a declarative filter effects feature set, which when
119 combined with the other web technologies, such as SVG or HTML, can describe
120 much of the common artwork on the Web in such a way that client-side
121 generation and alteration can be performed easily. In addition, the ability
122 to apply filter effects to elements helps to maintain the semantic
123 structure of the document, instead of resorting to images which aside from
124 generally being a fixed resolution tend to obscure the original semantics of
125 the elements they replace. This is especially true for effects applied to
126 text.
127 </p>
129 <p>
131 </p>
133 <p>
134 Note that even though this specification references parts of <a
135 href="#ref-svg11">SVG 1.1</a> it does not require an SVG 1.1
136 implementation. <span class="note">Add link to conformance classes
137 here.</span>
138 </p>
140 <p>This document is normative.</p>
142 <p>This document contains explicit conformance criteria that overlap with
143 some RelaxNG definitions in requirements. If there is any conflict between the
144 two, the explicit conformance criteria are the definitive reference. </p>
146 <p>A filter effect consists of a series of graphics operations that are
147 applied to a given <span id="TermSourceGraphic" class="SVG-Term">source graphic</span> to produce a modified graphical
148 result. The result of the filter effect is rendered to the target device
149 instead of the original source graphic. The following illustrates the
150 process:</p>
152 <p><object data="examples/filters00.svg" type="image/svg+xml" height="78" width="400">
153 <img alt="Image showing source graphic transformed by filter effect"
154 src="examples/filters00.png" width="401" height="78" />
155 </object></p>
156 <p class="view-as-svg"><a href="examples/filters00.svg">View this example as
157 SVG (SVG-enabled browsers only)</a><br />
158 </p>
160 <h2 id="FilterDefinitions">Definitions</h2>
161 <p>When used in this specification, terms have the meanings assigned in this section.</p>
162 <dl>
163 <dt id="TermNullFilter"><span
164 class="SVG-TermDefine">null filter</span></dt>
165 <dd>
166 <p>
167 The null filter output is all transparent black pixels. If applied to an element it means
168 that the element (and children if any) becomes invisible. Note that it does not affect event processing.
169 </p>
170 </dd>
171 <dt id="TermTransferFunctionElements"><span
172 class="SVG-TermDefine">transfer function elements</span></dt>
173 <dd>
174 <p>
175 The set of elements,
176 <a>'feFuncR'</a>, <a>'feFuncG'</a>, <a>'feFuncB'</a>, <a>'feFuncA'</a>, that define the transfer function for the <a>'feComponentTransfer'</a> filter primitive.
177 </p>
178 </dd>
179 <dt id="TermClientBoundingRect"><span
180 class="SVG-TermDefine">bounding client rect</span></dt>
181 <dd>
182 <p>
183 The union of all CSS border-boxes for the element if formatted by CSS, as defined by the CSS OM method
184 <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a> [<a href="#ref-CSSOM">CSSOM</a>].
185 </p>
186 </dd>
187 <dt id="TermCSSBoundingBox"><span
188 class="SVG-TermDefine">CSS bounding box</span></dt>
189 <dd>
190 <p>
191 The union of all CSS border-boxes for the element and all it's descendant elements, provided the element is formatted by CSS. [<a href="#ref-CSS21">CSS</a>].
192 </p>
193 </dd>
194 <dt id="TermCurrentUserCoordinateSystem"><span
195 class="SVG-TermDefine">current user coordinate system</span></dt>
196 <dd>
197 <p>
198 For elements formatted by CSS: the current user coordinate system has its origin at the top-left corner of the
199 <a href="#TermClientBoundingRect">bounding client rect</a> and one unit equals on CSS px. The viewport for resolving percentage values is defined by the width and height of the
200 <a href="#TermClientBoundingRect">bounding client rect</a>.
201 </p>
202 <p>
203 For SVG elements see <a>user coordinate system</a>.
204 </p>
205 </dd>
206 <dt id="TermObjectBoundingBoxUnits"><span
207 class="SVG-TermDefine">object bounding box units</span></dt>
208 <dd>
209 For elements formatted by CSS: the bounding box is defined by <a href="#TermCSSBoundingBox">the CSS bounding box.</a>
210 <p>
211 For SVG elements the bounding box is defined by <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermBoundingBox">the SVG bounding box</a>.
212 </p>
213 <p>
214 For both cases the bounding box defines the coordinate system in which to resolve values, as defined in <a>object bounding box units</a>.
215 </p>
216 </dd>
217 <dt id="TermFilterPrimitiveReference"><span
218 class="SVG-TermDefine"><filter-primitive-reference></span></dt>
219 <dd>
220 <p>
221 A string that identifies a particular filter primitive's output.
222 </p>
223 </dd>
224 <dt id="TermFilterPrimitiveElements"><span
225 class="SVG-TermDefine">filter primitives, filter primitive elements</span></dt>
226 <dd>
227 <p>
228 The set of elements that control the output of a <a>'filter element'</a> element, particularly:
229 <a>'feDistantLight'</a>,
230 <a>'fePointLight'</a>,
231 <a>'feSpotLight'</a>,
232 <a>'feBlend'</a>,
233 <a>'feColorMatrix'</a>,
234 <a>'feComponentTransfer'</a>,
235 <a>'feComposite'</a>,
236 <a>'feConvolveMatrix'</a>,
237 <a>'feDiffuseLighting'</a>,
238 <a>'feDisplacementMap'</a>,
239 <a>'feFlood'</a>,
240 <a>'feGaussianBlur'</a>,
241 <a>'feImage'</a>,
242 <a>'feMerge'</a>,
243 <a>'feMorphology'</a>,
244 <a>'feOffset'</a>,
245 <a>'feSpecularLighting'</a>,
246 <a>'feTile'</a>,
247 <a>'feTurbulence'</a>,
248 <a>'feDropShadow'</a>,
249 <a>'feDiffuseSpecular'</a>,
250 <a>'feUnsharpMask'</a>,
251 <a>'feCustom'</a>.
252 </p>
253 </dd>
254 </dl>
255 <br/>
257 <h2 id="FilterProperty">The <span class="prop-name">'filter'</span>
258 property</h2>
260 <p>The description of the <span class="prop-name">'filter'</span> property is
261 as follows:</p>
263 <div class="propdef">
264 <dl>
265 <dt id='propdef-filter'><span class='propdef-title prop-name'>'filter'</span></dt>
266 <dd>
267 <table summary="filter property" class="propinfo" cellspacing="0"
268 cellpadding="0">
269 <tbody>
270 <tr valign="baseline">
271 <td><em>Value:</em> </td>
272 <td>none | <a href="#FilterFunction"><filter-function></a> [ <a href="#FilterFunction"><filter-function></a> ]* </td>
273 </tr>
274 <tr valign="baseline">
275 <td><em>Initial:</em> </td>
276 <td>none</td>
277 </tr>
278 <tr valign="baseline">
279 <td><em>Applies to:</em> </td>
280 <td>All elements</td>
281 </tr>
282 <tr valign="baseline">
283 <td><em>Inherited:</em> </td>
284 <td>no</td>
285 </tr>
286 <tr valign="baseline">
287 <td><em>Percentages:</em> </td>
288 <td>N/A</td>
289 </tr>
290 <tr valign="baseline">
291 <td><em>Media:</em> </td>
292 <td>visual</td>
293 </tr>
294 <tr valign="baseline">
295 <td><em>Animatable:</em> </td>
296 <td>yes</td>
297 </tr>
298 </tbody>
299 </table>
300 </dd>
301 </dl>
302 </div>
304 <p>
305 If the value of the <a>'filter property'</a> property is <span class="prop-value">none</span> then there
306 is no filter effect applied. Otherwise, the list of functions (described <a href="#FilterFunction">below</a>)
307 are applied in order.
308 </p>
310 <h3 id="filters-in-css">How the <a>'filter property'</a> property applies to content formatted by CSS (e.g HTML)</h3>
311 <p>
312 The application of the <a>'filter property'</a> property to an element
313 formatted by CSS establishes a pseudo-stacking-context the same way that CSS
314 <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does,
315 and all the element's boxes are rendered together as a group with the filter
316 effect applied to the group as a whole.
317 </p>
318 <p>
319 The <a>'filter property'</a> property has no effect on the geometry of the
320 target element's CSS boxes, even though <a>'filter property'</a> can cause
321 painting outside of an element's border-box.
322 </p>
323 <p>
324 The compositing model follows the <a
325 href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing
326 model</a>: first any filter effect is applied, then any clipping, masking
327 and opacity. These effects all apply after any other CSS effects such as
328 'border'. As per SVG, the application of <a>'filter property'</a> has no
329 effect on hit-testing.
330 </p>
332 <br />
334 <h2 id="FilterFunction">Filter Functions</h2>
336 <p>
337 The value of the <a>'filter property'</a> property is a list of <filter-functions>
338 applied in the order provided. The individual filter functions are
339 separated by whitespace. The set of allowed filter functions is given
340 below.
341 </p>
343 <dl>
344 <dt>
345 <a><FuncIRI></a>
346 </dt>
347 <dd>
348 An <a>IRI reference</a>
349 to a <a>'filter element'</a> element that defines the
350 filter effect. For example "url(commonfilters.xml#large-blur)". If the IRI references a non-existent object or the referenced
351 object is not a <a>'filter element'</a> element, then the <a>null filter</a> will be applied instead.
352 </dd>
354 <dt>
355 grayscale(amount)
356 </dt>
357 <dd>
358 Converts the input image to grayscale. The value of 'amount' defines the proportion
359 of the conversion. A value of 1 is completely grayscale. A value of 0 leaves the
360 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
361 If the 'amount' parameter is missing, a value of 1 is used.
362 The markup equivalent of this function is <a href="#grayscaleEquivalent">given below</a>.
363 </dd>
365 <dt>
366 sepia(amount)
367 </dt>
368 <dd>
369 Converts the input image to sepia. The value of 'amount' defines the proportion
370 of the conversion. A value of 1 is completely sepia. A value of 0 leaves the
371 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
372 If the 'amount' parameter is missing, a value of 1 is used.
373 The markup equivalent of this function is <a href="#sepiaEquivalent">given below</a>.
374 </dd>
376 <dt>
377 saturate(amount)
378 </dt>
379 <dd>
380 Saturates the input image. The value of 'amount' defines the proportion
381 of the conversion. A value of 1 is completely saturated. A value of 0 leaves the
382 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
383 If the 'amount' parameter is missing, a value of 1 is used.
384 The markup equivalent of this function is <a href="#saturateEquivalent">given below</a>.
385 </dd>
387 <dt>
388 hue-rotate(angle)
389 </dt>
390 <dd>
391 Applies a hue rotation on the input image. The value of 'angle' defines the
392 number of degrees around the color circle the input samples will be adjusted.
393 A value of 0 leaves the input unchanged. If the 'angle' parameter is missing,
394 a value of 0 is used.
395 The markup equivalent of this function is <a href="#huerotateEquivalent">given below</a>.
396 </dd>
398 <dt>
399 invert(amount)
400 </dt>
401 <dd>
402 Inverts the samples in the input image. The value of 'amount' defines the proportion
403 of the conversion. A value of 1 is completely inverted. A value of 0 leaves the
404 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
405 If the 'amount' parameter is missing, a value of 1 is used.
406 The markup equivalent of this function is <a href="#invertEquivalent">given below</a>.
407 </dd>
409 <dt>
410 opacity(amount)
411 </dt>
412 <dd>
413 Applies transparency to the samples in the input image. The value of 'amount' defines the proportion
414 of the conversion. A value of 1 is completely transparent. A value of 0 leaves the
415 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
416 This is equivalent to multiplying the input image samples by (1 - amount).
417 If the 'amount' parameter is missing, a value of 1 is used.
418 The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.
419 </dd>
421 <dt>
422 gamma(amplitude exponent offset)
423 </dt>
424 <dd>
425 Applies a gamma function to the input image.
426 The value of 'amplitude' defines the multiplier to the gamma function.
427 The value of 'exponent' defines the exponent of the gamma function.
428 The value of 'offset' defines the offset of the gamma function.
429 If any of the parameters are missing, the default value for 'amplitude'
430 is 1, for 'exponent' is 1, and for 'offset' is 0.
431 The markup equivalent of this function is <a href="#gammaEquivalent">given below</a>.
432 </dd>
434 <dt>
435 blur(radiusX radiusY)
436 </dt>
437 <dd>
438 Applies a Gaussian blur to the input image.
439 The value of 'radiusX' defines the X value of the standard deviation to the Gaussian function.
440 The value of 'radiusY' defines the Y value of the standard deviation to the Gaussian function.
441 If one parameter is provided, then that value is used for both 'radiusX' and 'radiusY'.
442 If no parameters are provided, then the value for both attributes is 0.
443 The markup equivalent of this function is <a href="#blurEquivalent">given below</a>.
444 </dd>
446 <dt>
447 sharpen(amount radius threshold)
448 </dt>
449 <dd>
450 Applies an sharpening effect to the input image. This is equivalent to subtracting the
451 input samples from a blurred version of the image.
452 The value of 'amount' defines the proportion of the effect (as a multiplier on the
453 subtraction). A value of 1 applies the effect completely. A value of 0 leaves the
454 input unchanged.
455 The value of 'radius' defines the value of the standard deviation to the Gaussian function.
456 The value of 'threshold' defines a point at which the function will not be applied.
457 If the 'threshold' parameter is not provided, then its value is 1. If the 'radius' parameter
458 is not provided, then its value is 0. If no parameters are provided, then the value for 'amount' is 0.
459 The markup equivalent of this function is <a href="#sharpenEquivalent">given below</a>.
460 </dd>
462 <dt>
463 drop-shadow(<shadow>)
464 </dt>
465 <dd>
466 Applies a drop shadow effect to the input image. A drop shadow is
467 effectively a blurred, offset version of the input image's alpha mask
468 drawn in a particular color, composited below the image. The function
469 accepts a parameter of type <shadow> (defined in CSS3 Backgrounds),
470 with the exception that the 'inset' keyword is not allowed. The markup
471 equivalent of this function is <a href="#dropshadowEquivalent">given
472 below</a>.
473 </dd>
475 </dl>
477 <div class="note">
478 <p>
479 The above list is a collection of effects that can be easily defined in
480 terms of SVG filters. However, there are many more interesting effects
481 that can be considered for inclusion. If accepted, there will have to
482 be equivalent XML elements for the effect. Effects considered include:
483 </p>
484 <ul>
485 <li>brightness, contrast, exposure</li>
486 <li>halftone</li>
487 <li>motion-blur(radius, angle)</li>
488 <li>posterize(levels)</li>
489 <li>bump(x, y, radius, intensity)</li>
490 <li>generators</li>
491 <li>circle-crop(x, y, radius)</li>
492 <li>affine-transform(some matrix)</li>
493 <li>crop(x, y, w, h)</li>
494 <li>bloom(radius, intensity)</li>
495 <li>gloom(radius, intensity)</li>
496 <li>mosaic(w,h)</li>
497 <li>displace(url, intensity)</li>
498 <li>edge-detect(intensity)</li>
499 <li>pinch(x, y, radius, scale)</li>
500 <li>twirl(x, y, radius, angle)</li>
501 </ul>
502 </div>
504 <p>
505 The first function in the list takes the element (<a href="#SourceGraphic">SourceGraphic</a>) as
506 the input image. Subsequent operations take the output from the
507 previous function as the input image. The exception is the function
508 that references a 'filter element' element, which can specify an
509 alternate input, but still uses the previous output as its
510 <a href="#SourceGraphic">SourceGraphic</a>.
511 </p>
513 <h2 id="FilterElement">The <span class="element-name">'filter'</span>
514 element</h2>
516 <edit:elementsummary name='filter'/>
518 <edit:with element='filter'>
520 <p>The description of the <a>'filter element'</a> element
521 follows:</p>
523 <div class="adef-list">
524 <p><em>Attribute definitions:</em></p>
525 <dl>
526 <dt id="FilterElementFilterUnitsAttribute"><span
527 class="adef">filterUnits</span> = "<em>userSpaceOnUse</em> |
528 <em>objectBoundingBox</em>"</dt>
529 <dd>See <a>filter effects region</a>.</dd>
530 <dt id="FilterElementPrimitiveUnitsAttribute"><span
531 class="adef">primitiveUnits</span> = "<em>userSpaceOnUse</em> |
532 <em>objectBoundingBox</em>"</dt>
533 <dd>Specifies the coordinate system for the various length values within
534 the <a>filter primitives</a> and for the attributes that define the <a>filter primitive subregion</a>.<br />
535 If <span class='attr-value'>primitiveUnits="userSpaceOnUse"</span>, any length values
536 within the filter definitions represent values in the <a href="#TermCurrentUserCoordinateSystem">current user
537 coordinate system</a> in place at the time when the <a>'filter element'</a>
538 element is referenced (i.e., the user coordinate system for the element
539 referencing the <a>'filter element'</a> element via a <a>'filter property'</a>
540 property).<br />
541 If <span class='attr-value'>primitiveUnits="objectBoundingBox"</span>, then any length
542 values within the filter definitions represent fractions or percentages
543 of the bounding box on the referencing element (see <a href="#TermObjectBoundingBoxUnits">object bounding box
544 units</a>). Note that if only one number was specified in a <a><number-optional-number></a> value
545 this number is expanded out before the <a>'filter/primitiveUnits'</a> computation takes place.
546 <br />
547 The <a>lacuna value</a> for <a>'filter/primitiveUnits'</a> is <span class="attr-value">userSpaceOnUse</span>.<br />
548 <span class="anim-target">Animatable: yes.</span></dd>
549 <dt id="FilterElementXAttribute">
550 <span class="adef">x</span> = "<em><a><coordinate></a></em>"</dt>
551 <dd>See <a>filter effects region</a>.</dd>
552 <dt id="FilterElementYAttribute">
553 <span class="adef">y</span> = "<em><a><coordinate></a></em>"</dt>
554 <dd>See <a>filter effects region</a>.</dd>
555 <dt id="FilterElementWidthAttribute"><span class="adef">width</span> =
556 "<em><a><length></a></em>"</dt>
557 <dd>See <a>filter effects region</a>.</dd>
558 <dt id="FilterElementHeightAttribute"><span class="adef">height</span> =
559 "<em><a><length></a></em>"</dt>
560 <dd>See <a>filter effects region</a>.</dd>
561 <dt id="FilterElementFilterResAttribute"><span
562 class="adef">filterRes</span> = "<em><a><number-optional-number></a></em>"
563 </dt>
564 <dd>See <a>filter effects region</a>.</dd>
565 <dt id="FilterElementHrefAttribute"><span class="adef">xlink:href</span>
566 = "<span class="attr-value"><IRI></span>"</dt>
567 <dd>An <a>IRI reference</a>
568 to another <a>'filter element'</a> element within
569 the current <a>SVG document fragment</a>. Any attributes which are defined on
570 the referenced <a>'filter element'</a> element which
571 are not defined on this element are inherited by this element. If this
572 element has no defined filter nodes, and the referenced element has
573 defined filter nodes (possibly due to its own <span
574 class="attr-name">href</span> attribute), then this element inherits
575 the filter nodes defined from the referenced <a>'filter element'</a> element. Inheritance can be
576 indirect to an arbitrary level; thus, if the referenced <a>'filter element'</a> element inherits attributes or its
577 filter node specification due to its own <span
578 class="attr-name">href</span> attribute, then the current element can
579 inherit those attributes or filter node specifications.
581 <div class="note">
582 This attribute is deprecated and should not be used, it's included for
583 backwards compatibility reasons only.</div>
584 <br />
585 <span class="anim-target">Animatable: yes.</span></dd>
586 </dl>
587 </div>
589 <p>Properties inherit into the <a>'filter element'</a>
590 element from its ancestors; properties do <em>not</em> inherit from the
591 element referencing the <a>'filter element'</a>
592 element.</p>
594 <p><a>'filter element'</a> elements are never rendered
595 directly; their only usage is as something that can be referenced using the
596 <a>'filter property'</a>
597 property. The <a>'display'</a> property does not
598 apply to the <a>'filter element'</a> element; thus, <a>'filter element'</a> elements are not directly rendered even
599 if the <a>'display'</a> property is set to a value
600 other than <span class="prop-value">none</span>, and <a>'filter element'</a> elements are available for referencing
601 even when the <a>'display'</a> property on the <a>'filter element'</a> element or any of its ancestors is set
602 to <span class="prop-value">none</span>.</p>
603 <br />
605 <h2 id="FilterEffectsRegion">Filter effects region</h2>
607 <p>A <a>'filter element'</a>
608 element can define a region on the canvas to which a given filter effect
609 applies and can provide a resolution for any intermediate continuous tone
610 images used to process any raster-based <a>filter primitives</a>.
612 The <a>'filter element'</a>
613 element has the following attributes which work together to define the filter
614 effects region:</p>
616 <dl class='definitions unemphasized-names'>
617 <dt id="FilterUnitsAttribute"><a>'filterUnits'</a></dt>
618 <dd>
619 <p>Defines the coordinate system for attributes <a>'x'</a>, <a>'y'</a>,
620 <a>'width'</a>, <a>'height'</a>.</p>
622 <p>If <span class="attr-value">filterUnits="userSpaceOnUse"</span>, <a>'x'</a>, <a>'y'</a>,
623 <a>'width'</a>, <a>'height'</a> represent values in the current user coordinate
624 system in place at the time when the <a>'filter element'</a> element is referenced (i.e., the
625 user coordinate system for the element referencing the <a>'filter element'</a>
626 element via a <a>'filter property'</a> property).</p>
628 <p>If <span class="attr-value">filterUnits="objectBoundingBox"</span>, then <a>'x'</a>, <a>'y'</a>,
629 <a>'width'</a>, <a>'height'</a> represent fractions or percentages of the
630 bounding box on the referencing element (see <a>object bounding box units</a>).</p>
632 <p>The <a>lacuna value</a> for <a>'filterUnits'</a> is <span
633 class="attr-value">objectBoundingBox</span>.</p>
635 <p><span class="anim-target">Animatable: yes.</span></p>
636 </dd>
637 <dt id="FilterRegionXYWidthHeightAttributes"><a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a></dt>
638 <dd>
639 <p>These attributes define a rectangular region on the canvas to which this filter applies.</p>
640 <p>The amount of memory and processing time required to apply the filter are
641 related to the size of this rectangle and the <a>'filter/filterRes'</a> attribute of the filter.</p>
642 <p>The coordinate system for these attributes depends on the value for attribute <a>'filterUnits'</a>.</p>
643 <p>The bounds of this rectangle act as a hard clipping region for each <a>filter primitive</a>
644 included with a given <a>'filter element'</a> element; thus, if the effect of
645 a given filter primitive would extend beyond the bounds of the rectangle
646 (this sometimes happens when using a <a>'feGaussianBlur'</a> filter primitive with a
647 very large <a>'feGaussianBlur/stdDeviation'</a>), parts of the effect will get clipped.</p>
649 <p>The <a>lacuna value</a> for <a>'x'</a> and <a>'y'</a> is <span class="attr-value">-10%</span>.</p>
650 <p>The <a>lacuna value</a> for <a>'width'</a> and <a>'height'</a> is <span class="attr-value">120%</span>.</p>
651 <p>Negative or zero values for <a>'width'</a> or <a>'height'</a> disable rendering of the element which
652 referenced the filter. </p>
654 <p><span class="anim-target">Animatable: yes.</span></p>
655 </dd>
657 <dt id="FilterRegionFilterRes"><a>'filter/filterRes'</a></dt>
658 <dd>
659 <p>Defines the width and height of the intermediate
660 images in pixels. If not provided, then the user agent will use reasonable
661 values to produce a high-quality result on the output device.</p>
663 <p>Care should be taken when assigning a non-default value to this
664 attribute. Too small of a value may result in unwanted pixelation in the
665 result. Too large of a value may result in slow processing and large
666 memory usage.</p>
668 <p>Non-integer values are truncated, i.e rounded to the closest integer value towards zero.</p>
670 <p><span class="requirement" id="assert_OORFilterRegion">Negative or zero values disable rendering of the element which referenced the filter.</span></p>
671 <p><span class="anim-target">Animatable: yes.</span></p>
672 </dd>
673 </dl>
675 <p>Note that both of the two possible value for <a>'filterUnits'</a> (i.e., <span
676 class="attr-value">objectBoundingBox</span> and <span
677 class="attr-value">userSpaceOnUse</span>) result in a <a>filter region</a> whose
678 coordinate system has its X-axis and Y-axis each parallel to the X-axis and
679 Y-axis, respectively, of the <a>user coordinate system</a> for the element to which
680 the filter will be applied.</p>
682 <p class="note implementation">Sometimes implementers can achieve faster performance when the filter
683 region can be mapped directly to device pixels; thus, for best performance on
684 display devices, it is suggested that authors define their region such that
685 the user agent can align the <a>filter region</a> pixel-for-pixel with the
686 background. In particular, for best filter effects performance, avoid
687 rotating or skewing the user coordinate system. Explicit values for attribute
688 <a>'filter/filterRes'</a> can either help or harm performance.
689 If <a>'filter/filterRes'</a> is smaller than the automatic
690 (i.e., default) filter resolution, then filter effect might have faster
691 performance (usually at the expense of quality). If <a>'filter/filterRes'</a> is larger than the automatic (i.e.,
692 default) filter resolution, then filter effects performance will usually be
693 slower.</p>
695 <p class="note authoring">It is often necessary to provide padding space because the filter effect
696 might impact bits slightly outside the tight-fitting <a>'bounding box'</a> on a given
697 object. For these purposes, it is possible to provide negative percentage
698 values for <a>'x'</a>, <a>'y'</a> and percentages values greater than <span class="attr-value">100%</span> for
699 <a>'width'</a>, <a>'height'</a>. This, for example, is why the defaults for
700 the filter effects region are <span class="attr-value">x="-10%" y="-10%" width="120%"
701 height="120%"</span>.</p>
703 <h2 id="AccessBackgroundImage">Accessing the background image</h2>
705 <p id="AccessingBackgroundImage">Two possible pseudo input images for filter effects are <a>BackgroundImage</a> and <a>BackgroundAlpha</a>, which each represent an image
706 snapshot of the canvas under the <a>filter region</a> at the time that the <a
707 href="#FilterElement"><span class="element-name">'filter'</span></a> element
708 is invoked. <a>BackgroundImage</a> represents both
709 the color values and alpha channel of the canvas (i.e., RGBA pixel values),
710 whereas <a>BackgroundAlpha</a> represents only the
711 alpha channel.</p>
713 <p>Implementations <!--of SVG user agents often-->
714 will often need to maintain supplemental background image buffers in order to
715 support the <a>BackgroundImage</a> and <a>BackgroundAlpha</a> pseudo input images. Sometimes,
716 the background image buffers will contain an in-memory copy of the
717 accumulated painting operations on the current canvas.</p>
719 <p>Because in-memory image buffers can take up significant system resources, <!--SVG-->
720 content must explicitly indicate to the <!--SVG-->
721 user agent that the document needs access to the background image before <a>BackgroundImage</a> and <a>BackgroundAlpha</a> pseudo input images can be used.
722 </p>
724 A background image is what's been <i>rendered before</i> the current element.
725 <edit:hostreq>The host language is responsible for defining what <i>rendered before</i> in
726 this context means
727 .</edit:hostreq> For SVG, that uses the painter's algorithm, <i>rendered before</i> means
728 all of the prior elements in pre order traversal previous to the element to
729 which the filter is applied.
731 <p>The property which enables access to the background image is
732 <a>'enable-background'</a>:</p>
735 <div class="propdef">
736 <dl>
737 <dt id="EnableBackgroundProperty"><span class='propdef-title prop-name'>'enable-background'</span></dt>
738 <dd>
739 <table summary="enable-background property" class="propinfo"
740 cellspacing="0" cellpadding="0">
741 <tbody>
742 <tr valign="baseline">
743 <td><em>Value:</em> </td>
744 <td>accumulate | new | <a class="noxref"
745 href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span
746 class="value-inst-inherit noxref">inherit</span></a></td>
747 </tr>
748 <tr valign="baseline">
749 <td><em>Initial:</em> </td>
750 <td>accumulate</td>
751 </tr>
752 <tr valign="baseline">
753 <td><em>Applies to:</em> </td>
754 <td>Typically elements that can contain renderable elements.
755 language is responsible for defining the applicable set of
756 elements.
757 For SVG: <a>container elements</a></td>
758 </tr>
759 <tr valign="baseline">
760 <td><em>Inherited:</em> </td>
761 <td>no</td>
762 </tr>
763 <tr valign="baseline">
764 <td><em>Percentages:</em> </td>
765 <td>N/A</td>
766 </tr>
767 <tr valign="baseline">
768 <td><em>Media:</em> </td>
769 <td>visual</td>
770 </tr>
771 <tr valign="baseline">
772 <td><em>Animatable:</em> </td>
773 <td>no</td>
774 </tr>
775 </tbody>
776 </table>
777 </dd>
778 </dl>
779 </div>
780 <p><a>'enable-background'</a> is only
781 applicable to <a>container elements</a>
782 and specifies how the <a>SVG user agent</a> manages the accumulation
783 of the background image.</p>
785 <p>A value of <strong>new</strong> indicates two things:</p>
786 <ul>
787 <li>It enables the ability of children of the current <a>container element</a>
788 element to access the background image.</li>
789 <li>It indicates that a new (i.e., initially transparent black) background
790 image canvas is established and that (in effect) all children of the
791 current <a>container element</a>
792 element shall be rendered into the new background image canvas in
793 addition to being rendered onto the target device.</li>
794 </ul>
796 <p>A meaning of <span class="attr-value">enable-background: accumulate</span> (the
797 initial/default value) depends on context:</p>
798 <ul>
799 <li>If an ancestor <a>container element</a>
800 element has a property value of <span class="attr-value">'enable-background:new'</span>, then all
801 renderable child elements of the current <a>container element</a>
802 element are rendered both onto the parent <a>container element</a>
803 element's background image canvas and onto the target device.</li>
804 <li>Otherwise, there is no current background image canvas, so it is only
805 necessary to render <a>graphics elements</a>
806 the renderable elements onto the target device. (No need to render to the
807 background image canvas.)</li>
808 </ul>
810 <p>If a filter effect specifies either the <a>BackgroundImage</a> or the
811 <a>BackgroundAlpha</a> pseudo input images and no
812 ancestor <a>container element</a>
813 element has a property value of <span class="attr-value">'enable-background:new'</span>, then the background
814 image request is technically in error. Processing will proceed without
815 interruption (i.e., no error message) and a transparent black image shall be
816 provided in response to the request.</p>
818 <h3 id="AccessBackgroundImageSVG">Accessing the background image in SVG</h3>
819 <p>This section only applies to the SVG definition of enable-background.</p>
821 <p>Assume you have an element E in the document and that E has a series of
822 ancestors A<sub>1</sub> (its immediate parent), A<sub>2</sub>, etc. (Note:
823 A<sub>0</sub> is E.) Each ancestor A<sub>i</sub> will have a corresponding
824 temporary background image offscreen buffer BUF<sub>i</sub>. The contents of
825 the <em>background image</em> available to a <a href="#FilterElement"><span
826 class="element-name">'filter'</span></a> referenced by E is defined as
827 follows:</p>
828 <ul>
829 <li>Find the element A<sub>i</sub> with the smallest subscript i (including
830 A<sub>0</sub>=E) for which the <a href="#EnableBackgroundProperty"><span
831 class="prop-name">'enable-background'</span></a> property has the value
832 <span class="prop-value">new</span>. (Note: if there is no such ancestor
833 element, then there is no background image available to E, in which case
834 a transparent black image will be used as E's background image.)</li>
835 <li>For each A<sub>i</sub> (from i=n to 1), initialize BUF<sub>i</sub> to
836 transparent black. Render all children of A<sub>i</sub> up to but not
837 including A<sub>i-1</sub> into BUF<sub>i</sub>. The children are painted,
838 then filtered, clipped, masked and composited using the various painting,
839 filtering, clipping, masking and object opacity settings on the given
840 child. Any filter effects, masking and group opacity that might be set on
841 A<sub>i</sub> do <em>not</em> apply when rendering the children of
842 A<sub>i</sub> into BUF<sub>i</sub>.<br />
843 (Note that for the case of A<sub>0</sub>=E, the graphical contents of E
844 are not rendered into BUF<sub>1</sub> and thus are not part of the
845 background image available to E. Instead, the graphical contents of E are
846 available via the <a href="#SourceGraphic">SourceGraphic</a> and <a
847 href="#SourceAlpha">SourceAlpha</a> pseudo input images.)</li>
848 <li>Then, for each A<sub>i</sub> (from i=1 to n-1), composite
849 BUF<sub>i</sub> into BUF<sub>i+1</sub>.</li>
850 <li>The accumulated result (i.e., BUF<sub>n</sub>) represents the
851 background image available to E.</li>
852 </ul>
854 <edit:example href="examples/enable-background-01.svg" image="yes" link="yes"/>
856 <p>The example above contains five parts, described as follows:</p>
857 <ol>
858 <li>The first set is the reference graphic. The reference graphic consists
859 of a red rectangle followed by a 50% transparent <span
860 class="element-name">'g'</span>
861 element. Inside the <span class="element-name">'g'</span>
862 is a green circle that partially overlaps the rectangle and a a blue
863 triangle that partially overlaps the circle. The three objects are then
864 outlined by a rectangle stroked with a thin blue line. No filters are
865 applied to the reference graphic.</li>
866 <li>The second set enables background image processing and adds an empty
867 <span class="element-name">'g'</span>
868 element which invokes the ShiftBGAndBlur filter. This filter takes the
869 current accumulated background image (i.e., the entire reference graphic)
870 as input, shifts its offscreen down, blurs it, and then writes the result
871 to the canvas. Note that the offscreen for the filter is initialized to
872 transparent black, which allows the already rendered rectangle, circle
873 and triangle to show through after the filter renders its own result to
874 the canvas.</li>
875 <li>The third set enables background image processing and instead invokes
876 the ShiftBGAndBlur filter on the inner <span
877 class="element-name">'g'</span>
878 element. The accumulated background at the time the filter is applied
879 contains only the red rectangle. Because the children of the inner <span
880 class="element-name">'g'</span>
881 (i.e., the circle and triangle) are not part of the inner <span
882 class="element-name">'g'</span>
883 element's background and because ShiftBGAndBlur ignores SourceGraphic,
884 the children of the inner <span class="element-name">'g'</span>
885 do not appear in the result.</li>
886 <li>The fourth set enables background image processing and invokes the
887 ShiftBGAndBlur on the <span class="element-name">'polygon'</span>
888 element that draws the triangle. The accumulated background at the time
889 the filter is applied contains the red rectangle plus the green circle
890 ignoring the effect of the <span class="prop-name">'opacity'</span>
891 property on the inner <span class="element-name">'g'</span>
892 element. (Note that the blurred green circle at the bottom does not let
893 the red rectangle show through on its left side. This is due to ignoring
894 the effect of the <span class="prop-name">'opacity'</span>
895 property.) Because the triangle itself is not part of the accumulated
896 background and because ShiftBGAndBlur ignores SourceGraphic, the triangle
897 does not appear in the result.</li>
898 <li>The fifth set is the same as the fourth except that filter
899 ShiftBGAndBlur_WithSourceGraphic is invoked instead of ShiftBGAndBlur.
900 ShiftBGAndBlur_WithSourceGraphic performs the same effect as
901 ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted,
902 blurred background image. In this case, SourceGraphic is the blue
903 triangle; thus, the result is the same as in the fourth case except that
904 the blue triangle now appears.</li>
905 </ol>
906 </edit:with>
908 <h2 id="FilterPrimitivesOverview">Filter primitives overview</h2>
910 <h3 id="FilterPrimitivesOverviewIntro">Overview</h3>
912 <p>This section describes the various filter primtives that can be assembled
913 to achieve a particular filter effect.</p>
915 <p>Unless otherwise stated, all image filters operate on premultiplied RGBA
916 samples. Filters which work more naturally on non-premultiplied data
917 (<a>'feColorMatrix'</a> and <a>'feComponentTransfer'</a>) will temporarily undo and redo
918 premultiplication as specified. All raster effect filtering operations take 1
919 to N input RGBA images, additional attributes as parameters, and produce a
920 single output RGBA image.</p>
922 <p>The RGBA result from each filter primitive will be clamped into the
923 allowable ranges for colors and opacity values. Thus, for example, the result
924 from a given <a>filter primitive</a> will have any negative color values or opacity
925 values adjusted up to color/opacity of zero.</p>
927 <p id="filtersColorSpace">The color space in which a particular <a>filter primitive</a> performs its
928 operations is determined by the value of property <a>'color-interpolation-filters'</a> on the given <a>filter
929 primitive</a>. A different property, <a>'color-interpolation'</a> determines the color space for
930 other color operations. Because these two properties have different initial
931 values (<a>'color-interpolation-filters'</a> has an
932 initial value of <span class="prop-value">linearRGB</span> whereas <a>'color-interpolation'</a> has an initial value of <span class="prop-value">sRGB</span>), in some cases to achieve certain results
933 (e.g., when coordinating gradient interpolation with a filtering operation)
934 it will be necessary to explicitly set <a>'color-interpolation'</a> to <span
935 class="prop-value">linearRGB</span> or <a>'color-interpolation-filters'</a> to <span
936 class="prop-value">sRGB</span> on particular elements. Note that the examples
937 below do not explicitly set either <a>'color-interpolation'</a> or <a>'color-interpolation-filters'</a>, so the initial values for these properties apply to the examples.</p>
939 <p><span class="requirement" id="assert_undefinedPixels">Sometimes <a>filter primitives</a> result in undefined pixels. For example,
940 filter primitive <a>'feOffset'</a> can shift an image down and to the
941 right, leaving undefined pixels at the top and left. In these cases, the
942 undefined pixels are set to transparent black.</span></p>
944 <h3 id="CommonAttributes">Common attributes</h3>
946 <p>The following attributes are available for most of the filter
947 primitives:</p>
949 <div class="adef-list">
950 <p><em>Attribute definitions:</em></p>
951 <dl>
952 <dt id="FilterPrimitiveXAttribute">
953 <span class="adef">x</span> = "<em><a><coordinate></a></em>"</dt>
954 <dd><p>The minimum x coordinate for the subregion which restricts
955 calculation and rendering of the given <a>filter primitive</a>. See <a>filter primitive subregion</a>.</p>
956 <p>The <a>lacuna value</a> for <span class="attr-name">x</span> is <span class="attr-value">0%</span>.</p>
957 <p><span class="anim-target">Animatable: yes.</span></p>
958 </dd>
959 <dt id="FilterPrimitiveYAttribute">
960 <span class="adef">y</span> = "<em><a><coordinate></a></em>"</dt>
961 <dd><p>The minimum y coordinate for the subregion which restricts
962 calculation and rendering of the given <a>filter primitive</a>. See <a>filter primitive subregion</a>. </p>
963 <p>The <a>lacuna value</a> for <span class="attr-name">y</span> is <span class="attr-value">0%</span>.</p>
964 <p><span class="anim-target">Animatable: yes.</span></p>
965 </dd>
966 <dt id="FilterPrimitiveWidthAttribute">
967 <span class="adef">width</span> = "<em><a><length></a></em>"</dt>
968 <dd><p>The width of the subregion which restricts calculation and rendering
969 of the given <a>filter primitive</a>. See <a>filter primitive subregion</a>.</p>
970 <p>A negative or zero value disables the effect of the given filter
971 primitive (i.e., the result is a transparent black image).</p>
972 <p>The <a>lacuna value</a> for <span class="attr-name">width</span> is <span class="attr-value">100%</span>.</p>
973 <p><span class="anim-target">Animatable: yes.</span></p>
974 </dd>
975 <dt id="FilterPrimitiveHeightAttribute">
976 <span class="adef">height</span> = "<em><a><length></a></em>"</dt>
977 <dd><p>The height of the subregion which restricts calculation and rendering
978 of the given <a>filter primitive</a>. See <a>filter primitive subregion</a>.</p>
979 <p>A negative or zero value disables the effect of the given filter
980 primitive (i.e., the result is a transparent black image).</p>
981 <p>The <a>lacuna value</a> for <span class="attr-name">height</span> is <span class="attr-value">100%</span>.</p>
982 <p><span class="anim-target">Animatable: yes.</span></p>
983 </dd>
984 <dt id="FilterPrimitiveResultAttribute">
985 <span class="adef">result</span> =
986 "<em><a><filter-primitive-reference></a></em>"</dt>
987 <dd><p>Assigned name for this <a>filter primitive</a>. If supplied, then graphics
988 that result from processing this <a>filter primitive</a> can be referenced by
989 an <a>'in'</a> attribute on a subsequent filter
990 primitive within the same <a>'filter element'</a> element. If no value is
991 provided, the output will only be available for re-use as the implicit
992 input into the next <a>filter primitive</a> if that <a>filter primitive</a> provides
993 no value for its <a>'in'</a> attribute.</p>
994 <p>Note that a <a><filter-primitive-reference></a> is not an XML
995 ID; instead, a <a><filter-primitive-reference></a> is only
996 meaningful within a given <a>'filter element'</a> element and thus have only
997 local scope. It is legal for the same
998 <a><filter-primitive-reference></a> to appear multiple times
999 within the same <a>'filter element'</a> element. When referenced, the
1000 <a><filter-primitive-reference></a> will use the closest
1001 preceding <a>filter primitive</a> with the given result.</p>
1002 <p><span class="anim-target">Animatable: yes.</span></p>
1003 </dd>
1004 <dt id="FilterPrimitiveInAttribute">
1005 <span class="adef">in</span> = "<em><a>SourceGraphic</a> | <a>SourceAlpha</a> | <a>BackgroundImage</a> | <a>BackgroundAlpha</a> | <a>FillPaint</a> | <a>StrokePaint</a> |
1006 <a><filter-primitive-reference></a></em>"</dt>
1007 <dd><p>Identifies input for the given filter primitive. The value can be
1008 either one of six keywords or can be a string which matches a previous
1009 <a>'feBlend/result'</a> attribute value within the same <a>'filter element'</a>
1010 element. If no value is provided and this is the first <a>filter primitive</a>,
1011 then this <a>filter primitive</a> will use <a>SourceGraphic</a>
1012 as its input. If no value is provided and this is a subsequent <a>filter primitive</a>,
1013 then this <a>filter primitive</a> will use the result from the
1014 previous <a>filter primitive</a> as its input.</p>
1015 <p>If the value for <span class="attr-name">result</span> appears
1016 multiple times within a given <a>'filter element'</a> element, then a reference to
1017 that result will use the closest preceding <a>filter primitive</a> with the
1018 given value for attribute <a>'feBlend/result'</a>.
1019 Forward references to results are not allowed, and will be treated as
1020 if no result was specified. </p>
1021 <p>Definitions for the six keywords: </p>
1022 <dl>
1023 <dt id="SourceGraphic"><span class="attr-value">SourceGraphic</span></dt>
1024 <dd><p>This keyword represents the graphics elements
1025 that were the original input into the <a>'filter element'</a> element. For raster
1026 effects <a>filter primitives</a>, the graphics elements
1027 will be rasterized into an initially clear RGBA raster in image
1028 space. Pixels left untouched by the original graphic will be left
1029 clear. The image is specified to be rendered in linear RGBA
1030 pixels. The alpha channel of this image captures any
1031 anti-aliasing specified by SVG. (Since the raster is linear, the
1032 alpha channel of this image will represent the exact percent
1033 coverage of each pixel.)</p></dd>
1034 <dt id="SourceAlpha"><span class="attr-value">SourceAlpha</span></dt>
1035 <dd><p>This keyword represents the graphics elements
1036 that were the original input into the <a>'filter element'</a> element.
1037 <a>SourceAlpha</a> has all of the same rules
1038 as <a>SourceGraphic</a> except that only the
1039 alpha channel is used. The input image is an RGBA image
1040 consisting of implicitly black color values for the RGB channels,
1041 but whose alpha channel is the same as <a>SourceGraphic</a>.</p>
1042 <p class="note implementation">If this option is
1043 used, then some implementations might need to rasterize the
1044 graphics elements
1045 in order to extract the alpha channel.</p>
1046 </dd>
1047 <dt id="BackgroundImage"><span class="attr-value">BackgroundImage</span></dt>
1048 <dd><p>This keyword represents an image snapshot of the canvas under
1049 the <a>filter region</a> at the time that the <a>'filter element'</a> element was invoked. See
1050 <a href="#AccessingBackgroundImage">accessing the background
1051 image</a>.</p>
1052 </dd>
1053 <dt id="BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></dt>
1054 <dd><p>Same as <a>BackgroundImage</a> except
1055 only the alpha channel is used. See <a>SourceAlpha</a> and <a
1056 href="#AccessingBackgroundImage">accessing the background
1057 image</a>.</p>
1058 </dd>
1060 <dt id="FillPaint"><span class="attr-value">FillPaint</span></dt>
1061 <dd>
1062 <p>This keyword represents the target element <i>rendered filled</i>.</p>
1063 <p>For svg this keyword represents the value of the <a>'fill'</a>
1064 property on the target element for the filter effect.</p>
1065 <p>For non-SVG cases <a>FillPaint</a> generates a transparent black image.
1066 <span class="specissue">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.</span>
1067 </p>
1068 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
1069 <p>The <a>FillPaint</a> image has conceptually infinite extent.
1070 Frequently this image is opaque everywhere, but it might not be if the "paint"
1071 itself has alpha, as in the case of a gradient or pattern which
1072 itself includes transparent or semi-transparent parts.</p>
1073 </dd>
1074 <dt id="StrokePaint"><span class="attr-value">StrokePaint</span></dt>
1075 <dd>
1076 <p>This keyword represents the target element <i>rendered stroked</i>.</p>
1077 <p>For svg this keyword represents the value of the <a>'stroke'</a>
1078 on the target element for the filter effect.</p>
1079 <p>For non-SVG cases <a>StrokePaint</a> generates a transparent black image.
1080 <span class="specissue">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.</span>
1081 </p>
1082 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
1083 <p>The <a>StrokePaint</a> image has conceptually infinite extent.
1084 Frequently this image is opaque everywhere, but it
1085 might not be if the "paint"
1086 itself has alpha, as in the case of a gradient or pattern which
1087 itself includes transparent or semi-transparent parts.
1088 </p>
1089 </dd>
1090 </dl>
1091 <p><span class="anim-target">Animatable: yes.</span></p>
1092 </dd>
1093 </dl>
1094 </div>
1096 <h3 id="FilterPrimitiveSubRegion">Filter primitive subregion</h3>
1098 <edit:with element="feBlend">
1099 <p>
1100 All <a>filter primitives</a> have attributes <a>'x'</a>, <a>'y'</a>,
1101 <a>'width'</a> and <a>'height'</a> which
1102 together identify a subregion which restricts calculation and rendering of
1103 the given <a>filter primitive</a>. The <a>'x'</a>, <a>'y'</a>,
1104 <a>'width'</a> and <a>'height'</a> attributes are defined
1105 according to the same rules as other <a>filter primitives</a>' coordinate and length
1106 attributes and thus represent values in the coordinate system established by
1107 attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.
1108 </p>
1110 <p><a>'x'</a>, <a>'y'</a>,
1111 <a>'width'</a> and <a>'height'</a> default to the union (i.e., tightest fitting bounding
1112 box) of the subregions defined for all referenced nodes. If there are no
1113 referenced nodes (e.g., for <a>'feImage'</a> or <a>'feTurbulence'</a>), or one or more of the
1114 referenced nodes is a standard input (one of <a>SourceGraphic</a>, <a>SourceAlpha</a>, <a>BackgroundImage</a>, <a>BackgroundAlpha</a>,
1115 <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> or <a
1116 href="#StrokePaint"><span class="attr-value">StrokePaint</span></a>), or for
1117 <a href="#feTileElement"><span class="element-name">'feTile'</span></a>
1118 (which is special because its principal function is to replicate the
1119 referenced node in X and Y and thereby produce a usually larger result), the
1120 default subregion is <span class="attr-value">0%, 0%, 100%, 100%</span>,
1121 where as a special-case the percentages are relative to the dimensions of the <a>filter region</a>,
1122 thus making the default <a>filter primitive subregion</a> equal to the <a>filter region</a>.
1123 </p>
1125 <p>If the <a>filter primitive
1126 subregion</a> has a negative or zero width or height, the effect of the filter
1127 primitive is disabled. </p>
1129 <p>The <a>filter primitive subregion</a> act as a hard clip clipping rectangle on both the
1130 filter primitive's input image(s) and the filter primitive result.</p>
1131 <p class="specissue">ISSUE: Consider making it possible to do select between clip-input, clip-output, clip-both or none.</p>
1133 <p>All intermediate offscreens are defined to not exceed the intersection of
1134 the <a>filter primitive subregion</a> with the <a>filter region</a>.
1135 The <a>filter region</a> and any of the filter primitive subregions are
1136 to be set up such that all offscreens are made big enough to accommodate any
1137 pixels which even partly intersect with either the <a>filter region</a> or the
1138 filter primitive subregions.</p>
1140 <p><a>'feTile'</a> references a previous filter primitive and then stitches the tiles together
1141 based on the <a>filter primitive subregion</a> of the referenced filter primitive in
1142 order to fill its own <a>filter primitive subregion</a>.</p>
1144 <edit:example href="examples/filtersubregion00.svg" image="yes" link="yes"/>
1146 <p>
1147 In the example above there are three rects that each have a cross and a circle in them.
1149 The circle element in each one has a different filter applied, but with the same <a>filter primitive subregion</a>.
1150 The filter output should be limited to the <a>filter primitive subregion</a>, so you should never see the circles
1151 themselves, just the rects that make up the <a>filter primitive subregion</a>.
1152 </p>
1153 <ul>
1154 <li>
1155 The upper left rect shows an <a>'feFlood'</a> with <span class="attr-name">flood-opacity</span>="<span class="attr-value">75%</span>" so the cross should be visible through the green rect in the middle.
1156 </li>
1157 <li>
1158 The lower left rect shows an <a>'feMerge'</a> that merges <a>SourceGraphic</a> with <a>FillPaint</a>. Since the circle has <span class="attr-name">fill-opacity</span>="<span class="attr-value">0.5</span>" it will also be transparent so that the cross is visible through the green rect in the middle.
1159 </li>
1160 <li>The upper right rect shows an <a>'feBlend'</a> that has <span class="attr-name">mode</span>="<span class="attr-value">multiply</span>". 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.
1161 </li>
1162 </ul>
1164 </edit:with>
1166 <h2 id="LightSourceDefinitions">Light source elements and properties</h2>
1168 <h3 id="LightSourceIntro">Introduction</h3>
1170 <p>The following sections define the elements that define a light source, <a>'feDistantLight'</a>,
1171 <a>'fePointLight'</a> and <a>'feSpotLight'</a>,
1172 and property <a>'lighting-color'</a>, which defines the color of the
1173 light.</p>
1175 <h3 id="feDistantLightElement">Light source <span class="element-name">'feDistantLight'</span></h3>
1177 <edit:elementsummary name='feDistantLight'/>
1178 <edit:with element='feDistantLight'>
1180 <div class="adef-list">
1181 <p><em>Attribute definitions:</em></p>
1182 <dl>
1183 <dt id="feDistantLightAzimuthAttribute"><span
1184 class="adef">azimuth</span> = "<em><a><number></a></em>"</dt>
1185 <dd>Direction angle for the light source on the XY plane (clockwise), in
1186 degrees from the x axis.<br />
1187 The <a>lacuna value</a> for <a>'azimuth'</a> is <span class="attr-value">0</span>.<br />
1188 <span class="anim-target">Animatable: yes.</span></dd>
1189 <dt id="feDistantLightElevationAttribute"><span
1190 class="adef">elevation</span> = "<em><a><number></a></em>"</dt>
1191 <dd>Direction angle for the light source from the XY plane towards the Z-axis, in degrees.
1192 Note that the positive Z-axis points towards the viewer.<br />
1193 The <a>lacuna value</a> for <a>'elevation'</a> is <span class="attr-value">0</span>.<br />
1194 <span class="anim-target">Animatable: yes.</span></dd>
1195 </dl>
1196 </div>
1198 <p>
1199 The following diagram illustrates the angles which <a>'azimuth'</a>
1200 and <a>'elevation'</a> represent in an XYZ coordinate system.
1201 </p>
1202 <img src="examples/azimuth-elevation.png" alt="Angles which azimuth and elevation represent" width="480" height="360" />
1203 </edit:with>
1205 <h3 id="fePointLightElement">Light source <span class="element-name">'fePointLight'</span></h3>
1207 <edit:elementsummary name='fePointLight'/>
1209 <div class="adef-list">
1210 <p><em>Attribute definitions:</em></p>
1211 <dl>
1212 <dt id="fePointLightXAttribute"><span
1213 class="adef">x</span> = "<em><a><number></a></em>"</dt>
1214 <dd>X location for the light source in the coordinate system established
1215 by attribute <a>'filter/primitiveUnits'</a> on the <a
1216 href="#FilterElement"><span class="element-name">'filter'</span></a>
1217 element.<br />
1218 The <a>lacuna value</a> for <a>'fePointLight/x'</a> is <span class="attr-value">0</span>.<br />
1219 <span class="anim-target">Animatable: yes.</span></dd>
1220 <dt id="fePointLightYAttribute"><span
1221 class="adef">y</span> = "<em><a><number></a></em>"</dt>
1222 <dd>Y location for the light source in the coordinate system established
1223 by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
1224 element.<br />
1225 The <a>lacuna value</a> for <a>'fePointLight/y'</a> is <span class="attr-value">0</span>.<br />
1226 <span class="anim-target">Animatable: yes.</span></dd>
1227 <dt id="fePointLightZAttribute"><span
1228 class="adef">z</span> = "<em><a><number></a></em>"</dt>
1229 <dd>Z location for the light source in the coordinate system established
1230 by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
1231 element, assuming that, in the <a>initial coordinate system</a>
1232 , the positive Z-axis comes out towards the person viewing the content
1233 and assuming that one unit along the Z-axis equals <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br />
1234 The <a>lacuna value</a> for <a>'fePointLight/z'</a> is <span class="attr-value">0</span>.<br />
1235 <span class="anim-target">Animatable: yes.</span></dd>
1236 </dl>
1237 </div>
1239 <h3 id="feSpotLightElement">Light source <span class="element-name">'feSpotLight'</span></h3>
1241 <edit:elementsummary name='feSpotLight'/>
1242 <edit:with element='feSpotLight'>
1244 <div class="adef-list">
1245 <p><em>Attribute definitions:</em></p>
1246 <dl>
1247 <dt id="feSpotLightXAttribute"><span
1248 class="adef">x</span> = "<em><a><number></a></em>"</dt>
1249 <dd>X location for the light source in the coordinate system established
1250 by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
1251 element.<br />
1252 The <a>lacuna value</a> for <a>'feSpotLight/x'</a> is <span class="attr-value">0</span>.<br />
1253 <span class="anim-target">Animatable: yes.</span></dd>
1254 <dt id="feSpotLightYAttribute"><span
1255 class="adef">y</span> = "<em><a><number></a></em>"</dt>
1256 <dd>Y location for the light source in the coordinate system established
1257 by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
1258 element.<br />
1259 The <a>lacuna value</a> for <a>'feSpotLight/y'</a> is <span class="attr-value">0</span>.<br />
1260 <span class="anim-target">Animatable: yes.</span></dd>
1261 <dt id="feSpotLightZAttribute"><span
1262 class="adef">z</span> = "<em><a><number></a></em>"</dt>
1263 <dd>Z location for the light source in the coordinate system established
1264 by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
1265 element, assuming that, in the <a>initial coordinate system</a>
1266 , the positive Z-axis comes out towards the person viewing the content
1267 and assuming that one unit along the Z-axis equals <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br />
1268 The <a>lacuna value</a> for <a>'feSpotLight/z'</a> is <span class="attr-value">0</span>.<br />
1269 <span class="anim-target">Animatable: yes.</span></dd>
1270 <dt id="feSpotLightPointsAtXAttribute"><span
1271 class="adef">pointsAtX</span> = "<em><a><number></a></em>"</dt>
1272 <dd>X location in the coordinate system established by attribute <a>'filter/primitiveUnits'</a>
1273 on the <a>'filter element'</a>
1274 element of the point at which the light source is pointing.<br />
1275 The <a>lacuna value</a> for <a>'pointsAtX'</a> is <span class="attr-value">0</span>.<br />
1276 <span class="anim-target">Animatable: yes.</span></dd>
1277 <dt id="feSpotLightPointsAtYAttribute"><span
1278 class="adef">pointsAtY</span> = "<em><a><number></a></em>"</dt>
1279 <dd>Y location in the coordinate system established by attribute <a>'filter/primitiveUnits'</a>
1280 on the <a>'filter element'</a> element of the point at which the light source is pointing.<br />
1281 The <a>lacuna value</a> for <a>'pointsAtY'</a> is <span class="attr-value">0</span>.<br />
1282 <span class="anim-target">Animatable: yes.</span></dd>
1283 <dt id="feSpotLightPointsAtZAttribute"><span
1284 class="adef">pointsAtZ</span> = "<em><a><number></a></em>"</dt>
1285 <dd>Z location in the coordinate system established by the
1286 attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element of
1287 the point at which the light source is pointing, assuming that, in the
1288 <a>initial coordinate system</a>, the positive Z-axis comes out
1289 towards the person viewing the content and assuming that
1290 one unit along the Z-axis equals
1291 <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">
1292 one unit in X and Y</a>.<br />
1293 The <a>lacuna value</a> for <a>'pointsAtZ'</a> is <span class="attr-value">0</span>.<br />
1294 <span class="anim-target">Animatable: yes.</span></dd>
1295 <dt id="feSpotLightSpecularExponentAttribute"><span
1296 class="adef">specularExponent</span> = "<em><a><number></a></em>"</dt>
1297 <dd>Exponent value controlling the focus for the light source.<br />
1298 The <a>lacuna value</a> for <a>'specularExponent'</a> is <span class="attr-value">1</span>.<br />
1299 <span class="anim-target">Animatable: yes.</span></dd>
1300 <dt id="feSpotLightLimitingConeAngleAttribute"><span
1301 class="adef">limitingConeAngle</span> = "<em><a><number></a></em>"</dt>
1302 <dd>A limiting cone which restricts the region where the light is
1303 projected. No light is projected outside the cone. <span
1304 class="attr-name">limitingConeAngle</span> represents the angle in degrees between
1305 the spot light axis (i.e. the axis between the light source and the
1306 point to which it is pointing at) and the spot light cone. <span class="requirement" id="assert_userAgentLightingConeSmoothing">User agents
1307 should apply a smoothing technique such as anti-aliasing at the
1308 boundary of the cone.</span><br />
1309 If no value is specified, then no limiting cone will be applied.<br />
1310 <span class="anim-target">Animatable: yes.</span></dd>
1311 </dl>
1312 </div>
1313 </edit:with>
1315 <h3 id="LightingColorProperty">The <span class="prop-name">'lighting-color'</span> property</h3>
1317 <p>The <a>'lighting-color'</a> property defines the
1318 color of the light source for <a>filter primitives</a> <a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a>.</p>
1320 <div class="propdef">
1321 <dl>
1322 <dt><span class="index-def" title="'margin-top'"><a
1323 id="propdef-lighting-color" name="propdef-lighting-color"
1324 class="propdef-title"><span
1325 class="prop-name">'lighting-color'</span></a></span></dt>
1326 <dd>
1327 <table summary="lighting-color property" class="propinfo"
1328 cellspacing="0" cellpadding="0">
1329 <tbody>
1330 <tr valign="baseline">
1331 <td><em>Value:</em> </td>
1332 <td>currentColor |<br />
1333 <a><color></a>
1334 [<a><icccolor></a>] |<br />
1335 <a class="noxref"
1336 href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span
1337 class="value-inst-inherit noxref">inherit</span></a></td>
1338 </tr>
1339 <tr valign="baseline">
1340 <td><em>Initial:</em> </td>
1341 <td>white</td>
1342 </tr>
1343 <tr valign="baseline">
1344 <td><em>Applies to:</em> </td>
1345 <td><a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a>
1346 elements</td>
1347 </tr>
1348 <tr valign="baseline">
1349 <td><em>Inherited:</em> </td>
1350 <td>no</td>
1351 </tr>
1352 <tr valign="baseline">
1353 <td><em>Percentages:</em> </td>
1354 <td>N/A</td>
1355 </tr>
1356 <tr valign="baseline">
1357 <td><em>Media:</em> </td>
1358 <td>visual</td>
1359 </tr>
1360 <tr valign="baseline">
1361 <td><em>Animatable:</em> </td>
1362 <td>yes</td>
1363 </tr>
1364 </tbody>
1365 </table>
1366 </dd>
1367 </dl>
1368 </div>
1370 <h2 id="feBlendElement">Filter primitive <span class="element-name">'feBlend'</span></h2>
1372 <edit:elementsummary name='feBlend'/>
1373 <edit:with element='feBlend'>
1375 <p>This filter composites two objects together using commonly used imaging
1376 software blending modes. It performs a pixel-wise combination of two input
1377 images.</p>
1379 <div class="adef-list">
1380 <p><em>Attribute definitions:</em></p>
1381 <dl>
1382 <dt id="feBlendModeAttribute"><span
1383 class="adef">mode</span> = "<em>normal | multiply | screen | darken |
1384 lighten</em>"</dt>
1385 <dd>One of the image blending modes (see <a
1386 href="#BlendingTable">table</a> below). The <a>lacuna value</a> for <a>'mode'</a> is <span class="attr-value">normal</span>.<br />
1387 <span class="anim-target">Animatable: yes.</span></dd>
1388 <dt id="feBlendIn2Attribute"><span
1389 class="adef">in2</span> = "<em>(see <a
1390 href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a>
1391 attribute)</em>"</dt>
1392 <dd>The second input image to the blending operation. This attribute can
1393 take on the same values as the <a
1394 href="#FilterPrimitiveInAttribute"><span
1395 class="attr-name">in</span></a> attribute.<br />
1396 <span class="anim-target">Animatable: yes.</span></dd>
1397 </dl>
1398 </div>
1400 <p>For all feBlend modes, the result opacity is computed as follows:</p>
1401 <pre>qr = 1 - (1-qa)*(1-qb)</pre>
1403 <p>For the compositing formulas below, the following definitions apply:</p>
1404 <pre>image A = in
1405 image B = in2
1406 cr = Result color (RGB) - premultiplied
1407 qa = Opacity value at a given pixel for image A
1408 qb = Opacity value at a given pixel for image B
1409 ca = Color (RGB) at a given pixel for image A - premultiplied
1410 cb = Color (RGB) at a given pixel for image B - premultiplied </pre>
1412 <p id="BlendingTable">The following table
1413 provides the list of available image blending modes:</p>
1415 <div class="note-editor">
1416 ED: make table look nicer</div>
1418 <table summary="blending modes" width="500" border="1">
1419 <tbody>
1420 <tr>
1421 <td>Image Blending Mode</td>
1422 <td>Formula for computing result color</td>
1423 </tr>
1424 <tr>
1425 <td>normal</td>
1426 <td>cr = (1 - qa) * cb + ca</td>
1427 </tr>
1428 <tr>
1429 <td>multiply</td>
1430 <td>cr = (1-qa)*cb + (1-qb)*ca + ca*cb</td>
1431 </tr>
1432 <tr>
1433 <td>screen</td>
1434 <td>cr = cb + ca - ca * cb</td>
1435 </tr>
1436 <tr>
1437 <td>darken</td>
1438 <td>cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)</td>
1439 </tr>
1440 <tr>
1441 <td>lighten</td>
1442 <td>cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)</td>
1443 </tr>
1444 </tbody>
1445 </table>
1447 <p>The <span class="attr-value">'normal'</span> blend mode is equivalent to <a
1448 href="#feCompositeOperatorAttribute"><span
1449 class="attr-value">operator="over"</span></a> on the <a>'feComposite'</a>
1450 filter primitive, matches the blending method used by <a>'feMerge'</a> and matches
1451 the <a>simple alpha compositing</a> technique used in SVG for all compositing outside of filter effects.</p>
1453 </edit:with>
1454 <edit:example href="examples/feBlend.svg" image="yes" link="yes"/>
1456 <h2 id="feColorMatrixElement">Filter primitive <span class="element-name">'feColorMatrix'</span></h2>
1458 <edit:elementsummary name='feColorMatrix'/>
1460 <p>This filter applies a matrix transformation:</p>
1461 <object data="mathml/feColorMatrix00.mml" type="application/mathml+xml" width="100%" height="140">
1462 <pre>| R' | | a00 a01 a02 a03 a04 | | R |
1463 | G' | | a10 a11 a12 a13 a14 | | G |
1464 | B' | = | a20 a21 a22 a23 a24 | * | B |
1465 | A' | | a30 a31 a32 a33 a34 | | A |
1466 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1467 </object>
1469 <p>on the RGBA color and alpha values of every pixel on the input graphics to
1470 produce a result with a new set of RGBA color and alpha values.</p>
1472 <p>The calculations are performed on non-premultiplied color values. If the
1473 input graphics consists of premultiplied color values, those values are
1474 automatically converted into non-premultiplied color values for this
1475 operation.</p>
1477 <p>These matrices often perform an identity mapping in the alpha channel. If
1478 that is the case, an implementation can avoid the costly undoing and redoing
1479 of the premultiplication for all pixels with A = 1.</p>
1481 <div class="adef-list">
1482 <p><em>Attribute definitions:</em></p>
1483 <dl>
1484 <dt id="feColorMatrixTypeAttribute"><span class="adef">type</span> =
1485 "<em>matrix | saturate | hueRotate | luminanceToAlpha</em>"</dt>
1486 <dd>Indicates the type of matrix operation. The keyword <span
1487 class="attr-name">matrix</span> indicates that a full 5x4 matrix of
1488 values will be provided. The other keywords represent convenience
1489 shortcuts to allow commonly used color operations to be performed
1490 without specifying a complete matrix.
1491 The <a>lacuna value</a> for <a>'type'</a> is <span class="attr-value">matrix</span>.
1492 <br />
1493 <span class="anim-target">Animatable: yes.</span></dd>
1494 <dt id="feColorMatrixValuesAttribute"><span class="adef">values</span> =
1495 "<em>list of <a><number></a>s</em>"</dt>
1496 <dd>The contents of <span class="attr-name">values</span> depends on the
1497 value of attribute <a href="#feColorMatrixTypeAttribute"><span
1498 class="attr-name">type</span></a>:
1499 <ul>
1500 <li>For <span class="attr-value">type="matrix"</span>, <span
1501 class="attr-name">values</span> is a list of 20 matrix values (a00
1502 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a
1503 comma. For example, the identity matrix could be expressed as:
1504 <pre>type="matrix"
1505 values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"</pre>
1506 </li>
1507 <li>For <span class="attr-value">type="saturate"</span>, <span
1508 class="attr-name">values</span> is a single real number value (0 to
1509 1). A <span class="attr-value">saturate</span> operation is
1510 equivalent to the following matrix operation:
1511 <p>
1512 <object data="mathml/feColorMatrix01.mml" type="application/mathml+xml" width="100%" height="130">
1513 <pre>| R' | | (0.2127 + 0.7873s) (0.7152 - 0.7152s) (0.0722 - 0.0722s) 0 0 | | R |
1514 | G' | | (0.2127 - 0.2127s) (0.7152 + 0.2848s) (0.0722 - 0.0722s) 0 0 | | G |
1515 | B' | = | (0.2127 - 0.2127s) (0.7152 - 0.7152s) (0.0722 + 0.9278s) 0 0 | * | B |
1516 | A' | | 0 0 0 1 0 | | A |
1517 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1518 </object>
1519 </p>
1520 </li>
1521 <li>For <span class="attr-value">type="hueRotate"</span>, <span
1522 class="attr-name">values</span> is a single one real number value
1523 (degrees). A <span class="attr-value">hueRotate</span> operation is
1524 equivalent to the following matrix operation:
1525 <p>
1526 <object data="mathml/feColorMatrix02.mml" type="application/mathml+xml" width="100%" height="130">
1527 <pre>| R' | | a00 a01 a02 0 0 | | R |
1528 | G' | | a10 a11 a12 0 0 | | G |
1529 | B' | = | a20 a21 a22 0 0 | * | B |
1530 | A' | | 0 0 0 1 0 | | A |
1531 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1532 </object>
1533 </p>
1535 where the terms a00, a01, etc. are calculated as follows:
1536 <p>
1537 <object data="mathml/feColorMatrix03.mml" type="application/mathml+xml" width="100%" height="230">
1538 <pre>| a00 a01 a02 | [0.2127 0.7152 0.0722]
1539 | a10 a11 a12 | = [0.2127 0.7152 0.0722] +
1540 | a20 a21 a22 | [0.2127 0.7152 0.0722]
1542 [ 0.7873 -0.7152 -0.0722]
1543 cos(hueRotate value) * [-0.2127 0.2848 -0.0722] +
1544 [-0.2127 -0.7152 0.9278]
1546 [-0.2127 -0.7152 0.9278]
1547 sin(hueRotate value) * [ 0.143 0.140 -0.283 ]
1548 [-0.7873 0.7152 0.0722]</pre>
1549 </object>
1550 </p>
1551 Thus, the upper left term of the hue matrix turns out to be:
1552 <p>
1553 <object data="mathml/feColorMatrix04.mml" type="application/mathml+xml" width="100%" height="30">
1554 <pre>.2127 + cos(hueRotate value) * 0.7873 - sin(hueRotate value) * 0.2127</pre>
1555 </object>
1556 </p>
1558 </li>
1559 <li>For <span class="attr-value">type="luminanceToAlpha"</span>,
1560 <span class="attr-name">values</span> is not applicable. A <span
1561 class="attr-value">luminanceToAlpha</span> operation is equivalent
1562 to the following matrix operation:
1563 <p>
1564 <object data="mathml/feColorMatrix05.mml" type="application/mathml+xml" width="100%" height="130">
1565 <pre> | R' | | 0 0 0 0 0 | | R |
1566 | G' | | 0 0 0 0 0 | | G |
1567 | B' | = | 0 0 0 0 0 | * | B |
1568 | A' | | 0.2127 0.7152 0.0722 0 0 | | A |
1569 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1570 </object>
1571 </p>
1572 </li>
1573 </ul>
1574 If the attribute is not specified, then the default behavior depends on
1575 the value of attribute <a>'feColorMatrix/type'</a>. If <span
1576 class="attr-value">type="matrix"</span>, then this attribute defaults
1577 to the identity matrix. If <span
1578 class="attr-value">type="saturate"</span>, then this attribute defaults
1579 to the value <span class="attr-value">1</span>, which results in the
1580 identity matrix. If <span class="attr-value">type="hueRotate"</span>,
1581 then this attribute defaults to the value <span
1582 class="attr-value">0</span>, which results in the identity matrix.<br />
1583 <span class="anim-target">Animatable: yes.</span> </dd>
1584 </dl>
1585 </div>
1587 <edit:example href="examples/feColorMatrix.svg" image="yes" link="yes"/>
1589 <h2 id="feComponentTransferElement">Filter primitive <span class="element-name">'feComponentTransfer'</span></h2>
1591 <edit:elementsummary name='feComponentTransfer'/>
1593 <p>This filter primitive performs component-wise remapping of data as
1594 follows:</p>
1595 <pre>R' = <a href="#feFuncRElement">feFuncR</a>( R )
1596 G' = <a href="#feFuncGElement">feFuncG</a>( G )
1597 B' = <a href="#feFuncBElement">feFuncB</a>( B )
1598 A' = <a href="#feFuncAElement">feFuncA</a>( A )</pre>
1600 <p>for every pixel. It allows operations like brightness adjustment, contrast
1601 adjustment, color balance or thresholding.</p>
1603 <p>The calculations are performed on non-premultiplied color values. If the
1604 input graphics consists of premultiplied color values, those values are
1605 automatically converted into non-premultiplied color values for this
1606 operation. (Note that the undoing and redoing of the premultiplication can be
1607 avoided if <a>'feFuncA'</a> is the identity transform
1608 and all alpha values on the source graphic are set to 1.)</p>
1610 <p>The child elements of a <a>'feComponentTransfer'</a> element specify the
1611 transfer functions for the four channels:</p>
1613 <ul id="transferFuncElements">
1614 <li><a>'feFuncR'</a> — transfer function for the red component of the input graphic</li>
1615 <li><a>'feFuncG'</a> — transfer function for the green component of the input graphic</li>
1616 <li><a>'feFuncB'</a> — transfer function for the blue component of the input graphic</li>
1617 <li><a>'feFuncA'</a> — transfer function for the alpha component of the input graphic</li>
1618 </ul>
1620 <p>The following rules apply to the processing of the <a>'feComponentTransfer'</a> element:</p>
1621 <ul>
1622 <li>If more than one <a>transfer function element</a> of the same kind is specified, the last occurrence is to be used.</li>
1623 <li>If any of the <a>transfer function elements</a> are unspecified, the <a>'feComponentTransfer'</a> must be processed as if those <a>transfer function elements</a> were specified with their <a>'type'</a> attributes set to <span class="attr-value">'identity'</span>.</li>
1624 </ul>
1626 <edit:with element='feFuncR'>
1628 <div id='feFuncRElement'>
1629 <edit:elementsummary name='feFuncR'/>
1630 </div>
1632 <div id='feFuncGElement'>
1633 <edit:elementsummary name='feFuncG'/>
1634 </div>
1636 <div id='feFuncBElement'>
1637 <edit:elementsummary name='feFuncB'/>
1638 </div>
1640 <div id='feFuncAElement'>
1641 <edit:elementsummary name='feFuncA'/>
1642 </div>
1644 <p id="TransferFunctionElementAttributes">The attributes below are the
1645 <span class='SVG-TermDefine'>transfer function element attributes</span>,
1646 which apply to the <a>transfer function elements</a>.</p>
1648 <div class="adef-list">
1649 <p><em>Attribute definitions:</em></p>
1650 <dl>
1651 <dt id="feComponentTransferTypeAttribute"><span class="adef">type</span>
1652 = "<em>identity | table | discrete | linear | gamma</em>"</dt>
1653 <dd><p>Indicates the type of component transfer function. The type of
1654 function determines the applicability of the other attributes.</p>
1655 <p>In the following, C is the initial component (e.g.,
1656 <a>'feFuncR'</a>), C' is the remapped component; both
1657 in the closed interval [0,1].</p>
1658 <ul>
1659 <li>For <span class="attr-value">identity</span>:
1660 <pre>C' = C</pre>
1661 </li>
1662 <li>For <span class="attr-value">table</span>, the function is
1663 defined by linear interpolation
1664 between values given in the attribute
1665 <a>'tableValues'</a>. The table has <em>n+1</em>
1666 values (i.e., v<sub>0</sub> to v<sub>n</sub>)
1667 specifying the start and end values for <em>n</em>
1668 evenly sized interpolation regions. Interpolations
1669 use the following formula:
1671 <p>For a value <code>C < 1</code> find <code>k</code> such that:</p>
1672 <p class="filterformula">k/n <= C < (k+1)/n</p>
1674 <p>The result <code>C'</code> is given by:</p>
1675 <p class="filterformula">C' = v<sub>k</sub> + (C - k/n)*n * (v<sub>k+1</sub> - v<sub>k</sub>)</p>
1677 <p>If <code>C = 1</code> then:</p>
1678 <p class="filterformula">C' = v<sub>n</sub>.</p>
1679 </li>
1680 <li>For <span class="attr-value">discrete</span>, the function is defined by the step function
1681 given in the attribute <a>'tableValues'</a>, which provides a list of
1682 <em>n</em> values (i.e., v<sub>0</sub> to v<sub>n-1</sub>) in order
1683 to identify a step function consisting of <em>n</em> steps. The
1684 step function is defined by the following formula:
1686 <p>For a value <code>C < 1</code> find <code>k</code> such that:</p>
1687 <p class="filterformula">k/n <= C < (k+1)/n</p>
1689 <p>For a value <code>C</code> pick a <code>k</code> such that:</p>
1690 <p class="filterformula">k/N <= C < (k+1)/N</p>
1692 <p>The result <code>C'</code> is given by:</p>
1693 <p class="filterformula">C' = v<sub>k</sub></p>
1694 <p>If <code>C = 1</code> then:</p>
1695 <p class="filterformula">C' = v<sub>n-1</sub>.</p>
1696 </li>
1697 <li>For <span class="attr-value">linear</span>, the function is
1698 defined by the following linear equation:
1699 <p class="filterformula">C' = <a
1700 href="#feComponentTransferSlopeAttribute"><span
1701 class="attr-name">slope</span></a> * C + <a
1702 href="#feComponentTransferInterceptAttribute"><span
1703 class="attr-name">intercept</span></a></p>
1704 </li>
1705 <li>For <span class="attr-value">gamma</span>, the function is
1706 defined by the following exponential function:
1707 <p class="filterformula">C' = <a
1708 href="#feComponentTransferAmplitudeAttribute"><span
1709 class="attr-name">amplitude</span></a> * pow(C, <a
1710 href="#feComponentTransferExponentAttribute"><span
1711 class="attr-name">exponent</span></a>) + <a
1712 href="#feComponentTransferOffsetAttribute"><span
1713 class="attr-name">offset</span></a></p>
1714 </li>
1715 </ul>
1716 <span class="anim-target">Animatable: yes.</span> </dd>
1717 <dt id="feComponentTransferTableValuesAttribute"><span
1718 class="adef">tableValues</span> = "<em>(list of <a><number></a>s)</em>"</dt>
1719 <dd>When <span class="attr-value">type="table"</span>, the list of
1720 <a><number></a>
1721 s <em>v0,v1,...vn</em>, separated by white space and/or a comma, which
1722 define the lookup table. An empty list results in an identity transfer
1723 function. If the attribute is not specified, then the effect is as if
1724 an empty list were provided.<br />
1725 <span class="anim-target">Animatable: yes.</span></dd>
1726 <dt id="feComponentTransferSlopeAttribute"><span
1727 class="adef">slope</span> = "<em><a><number></a></em>"</dt>
1728 <dd>When <span class="attr-value">type="linear"</span>, the slope of the
1729 linear function.<br />
1730 The <a>lacuna value</a> for <a>'slope'</a> is <span class="attr-value">1</span>.<br />
1731 <span class="anim-target">Animatable: yes.</span></dd>
1732 <dt id="feComponentTransferInterceptAttribute"><span
1733 class="adef">intercept</span> = "<em><a><number></a></em>"</dt>
1734 <dd>When <span class="attr-value">type="linear"</span>, the intercept of
1735 the linear function.<br />
1736 The <a>lacuna value</a> for <a>'intercept'</a> is <span class="attr-value">0</span>.<br />
1737 <span class="anim-target">Animatable: yes.</span></dd>
1738 <dt id="feComponentTransferAmplitudeAttribute"><span
1739 class="adef">amplitude</span> = "<em><a><number></a></em>"</dt>
1740 <dd>When <span class="attr-value">type="gamma"</span>, the amplitude of
1741 the gamma function.<br />
1742 The <a>lacuna value</a> for <a>'amplitude'</a> is <span class="attr-value">1</span>.<br />
1743 <span class="anim-target">Animatable: yes.</span></dd>
1744 <dt id="feComponentTransferExponentAttribute"><span
1745 class="adef">exponent</span> = "<em><a><number></a></em>"</dt>
1746 <dd>When <span class="attr-value">type="gamma"</span>, the exponent of
1747 the gamma function.<br />
1748 The <a>lacuna value</a> for <a>'exponent'</a> is <span class="attr-value">1</span>.<br />
1749 <span class="anim-target">Animatable: yes.</span></dd>
1750 <dt id="feComponentTransferOffsetAttribute"><span
1751 class="adef">offset</span> = "<em><a><number></a></em>"</dt>
1752 <dd>When <span class="attr-value">type="gamma"</span>, the offset of the
1753 gamma function.<br />
1754 The <a>lacuna value</a> for <a>'offset'</a> is <span class="attr-value">0</span>.<br />
1755 <span class="anim-target">Animatable: yes.</span></dd>
1756 </dl>
1757 </div>
1758 </edit:with>
1760 <edit:example href="examples/feComponentTransfer.svg" image="yes" link="yes"/>
1762 <h2 id="feCompositeElement">Filter primitive <span class="element-name">'feComposite'</span></h2>
1764 <edit:elementsummary name='feComposite'/>
1765 <edit:with element='feComposite'>
1767 <p>This filter performs the combination of the two input images pixel-wise in
1768 image space using one of the Porter-Duff [<a
1769 href="#ref-PORTERDUFF">PORTERDUFF</a>] compositing operations: <em>over, in,
1770 atop, out, xor</em> [<a href="#ref-SVG-COMPOSITING">SVG-COMPOSITING</a>]. Additionally, a component-wise <em>arithmetic</em>
1771 operation (with the result clamped between [0..1]) can be applied.</p>
1773 <p>The <em>arithmetic</em> operation is useful for combining the output from
1774 the <a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a> filters with texture
1775 data. It is also useful for implementing <em>dissolve</em>. If the
1776 <em>arithmetic</em> operation is chosen, each result pixel is computed using
1777 the following formula:</p>
1778 <pre>result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre>
1779 where:
1780 <ul>
1781 <li>
1782 <code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to <a>'in'</a> and <a>'in2'</a> respectively
1783 </li>
1784 <li>
1785 <code>k1, k2, k3</code> and <code>k4</code> indicate the values of the attributes with the same name
1786 </li>
1787 </ul>
1789 <p>For this filter primitive, the extent of the resulting image might grow as
1790 described in the section that describes the <a>filter primitive subregion</a>.</p>
1792 <div class="adef-list">
1793 <p><em>Attribute definitions:</em></p>
1794 <dl>
1795 <dt id="feCompositeOperatorAttribute"><span class="adef">operator</span>
1796 = "<em>over | in | out | atop | xor | arithmetic</em>"</dt>
1797 <dd>The compositing operation that is to be performed. All of the <span
1798 class="attr-name">operator</span> types except <span
1799 class="attr-value">arithmetic</span> match the corresponding operation as
1800 described in [<a href="#ref-PORTERDUFF">PORTERDUFF</a>]. The <span
1801 class="attr-value">arithmetic</span> operator is described above.
1802 The <a>lacuna value</a> for <a>'operator'</a> is <span class="attr-value">over</span>.
1803 <br />
1804 <span class="anim-target">Animatable: yes.</span></dd>
1805 <dt id="feCompositeK1Attribute"><span
1806 class="adef">k1</span> = "<em><a><number></a></em>"</dt>
1807 <dd>Only applicable if <span
1808 class="attr-value">operator="arithmetic"</span>.<br />
1809 The <a>lacuna value</a> for <a>'k1'</a> is <span class="attr-value">0</span>. <br />
1810 <span class="anim-target">Animatable: yes.</span></dd>
1811 <dt id="feCompositeK2Attribute"><span
1812 class="adef">k2</span> = "<em><a><number></a></em>"</dt>
1813 <dd>Only applicable if <span
1814 class="attr-value">operator="arithmetic"</span>.<br />
1815 The <a>lacuna value</a> for <a>'k2'</a> is <span class="attr-value">0</span>. <br />
1816 <span class="anim-target">Animatable: yes.</span></dd>
1817 <dt id="feCompositeK3Attribute"><span
1818 class="adef">k3</span> = "<em><a><number></a></em>"</dt>
1819 <dd>Only applicable if <span
1820 class="attr-value">operator="arithmetic"</span>.<br />
1821 The <a>lacuna value</a> for <a>'k3'</a> is <span class="attr-value">0</span>. <br />
1822 <span class="anim-target">Animatable: yes.</span></dd>
1823 <dt id="feCompositeK4Attribute"><span
1824 class="adef">k4</span> = "<em><a><number></a></em>"</dt>
1825 <dd>Only applicable if <span
1826 class="attr-value">operator="arithmetic"</span>.<br />
1827 The <a>lacuna value</a> for <a>'k4'</a> is <span class="attr-value">0</span>. <br />
1828 <span class="anim-target">Animatable: yes.</span></dd>
1829 <dt id="feCompositeIn2Attribute">
1830 <span class="adef">in2</span> = "<em>(see <a
1831 href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a>
1832 attribute)</em>"</dt>
1833 <dd>The second input image to the compositing operation. This attribute
1834 can take on the same values as the <a
1835 href="#FilterPrimitiveInAttribute"><span
1836 class="attr-name">in</span></a> attribute.<br />
1837 <span class="anim-target">Animatable: yes.</span></dd>
1838 </dl>
1839 </div>
1840 </edit:with>
1842 <edit:example href="examples/feComposite.svg" image="yes" link="yes"/>
1844 <h2 id="feConvolveMatrixElement">Filter primitive <span class="element-name">'feConvolveMatrix'</span></h2>
1846 <edit:elementsummary name='feConvolveMatrix'/>
1847 <edit:with element='feConvolveMatrix'>
1849 <p>feConvolveMatrix applies a matrix convolution filter effect. A convolution
1850 combines pixels in the input image with neighboring pixels to produce a
1851 resulting image. A wide variety of imaging operations can be achieved through
1852 convolutions, including blurring, edge detection, sharpening, embossing and
1853 beveling.</p>
1855 <p>A matrix convolution is based on an n-by-m matrix (the convolution kernel)
1856 which describes how a given pixel value in the input image is combined with
1857 its neighboring pixel values to produce a resulting pixel value. Each result
1858 pixel is determined by applying the kernel matrix to the corresponding source
1859 pixel and its neighboring pixels. The basic convolution formula which is
1860 applied to each color value for a given pixel is:</p>
1862 <p class="filterformula" id="feConvolveMatrixElementFormula">COLOR<sub>X,Y</sub> = ( <br />
1863 SUM <sub>I=0 to [<a
1864 href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br />
1865 SUM <sub>J=0 to [<a
1866 href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br />
1867 SOURCE <sub>X-<a>'targetX'</a>+J, Y-<a>'targetY'</a>+I</sub> * <a>'kernelMatrix'</a><sub><a
1868 href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-J-1, <a
1869 href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-I-1</sub> <br />
1870 } <br />
1871 } <br />
1872 ) / <a>'divisor'</a> + <a>'bias'</a> * ALPHA<sub>X,Y</sub><br />
1873 </p>
1875 <div class="note-editor">
1876 ED: Consider making this into mathml</div>
1878 <p>where "orderX" and "orderY" represent the X and Y values for the <a>'order'</a> attribute, "targetX" represents the value
1879 of the <a>'targetX'</a> attribute, "targetY" represents the
1880 value of the <a>'targetY'</a> attribute, "kernelMatrix" represents the
1881 value of the <a>'kernelMatrix'</a> attribute, "divisor" represents the
1882 value of the <a>'divisor'</a> attribute, and "bias" represents the
1883 value of the <a>'bias'</a> attribute.</p>
1885 <p>Note in the above formulas that the values in the kernel matrix are
1886 applied such that the kernel matrix is rotated 180 degrees relative to the
1887 source and destination images in order to match convolution theory as
1888 described in many computer graphics textbooks.</p>
1890 <p>To illustrate, suppose you have a input image which is 5 pixels by 5
1891 pixels, whose color values for one of the color channels are as follows:</p>
1892 <pre> 0 20 40 235 235
1893 100 120 140 235 235
1894 200 220 240 235 235
1895 225 225 255 255 255
1896 225 225 255 255 255</pre>
1898 <div class="note-editor">
1899 ED: Consider making this into mathml</div>
1901 <p>and you define a 3-by-3 convolution kernel as follows:</p>
1902 <pre> 1 2 3
1903 4 5 6
1904 7 8 9</pre>
1906 <div class="note-editor">
1907 ED: Consider making this into mathml</div>
1909 <p>Let's focus on the color value at the second row and second column of the
1910 image (source pixel value is 120). Assuming the simplest case (where the
1911 input image's pixel grid aligns perfectly with the kernel's pixel grid) and
1912 assuming default values for attributes <a>'divisor'</a>, <a>'targetX'</a> and
1913 <a>'targetY'</a>, then resulting color value will
1914 be:</p>
1915 <pre>(9* 0 + 8* 20 + 7* 40 +
1916 6*100 + 5*120 + 4*140 +
1917 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</pre>
1919 <div class="note-editor">
1920 ED: Consider making this into mathml</div>
1922 <p>Because they operate on pixels, matrix convolutions are inherently
1923 resolution-dependent. To make <a>'feConvolveMatrix'</a> produce resolution-independent
1924 results, an explicit value should be provided for either the <a>'filter/filterRes'</a> attribute on the <a>'filter element'</a> element
1925 and/or attribute <a>'kernelUnitLength'</a>.</p>
1927 <p><a>'kernelUnitLength'</a>, in combination with the other
1928 attributes, defines an implicit pixel grid in the filter effects coordinate
1929 system (i.e., the coordinate system established by the <a>'filter/primitiveUnits'</a> attribute). If the pixel grid
1930 established by <a>'kernelUnitLength'</a> is not scaled to match the
1931 pixel grid established by attribute <a>'filter/filterRes'</a> (implicitly or explicitly), then the
1932 input image will be temporarily rescaled to match its pixels with <a>'kernelUnitLength'</a>. The convolution happens on the
1933 resampled image. After applying the convolution, the image is resampled back
1934 to the original resolution.</p>
1936 <p>When the image must be resampled to match the coordinate system defined by
1937 <a>'kernelUnitLength'</a> prior to convolution, or
1938 resampled to match the device coordinate system after convolution, it is
1939 recommended that high quality viewers make use of appropriate interpolation
1940 techniques, for example bilinear or bicubic. Depending on the speed of the
1941 available interpolents, this choice may be affected by the <a>'image-rendering'</a> property setting. Note that
1942 implementations might choose approaches that minimize or eliminate resampling
1943 when not necessary to produce proper results, such as when the document is
1944 zoomed out such that <a>'kernelUnitLength'</a> is
1945 considerably smaller than a device pixel.</p>
1947 <div class="adef-list">
1948 <p><em>Attribute definitions:</em></p>
1949 <dl>
1950 <dt id="feConvolveMatrixElementOrderAttribute"><span
1951 class="adef">order</span> = "<span
1952 class="attr-value"><a><number-optional-number></a></span>"</dt>
1953 <dd>Indicates the number of cells in each dimension for <a>'kernelMatrix'</a>. The values provided must be
1954 <a><integer></a>
1955 s greater than zero. The first number, <orderX>, indicates the
1956 number of columns in the matrix. The second number, <orderY>,
1957 indicates the number of rows in the matrix. If <orderY> is not
1958 provided, it defaults to <orderX>.<br />
1959 A typical value is order="3". It is recommended that only small values
1960 (e.g., 3) be used; higher values may result in very high CPU overhead
1961 and usually do not produce results that justify the impact on
1962 performance.<br />
1963 If the attribute is not specified, the effect is as if a value of "3"
1964 were specified.<br />
1965 <span class="anim-target">Animatable: yes.</span></dd>
1966 <dt id="feConvolveMatrixElementKernelMatrixAttribute"><span
1967 class="adef">kernelMatrix</span> = "<span class="attr-value"><list of
1968 numbers></span>"</dt>
1969 <dd>The list of <a><number></a>
1970 s that make up the kernel matrix for the convolution. Values are
1971 separated by space characters and/or a comma. The number of entries in
1972 the list must equal <orderX> times <orderY>.<br />
1973 <span class="anim-target">Animatable: yes.</span></dd>
1974 <dt id="feConvolveMatrixElementDivisorAttribute"><span
1975 class="adef">divisor</span> = "<span
1976 class="attr-value"><a><number></a></span>"</dt>
1977 <dd>After applying the <span class="attr-name">kernelMatrix</span> to the
1978 input image to yield a number, that number is divided by <a>'divisor'</a> to yield the final destination color
1979 value. A divisor that is the sum of all the matrix values tends to have
1980 an evening effect on the overall color intensity of the result. If the
1981 specified divisor is zero then the default value will be used instead.
1982 The default value is the sum of all values in kernelMatrix, with the
1983 exception that if the sum is zero, then the divisor is set to 1.<br />
1984 <span class="anim-target">Animatable: yes.</span></dd>
1985 <dt id="feConvolveMatrixElementBiasAttribute"><span
1986 class="adef">bias</span> = "<span
1987 class="attr-value"><a><number></a></span>"</dt>
1988 <dd>After applying the <span class="attr-name">kernelMatrix</span> to the
1989 input image to yield a number and applying the <a>'divisor'</a>, the <a>'bias'</a> attribute is added to each component. One
1990 application of <a>'bias'</a> is when it is
1991 desirable to have <span class="attr-value">.5</span> gray value be the zero response of the filter.
1992 The bias property shifts the range of the filter. This allows representation of values that would
1993 otherwise be clamped to 0 or 1.<br />
1994 The <a>lacuna value</a> for <a>'bias'</a> is <span class="attr-value">0</span>.<br />
1995 <span class="anim-target">Animatable: yes.</span></dd>
1996 <dt id="feConvolveMatrixElementTargetXAttribute"><span
1997 class="adef">targetX</span> = "<span
1998 class="attr-value"><a><integer></a></span>"</dt>
1999 <dd>Determines the positioning in X of the convolution matrix relative to
2000 a given target pixel in the input image. The leftmost column of the
2001 matrix is column number zero. The value must be such that: 0 <=
2002 targetX < orderX. By default, the convolution matrix is centered in
2003 X over each pixel of the input image (i.e., targetX = floor ( orderX /
2004 2 )).<br />
2005 <span class="anim-target">Animatable: yes.</span></dd>
2006 <dt id="feConvolveMatrixElementTargetYAttribute"><span
2007 class="adef">targetY</span> = "<span
2008 class="attr-value"><a><integer></a></span>"</dt>
2009 <dd>Determines the positioning in Y of the convolution matrix relative to
2010 a given target pixel in the input image. The topmost row of the matrix
2011 is row number zero. The value must be such that: 0 <= targetY <
2012 orderY. By default, the convolution matrix is centered in Y over each
2013 pixel of the input image (i.e., targetY = floor ( orderY / 2 )).<br />
2014 <span class="anim-target">Animatable: yes.</span></dd>
2015 <dt id="feConvolveMatrixElementEdgeModeAttribute"><span
2016 class="adef">edgeMode</span> = "<span class="attr-value">duplicate | wrap |
2017 none</span>"</dt>
2018 <dd><p>Determines how to extend the input image as necessary with color
2019 values so that the matrix operations can be applied when the kernel is
2020 positioned at or near the edge of the input image.</p>
2021 <p>"duplicate" indicates that the input image is extended along each of
2022 its borders as necessary by duplicating the color values at the given
2023 edge of the input image.</p>
2024 <pre>Original N-by-M image, where m=M-1 and n=N-1:
2025 11 12 ... 1m 1M
2026 21 22 ... 2m 2M
2027 .. .. ... .. ..
2028 n1 n2 ... nm nM
2029 N1 N2 ... Nm NM
2030 Extended by two pixels using "duplicate":
2031 11 11 11 12 ... 1m 1M 1M 1M
2032 11 11 11 12 ... 1m 1M 1M 1M
2033 11 11 11 12 ... 1m 1M 1M 1M
2034 21 21 21 22 ... 2m 2M 2M 2M
2035 .. .. .. .. ... .. .. .. ..
2036 n1 n1 n1 n2 ... nm nM nM nM
2037 N1 N1 N1 N2 ... Nm NM NM NM
2038 N1 N1 N1 N2 ... Nm NM NM NM
2039 N1 N1 N1 N2 ... Nm NM NM NM</pre>
2041 <div class="note-editor">
2042 ED: Consider making this into mathml</div>
2043 <p>"wrap" indicates that the input image is extended by taking the
2044 color values from the opposite edge of the image.</p>
2045 <pre>Extended by two pixels using "wrap":
2046 nm nM n1 n2 ... nm nM n1 n2
2047 Nm NM N1 N2 ... Nm NM N1 N2
2048 1m 1M 11 12 ... 1m 1M 11 12
2049 2m 2M 21 22 ... 2m 2M 21 22
2050 .. .. .. .. ... .. .. .. ..
2051 nm nM n1 n2 ... nm nM n1 n2
2052 Nm NM N1 N2 ... Nm NM N1 N2
2053 1m 1M 11 12 ... 1m 1M 11 12
2054 2m 2M 21 22 ... 2m 2M 21 22</pre>
2056 <div class="note-editor">
2057 ED: Consider making this into mathml</div>
2058 <p>The value <span class="attr-value">none</span> indicates that the input image is extended with pixel values
2059 of zero for R, G, B and A.</p>
2060 <p>The <a>lacuna value</a> for <a>'edgeMode'</a> is <span class="attr-value">duplicate</span>.</p>
2061 <p><span class="anim-target">Animatable: yes.</span></p>
2062 </dd>
2063 <dt id="feConvolveMatrixElementKernelUnitLengthAttribute"><span
2064 class="adef">kernelUnitLength</span> = "<span
2065 class="attr-value"><a><number-optional-number></a></span>"</dt>
2066 <dd>The first number is the <dx> value. The second number is the
2067 <dy> value. If the <dy> value is not specified, it defaults
2068 to the same value as <dx>. Indicates the intended distance in
2069 current filter units (i.e., units as determined by the value of
2070 attribute <a>'filter/primitiveUnits'</a>) between successive columns
2071 and rows, respectively, in the <a>'kernelMatrix'</a>. By specifying value(s) for
2072 <a>'kernelUnitLength'</a>, the kernel becomes defined
2073 in a scalable, abstract coordinate system. If <a>'kernelUnitLength'</a> is not specified, the default
2074 value is one pixel in the offscreen bitmap, which is a pixel-based
2075 coordinate system, and thus potentially not scalable. For some level of
2076 consistency across display media and user agents, it is necessary that
2077 a value be provided for at least one of <a>'filter/filterRes'</a> and <a>'kernelUnitLength'</a>.
2078 In some implementations, the most consistent results and the fastest performance will be achieved if
2079 the pixel grid of the temporary offscreen images aligns with the pixel
2080 grid of the kernel.<br />
2081 If a negative or zero value is specified the default value will be used
2082 instead. <br />
2083 <span class="anim-target">Animatable: yes.</span></dd>
2084 <dt id="feConvolveMatrixElementPreserveAlphaAttribute"><span
2085 class="adef">preserveAlpha</span> = "<span class="attr-value">false |
2086 true</span>"</dt>
2087 <dd>A value of <span class="attr-value">false</span> indicates that the
2088 convolution will apply to all channels, including the alpha channel.
2089 In this case the <code>ALPHA<sub>X,Y</sub></code> of the
2090 <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
2091 <p class="filterformula">
2092 ALPHA<sub>X,Y</sub> = ( <br />
2093 SUM
2094 <sub>I=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br />
2095 SUM
2096 <sub>J=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br />
2097 SOURCE
2098 <sub>X-<a>'targetX'</a>+J, Y-<a>'targetY'</a>+I</sub> *
2099 <a>'kernelMatrix'</a><sub><a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-J-1,
2100 <a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-I-1</sub> <br />
2101 } <br />
2102 } <br />
2103 ) /
2104 <a>'divisor'</a> +
2105 <a>'bias'</a>
2106 <br />
2107 </p>
2108 <br />
2109 A value of <span class="attr-value">true</span> indicates that the
2110 convolution will only apply to the color channels. In this case, the
2111 filter will temporarily unpremultiply the color component values, apply
2112 the kernel, and then re-premultiply at the end.
2113 In this case the <code>ALPHA<sub>X,Y</sub></code>
2114 of the <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
2115 <p class="filterformula">
2116 ALPHA<sub>X,Y</sub> = SOURCE<sub>X,Y</sub>
2117 </p>
2118 The <a>lacuna value</a> for <a>'preserveAlpha'</a> is <span class="attr-value">false</span>.<br />
2119 <span class="anim-target">Animatable: yes.</span></dd>
2120 </dl>
2121 </div>
2123 </edit:with>
2125 <h2 id="feDiffuseLightingElement">Filter primitive <span
2126 class="element-name">'feDiffuseLighting'</span></h2>
2128 <edit:elementsummary name='feDiffuseLighting'/>
2130 <p>This filter primitive lights an image using the alpha channel as a bump
2131 map. The resulting image is an RGBA opaque image based on the light color
2132 with alpha = 1.0 everywhere. The lighting calculation follows the standard
2133 diffuse component of the Phong lighting model. The resulting image depends on
2134 the light color, light position and surface geometry of the input bump
2135 map.</p>
2137 <p>The light map produced by this filter primitive can be combined with a
2138 texture image using the multiply term of the <em>arithmetic</em> <a>'feComposite'</a> compositing method. Multiple
2139 light sources can be simulated by adding several of these light maps together
2140 before applying it to the texture image.</p>
2142 <p>The formulas below make use of 3x3 filters. Because they operate on
2143 pixels, such filters are inherently resolution-dependent. To make <a>'feDiffuseLighting'</a> produce
2144 resolution-independent results, an explicit value should be provided for
2145 either the <a>'filter/filterRes'</a> attribute on the <a>'filter element'</a> element
2146 and/or attribute <a>'feDiffuseLighting/kernelUnitLength'</a>.</p>
2148 <p><a>'feDiffuseLighting/kernelUnitLength'</a>, in combination with the other
2149 attributes, defines an implicit pixel grid in the filter effects coordinate
2150 system (i.e., the coordinate system established by the <a>'filter/primitiveUnits'</a> attribute). If the pixel grid
2151 established by <a>'feDiffuseLighting/kernelUnitLength'</a> is not scaled to match the
2152 pixel grid established by attribute <a>'filter/filterRes'</a> (implicitly or explicitly), then the
2153 input image will be temporarily rescaled to match its pixels with <a>'feDiffuseLighting/kernelUnitLength'</a>. The 3x3 filters are applied to the resampled image. After applying the filter, the image is resampled back
2154 to its original resolution.</p>
2156 <p><span class="requirement" id="assert_diffuseLightingImageResampling">When the image must be resampled, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example
2157 bilinear or bicubic.</span> Depending on the speed of the available interpolents,
2158 this choice may be affected by the <a>'image-rendering'</a> property setting. Note that
2159 implementations might choose approaches that minimize or eliminate resampling
2160 when not necessary to produce proper results, such as when the document is
2161 zoomed out such that <a>'feDiffuseLighting/kernelUnitLength'</a> is
2162 considerably smaller than a device pixel.</p>
2164 <p>For the formulas that follow, the
2165 <code>Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>)</code> function is
2166 defined as:</p>
2168 <div class="note-editor">
2169 ED: Consider making the following in mathml</div>
2171 <p class="filterformula">Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>) =
2172 sqrt(A<sub>x</sub>^2+A<sub>y</sub>^2+A<sub>z</sub>^2)</p>
2174 <p>The resulting RGBA image is computed as follows:</p>
2176 <p class="filterformula">D<sub>r</sub> = k<sub>d</sub> * N.L *
2177 L<sub>r</sub><br />
2178 D<sub>g</sub> = k<sub>d</sub> * N.L * L<sub>g</sub><br />
2179 D<sub>b</sub> = k<sub>d</sub> * N.L * L<sub>b</sub><br />
2180 D<sub>a</sub> = 1.0</p>
2182 <p>where</p>
2183 <dl>
2184 <dd>k<sub>d</sub> = diffuse lighting constant<br />
2185 N = surface normal unit vector, a function of x and y<br />
2186 L = unit vector pointing from surface to light, a function of x and y
2187 in the point and spot light cases<br />
2188 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light, a
2189 function of x and y in the spot light case</dd>
2190 </dl>
2192 <p>N is a function of x and y and depends on the surface gradient as
2193 follows:</p>
2195 <p>The surface described by the input alpha image I(x,y) is:</p>
2197 <p class="filterformula">Z (x,y) = surfaceScale * I(x,y)</p>
2199 <p id="SurfaceNormalCalculations">Surface normal is calculated using the Sobel gradient 3x3 filter.
2200 Different filter kernels are used depending on whether the given pixel is on
2201 the interior or an edge. For each case, the formula is:</p>
2202 <p class="filterformula">N<sub>x</sub> (x,y) = - surfaceScale *
2203 FACTOR<sub>x</sub> *<br />
2204 (K<sub>x</sub>(0,0)*I(x-dx,y-dy) +
2205 K<sub>x</sub>(1,0)*I(x,y-dy) +
2206 K<sub>x</sub>(2,0)*I(x+dx,y-dy) +<br />
2207 K<sub>x</sub>(0,1)*I(x-dx,y) +
2208 K<sub>x</sub>(1,1)*I(x,y) +
2209 K<sub>x</sub>(2,1)*I(x+dx,y) +<br />
2210 K<sub>x</sub>(0,2)*I(x-dx,y+dy) +
2211 K<sub>x</sub>(1,2)*I(x,y+dy) +
2212 K<sub>x</sub>(2,2)*I(x+dx,y+dy))<br />
2213 N<sub>y</sub> (x,y) = - surfaceScale * FACTOR<sub>y</sub>
2214 *<br />
2215 (K<sub>y</sub>(0,0)*I(x-dx,y-dy) +
2216 K<sub>y</sub>(1,0)*I(x,y-dy) +
2217 K<sub>y</sub>(2,0)*I(x+dx,y-dy) +<br />
2218 K<sub>y</sub>(0,1)*I(x-dx,y) +
2219 K<sub>y</sub>(1,1)*I(x,y) +
2220 K<sub>y</sub>(2,1)*I(x+dx,y) +<br />
2221 K<sub>y</sub>(0,2)*I(x-dx,y+dy) +
2222 K<sub>y</sub>(1,2)*I(x,y+dy) +
2223 K<sub>y</sub>(2,2)*I(x+dx,y+dy))<br />
2224 N<sub>z</sub> (x,y) = 1.0<br />
2225 <br />
2226 N = (N<sub>x</sub>, N<sub>y</sub>, N<sub>z</sub>) /
2227 Norm((N<sub>x</sub>,N<sub>y</sub>,N<sub>z</sub>))</p>
2229 <p>In these formulas, the <code>dx</code> and <code>dy</code> values (e.g.,
2230 <code>I(x-dx,y-dy)</code>), represent deltas relative to a given
2231 <code>(x,y)</code> position for the purpose of estimating the slope of the
2232 surface at that point. These deltas are determined by the value (explicit or
2233 implicit) of attribute <a>'feDiffuseLighting/kernelUnitLength'</a>.</p>
2235 <table summary="feDiffuseLighting formulas" border="1">
2236 <colgroup><col width="33.3%" /><col width="33.3%" /><col width="*"
2237 /></colgroup>
2238 <tbody>
2239 <tr>
2240 <td><p>Top/left corner:</p>
2242 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br />
2243 K<sub>x</sub> =<br />
2244 | 0 0 0 |<br />
2245 | 0 -2 2 |<br />
2246 | 0 -1 1 |<br />
2247 <br />
2248 FACTOR<sub>y</sub>=2/(3*dy)<br />
2249 K<sub>y</sub> = <br />
2250 | 0 0 0 |<br />
2251 | 0 -2 -1 |<br />
2252 | 0 2 1 |</p>
2253 </td>
2254 <td><p>Top row:</p>
2256 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br />
2257 K<sub>x</sub> =<br />
2258 | 0 0 0 |<br />
2259 | -2 0 2 |<br />
2260 | -1 0 1 |<br />
2261 <br />
2262 FACTOR<sub>y</sub>=1/(2*dy)<br />
2263 K<sub>y</sub> = <br />
2264 | 0 0 0 |<br />
2265 | -1 -2 -1 |<br />
2266 | 1 2 1 |</p>
2267 </td>
2268 <td><p>Top/right corner:</p>
2270 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br />
2271 K<sub>x</sub> =<br />
2272 | 0 0 0 |<br />
2273 | -2 2 0 |<br />
2274 | -1 1 0 |<br />
2275 <br />
2276 FACTOR<sub>y</sub>=2/(3*dy)<br />
2277 K<sub>y</sub> = <br />
2278 | 0 0 0 |<br />
2279 | -1 -2 0 |<br />
2280 | 1 2 0 |</p>
2281 </td>
2282 </tr>
2283 <tr>
2284 <td><p>Left column:</p>
2286 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br />
2287 K<sub>x</sub> =<br />
2288 | 0 -1 1 |<br />
2289 | 0 -2 2 |<br />
2290 | 0 -1 1 |<br />
2291 <br />
2292 FACTOR<sub>y</sub>=1/(3*dy)<br />
2293 K<sub>y</sub> = <br />
2294 | 0 -2 -1 |<br />
2295 | 0 0 0 |<br />
2296 | 0 2 1 |</p>
2297 </td>
2298 <td><p>Interior pixels:</p>
2300 <p class="filterformula">FACTOR<sub>x</sub>=1/(4*dx)<br />
2301 K<sub>x</sub> =<br />
2302 | -1 0 1 |<br />
2303 | -2 0 2 |<br />
2304 | -1 0 1 |<br />
2305 <br />
2306 FACTOR<sub>y</sub>=1/(4*dy)<br />
2307 K<sub>y</sub> = <br />
2308 | -1 -2 -1 |<br />
2309 | 0 0 0 |<br />
2310 | 1 2 1 |</p>
2311 </td>
2312 <td><p>Right column:</p>
2314 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br />
2315 K<sub>x</sub> =<br />
2316 | -1 1 0|<br />
2317 | -2 2 0|<br />
2318 | -1 1 0|<br />
2319 <br />
2320 FACTOR<sub>y</sub>=1/(3*dy)<br />
2321 K<sub>y</sub> = <br />
2322 | -1 -2 0 |<br />
2323 | 0 0 0 |<br />
2324 | 1 2 0 |</p>
2325 </td>
2326 </tr>
2327 <tr>
2328 <td><p>Bottom/left corner:</p>
2330 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br />
2331 K<sub>x</sub> =<br />
2332 | 0 -1 1 |<br />
2333 | 0 -2 2 |<br />
2334 | 0 0 0 |<br />
2335 <br />
2336 FACTOR<sub>y</sub>=2/(3*dy)<br />
2337 K<sub>y</sub> = <br />
2338 | 0 -2 -1 |<br />
2339 | 0 2 1 |<br />
2340 | 0 0 0 |</p>
2341 </td>
2342 <td><p>Bottom row:</p>
2344 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br />
2345 K<sub>x</sub> =<br />
2346 | -1 0 1 |<br />
2347 | -2 0 2 |<br />
2348 | 0 0 0 |<br />
2349 <br />
2350 FACTOR<sub>y</sub>=1/(2*dy)<br />
2351 K<sub>y</sub> = <br />
2352 | -1 -2 -1 |<br />
2353 | 1 2 1 |<br />
2354 | 0 0 0 |</p>
2355 </td>
2356 <td><p>Bottom/right corner:</p>
2358 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br />
2359 K<sub>x</sub> =<br />
2360 | -1 1 0 |<br />
2361 | -2 2 0 |<br />
2362 | 0 0 0 |<br />
2363 <br />
2364 FACTOR<sub>y</sub>=2/(3*dy)<br />
2365 K<sub>y</sub> = <br />
2366 | -1 -2 0 |<br />
2367 | 1 2 0 |<br />
2368 | 0 0 0 |</p>
2369 </td>
2370 </tr>
2371 </tbody>
2372 </table>
2374 <p>L, the unit vector from the image sample to the light, is calculated as
2375 follows:</p>
2377 <p>For Infinite light sources it is constant:</p>
2379 <p class="filterformula">L<sub>x</sub> = cos(azimuth)*cos(elevation)<br />
2380 L<sub>y</sub> = sin(azimuth)*cos(elevation)<br />
2381 L<sub>z</sub> = sin(elevation)</p>
2383 <p>For Point and spot lights it is a function of position:</p>
2385 <p class="filterformula">L<sub>x</sub> = Light<sub>x</sub> - x<br />
2386 L<sub>y</sub> = Light<sub>y</sub> - y<br />
2387 L<sub>z</sub> = Light<sub>z</sub> - Z(x,y)<br />
2388 <br />
2389 L = (L<sub>x</sub>, L<sub>y</sub>, L<sub>z</sub>) / Norm(L<sub>x</sub>,
2390 L<sub>y</sub>, L<sub>z</sub>)</p>
2392 <p>where Light<sub>x</sub>, Light<sub>y</sub>, and Light<sub>z</sub> are the
2393 input light position.</p>
2395 <p>L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub>, the light color vector, is a
2396 function of position in the spot light case only:</p>
2398 <p class="filterformula">L<sub>r</sub> =
2399 Light<sub>r</sub>*pow((-L.S),specularExponent)<br />
2400 L<sub>g</sub> = Light<sub>g</sub>*pow((-L.S),specularExponent)<br />
2401 L<sub>b</sub> = Light<sub>b</sub>*pow((-L.S),specularExponent)</p>
2403 <p>where S is the unit vector pointing from the light to the point
2404 (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:</p>
2406 <p class="filterformula">S<sub>x</sub> = pointsAtX - Light<sub>x</sub><br />
2407 S<sub>y</sub> = pointsAtY - Light<sub>y</sub><br />
2408 S<sub>z</sub> = pointsAtZ - Light<sub>z</sub><br />
2409 <br />
2410 S = (S<sub>x</sub>, S<sub>y</sub>, S<sub>z</sub>) / Norm(S<sub>x</sub>,
2411 S<sub>y</sub>, S<sub>z</sub>)</p>
2413 <p>If L.S is positive, no light is present. (L<sub>r</sub> = L<sub>g</sub> =
2414 L<sub>b</sub> = 0). If <a>'feSpotLight/limitingConeAngle'</a> is specified, -L.S < cos(limitingConeAngle) also indicates that no light is present.</p>
2416 <div class="adef-list">
2417 <p><em>Attribute definitions:</em></p>
2418 <dl>
2419 <dt id="feDiffuseLightingSurfaceScaleAttribute"><span
2420 class="adef">surfaceScale</span> = "<em><a><number></a></em>"</dt>
2421 <dd>height of surface when A<sub>in</sub> = 1.<br />
2422 If the attribute is not specified, then the effect is as if a value of
2423 <span class="attr-value">1</span> were specified.<br />
2424 <span class="anim-target">Animatable: yes.</span></dd>
2425 <dt id="feDiffuseLightingDiffuseConstantAttribute"><span
2426 class="adef">diffuseConstant</span> = "<em><a><number></a></em>"</dt>
2427 <dd>kd in Phong lighting model. In SVG, this can be any non-negative
2428 number.<br />
2429 If the attribute is not specified, then the effect is as if a value of
2430 <span class="attr-value">1</span> were specified.<br />
2431 <span class="anim-target">Animatable: yes.</span></dd>
2432 <dt id="feDiffuseLightingKernelUnitLengthAttribute"><span
2433 class="adef">kernelUnitLength</span> = "<span
2434 class="attr-value"><a><number-optional-number></a></span>"</dt>
2435 <dd>The first number is the <dx> value. The second number is the
2436 <dy> value. If the <dy> value is not specified, it defaults
2437 to the same value as <dx>. Indicates the intended distance in
2438 current filter units (i.e., units as determined by the value of
2439 attribute <a>'filter/primitiveUnits'</a>) for <code>dx</code> and
2440 <code>dy</code>, respectively, in the <a
2441 href="#SurfaceNormalCalculations">surface normal calculation
2442 formulas</a>. By specifying value(s) for <span
2443 class="attr-name">kernelUnitLength</span>, the kernel becomes defined
2444 in a scalable, abstract coordinate system. If <span
2445 class="attr-name">kernelUnitLength</span> is not specified, the
2446 <code>dx</code> and <code>dy</code> values should represent very small
2447 deltas relative to a given <code>(x,y)</code> position, which might be
2448 implemented in some cases as one pixel in the intermediate image
2449 offscreen bitmap, which is a pixel-based coordinate system, and thus
2450 potentially not scalable. For some level of consistency across display
2451 media and user agents, it is necessary that a value be provided for at
2452 least one of <a>'filter/filterRes'</a> and <span
2453 class="attr-name">kernelUnitLength</span>. Discussion of intermediate
2454 images are in the <a href="#Introduction">Introduction</a> and in the
2455 description of attribute <a>'filter/filterRes'</a>.<br />
2456 If a negative or zero value is specified the default value will be used
2457 instead. <br />
2458 <span class="anim-target">Animatable: yes.</span></dd>
2459 </dl>
2460 </div>
2462 <p>The light source is defined by one of the child elements <a>'feDistantLight'</a>,
2463 <a>'fePointLight'</a> or <a>'feSpotLight'</a>. The light color is specified
2464 by property <a>'lighting-color'</a>.</p>
2466 <h2 id="feDisplacementMapElement">Filter primitive <span class="element-name">'feDisplacementMap'</span></h2>
2468 <edit:elementsummary name='feDisplacementMap'/>
2470 <p>This filter primitive uses the pixels values from the image from <a>'feDisplacementMap/in2'</a>
2471 to spatially displace the image from <a>'in'</a>.
2472 This is the transformation to be performed:</p>
2474 <pre> P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
2475 </pre>
2477 <p>where P(x,y) is the input image, <a>'in'</a>, and
2478 P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of
2479 the channel designated by the <a>'feDisplacementMap/xChannelSelector'</a> and
2480 <a>'feDisplacementMap/yChannelSelector'</a>. For example, to use the R component of <a>'feDisplacementMap/in2'</a>
2481 to control displacement in x and the G component of Image2 to control
2482 displacement in y, set <a>'feDisplacementMap/xChannelSelector'</a> to <span class="attr-value">"R"</span> and
2483 <a>'feDisplacementMap/yChannelSelector'</a> to <span class="attr-value">"G"</span>.</p>
2485 <p>The displacement map, <a>'feDisplacementMap/in2'</a>, defines the inverse of the mapping
2486 performed.</p>
2488 <p>The input image in is to remain premultiplied for this filter primitive. The calculations using the pixel values from <a>'feDisplacementMap/in2'</a> are performed using non-premultiplied color values. If the image from <a>'feDisplacementMap/in2'</a> consists of premultiplied color values, those values are automatically converted into non-premultiplied color values before performing this operation.</p>
2490 <p>This filter can have arbitrary non-localized effect on the input which
2491 might require substantial buffering in the processing pipeline. However with
2492 this formulation, any intermediate buffering needs can be determined by
2493 <a>'feDisplacementMap/scale'</a> which represents the maximum range of displacement in either x
2494 or y.</p>
2496 <p>When applying this filter, the source pixel location will often lie
2497 between several source pixels. In this case it is recommended that high
2498 quality viewers apply an interpolent on the surrounding pixels, for example
2499 bilinear or bicubic, rather than simply selecting the nearest source pixel.
2500 Depending on the speed of the available interpolents, this choice may be
2501 affected by the <a>'image-rendering'</a> property
2502 setting.</p>
2504 <p>The <a>'color-interpolation-filters'</a> property only applies to the
2505 <a>'feDisplacementMap/in2'</a> source image and does not apply to the <a>'in'</a> source image.
2506 The <a>'in'</a> source image must remain in its current color space.
2507 </p>
2509 <div class="adef-list">
2510 <p><em>Attribute definitions:</em></p>
2511 <dl>
2512 <dt id="feDisplacementMapScaleAttribute"><span class="adef">scale</span>
2513 = "<em><a><number></a></em>"</dt>
2514 <dd>Displacement scale factor. The amount is expressed in the coordinate
2515 system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
2516 element.<br />
2517 When the value of this attribute is <span class="attr-value">0</span>,
2518 this operation has no effect on the source image.<br />
2519 <p>The <a>lacuna value</a> for <a>'feDisplacementMap/scale'</a> is <span class="attr-value">0</span>.</p>
2520 <span class="anim-target">Animatable: yes.</span></dd>
2521 <dt id="feDisplacementMapXChannelSelectorAttribute"><span
2522 class="adef">xChannelSelector</span> = "<em>R | G | B | A</em>"</dt>
2523 <dd>Indicates which channel from <a>'feDisplacementMap/in2'</a> to use to displace the pixels in <a>'in'</a> along the x-axis.
2524 The <a>lacuna value</a> for <a>'feDisplacementMap/xChannelSelector'</a> is <span class="attr-value">A</span>.
2525 <br />
2526 <span class="anim-target">Animatable: yes.</span></dd>
2527 <dt id="feDisplacementMapYChannelSelectorAttribute"><span
2528 class="adef">yChannelSelector</span> = "<em>R | G | B | A</em>"</dt>
2529 <dd>Indicates which channel from <a>'feDisplacementMap/in2'</a> to use to displace the pixels in <a>'in'</a> along the y-axis.
2530 The <a>lacuna value</a> for <a>'feDisplacementMap/yChannelSelector'</a> is <span class="attr-value">A</span>.
2531 <br />
2532 <span class="anim-target">Animatable: yes.</span></dd>
2533 <dt id="feDisplacementMapIn2Attribute"><span class="adef">in2</span> =
2534 "<em>(see <a>'in'</a> attribute)</em>"</dt>
2535 <dd>The second input image, which is used to displace the pixels in the
2536 image from attribute <a>'in'</a>. This attribute can take on the same
2537 values as the <a>'in'</a> attribute.<br />
2538 <span class="anim-target">Animatable: yes.</span></dd>
2539 </dl>
2540 </div>
2542 <h2 id="feFloodElement">Filter primitive <span
2543 class="element-name">'feFlood'</span></h2>
2545 <edit:elementsummary name='feFlood'/>
2547 <p>This filter primitive creates a rectangle filled with the color and
2548 opacity values from properties <span class="prop-name">'flood-color'</span>
2549 and <span class="prop-name">'flood-opacity'</span>. The rectangle is as large
2550 as the <a href="#FilterPrimitiveSubRegion">filter primitive subregion</a>
2551 established by the <span class="element-name">'feFlood'</span> element.</p>
2553 <div class="adef-list">
2554 </div>
2556 <p>The <span class="prop-name">'flood-color'</span> property indicates what
2557 color to use to flood the current <a href="#FilterPrimitiveSubRegion">filter
2558 primitive subregion</a>. The keyword <span
2559 class="attr-value">currentColor</span> and ICC colors can be specified in the
2560 same manner as within a <paint> specification for the <span
2561 class="prop-name">'fill'</span> and <span class="prop-name">'stroke'</span>
2562 properties.</p>
2564 <div class="propdef">
2565 <dl>
2566 <dt id="FloodColorProperty"><span class="propdef-title prop-name">'flood-color'</span></dt>
2567 <dd>
2568 <table summary="flood-color property" class="propinfo" cellspacing="0"
2569 cellpadding="0">
2570 <tbody>
2571 <tr valign="baseline">
2572 <td><em>Value:</em> </td>
2573 <td>currentColor |<br />
2574 <a><color></a>
2575 [<a><icccolor></a>] |<br />
2576 <a class="noxref"
2577 href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span
2578 class="value-inst-inherit noxref">inherit</span></a></td>
2579 </tr>
2580 <tr valign="baseline">
2581 <td><em>Initial:</em> </td>
2582 <td>black</td>
2583 </tr>
2584 <tr valign="baseline">
2585 <td><em>Applies to:</em> </td>
2586 <td><a href="#feFloodElement"><span
2587 class="element-name">'feFlood'</span></a> and <a
2588 href="#feDropShadowElement"><span
2589 class="element-name">'feDropShadow'</span></a> elements</td>
2590 </tr>
2591 <tr valign="baseline">
2592 <td><em>Inherited:</em> </td>
2593 <td>no</td>
2594 </tr>
2595 <tr valign="baseline">
2596 <td><em>Percentages:</em> </td>
2597 <td>N/A</td>
2598 </tr>
2599 <tr valign="baseline">
2600 <td><em>Media:</em> </td>
2601 <td>visual</td>
2602 </tr>
2603 <tr valign="baseline">
2604 <td><em>Animatable:</em> </td>
2605 <td>yes</td>
2606 </tr>
2607 </tbody>
2608 </table>
2609 </dd>
2610 </dl>
2611 </div>
2613 <p>The <span class="prop-name">'flood-opacity'</span> property defines the
2614 opacity value to use across the entire <a
2615 href="#FilterPrimitiveSubRegion">filter primitive subregion</a>.</p>
2617 <div class="propdef">
2618 <dl>
2619 <dt id="OpacityFloodOpacityProperty"><span class="propdef-title prop-name">'flood-opacity'</span></dt>
2620 <dd>
2621 <table summary="flood-opacity property" class="propinfo"
2622 cellspacing="0" cellpadding="0">
2623 <tbody>
2624 <tr valign="baseline">
2625 <td><em>Value:</em> </td>
2626 <td><opacity-value> | <a class="noxref"
2627 href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span
2628 class="value-inst-inherit noxref">inherit</span></a></td>
2629 </tr>
2630 <tr valign="baseline">
2631 <td><em>Initial:</em> </td>
2632 <td>1</td>
2633 </tr>
2634 <tr valign="baseline">
2635 <td><em>Applies to:</em> </td>
2636 <td><a href="#feFloodElement"><span
2637 class="element-name">'feFlood'</span></a> and <a
2638 href="#feDropShadowElement"><span
2639 class="element-name">'feDropShadow'</span></a> elements</td>
2640 </tr>
2641 <tr valign="baseline">
2642 <td><em>Inherited:</em> </td>
2643 <td>no</td>
2644 </tr>
2645 <tr valign="baseline">
2646 <td><em>Percentages:</em> </td>
2647 <td>N/A</td>
2648 </tr>
2649 <tr valign="baseline">
2650 <td><em>Media:</em> </td>
2651 <td>visual</td>
2652 </tr>
2653 <tr valign="baseline">
2654 <td><em>Animatable:</em> </td>
2655 <td>yes</td>
2656 </tr>
2657 </tbody>
2658 </table>
2659 </dd>
2660 </dl>
2661 </div>
2663 <h2 id="feGaussianBlurElement">Filter primitive <span
2664 class="element-name">'feGaussianBlur'</span></h2>
2666 <edit:elementsummary name='feGaussianBlur'/>
2667 <edit:with element='feGaussianBlur'>
2669 <p>This filter primitive performs a Gaussian blur on the input image.</p>
2671 <p>The Gaussian blur kernel is an approximation of the normalized
2672 convolution:</p>
2674 <p class="filterformula">G(x,y) = H(x)I(y)</p>
2675 <p>where</p>
2676 <p class="filterformula">H(x) = exp(-x<sup>2</sup>/ (2s<sup>2</sup>)) / sqrt(2* pi*s<sup>2</sup>)</p>
2677 <p>and</p>
2678 <p class="filterformula">I(x) = exp(-y<sup>2</sup>/ (2t<sup>2</sup>)) / sqrt(2* pi*t<sup>2</sup>)</p>
2679 <p>with 's' being the standard deviation in the x direction
2680 and 't' being the standard deviation in the y direction, as specified by <a>'stdDeviation'</a>.</p>
2682 <p>The value of <a>'stdDeviation'</a> can be either one or two numbers.
2683 If two numbers are provided, the first number represents a standard deviation
2684 value along the x-axis of the current coordinate system and the second value
2685 represents a standard deviation in Y. If one number is provided, then that
2686 value is used for both X and Y.</p>
2688 <p>Even if only one value is provided for <a>'stdDeviation'</a>, this can be implemented as a
2689 separable convolution.</p>
2691 <p>For larger values of 's' (s >= 2.0), an approximation can be used:
2692 Three successive box-blurs build a piece-wise quadratic convolution kernel,
2693 which approximates the Gaussian kernel to within roughly 3%.</p>
2695 <p class="filterformula">let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)</p>
2697 <p>... if d is odd, use three box-blurs of size 'd', centered on the output
2698 pixel.</p>
2700 <p>... if d is even, two box-blurs of size 'd' (the first one centered on the
2701 pixel boundary between the output pixel and the one to the left, the second
2702 one centered on the pixel boundary between the output pixel and the one to
2703 the right) and one box blur of size 'd+1' centered on the output pixel.</p>
2705 <p>The approximation formula also applies correspondingly to 't'.</p>
2707 <p>Frequently this operation will take place on alpha-only images, such as
2708 that produced by the built-in input, <a href="#SourceAlpha"><span
2709 class="attr-value">SourceAlpha</span></a>. The implementation may notice this
2710 and optimize the single channel case. If the input has infinite extent and is
2711 constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>,
2712 this operation has no effect. If the input has infinite extent and the filter result
2713 is the input to an <a>'feTile'</a>, the filter is evaluated with periodic boundary conditions.</p>
2715 <div class="adef-list">
2716 <p><em>Attribute definitions:</em></p>
2717 <dl>
2718 <dt id="feGaussianBlurStdDeviationAttribute"><span
2719 class="adef">stdDeviation</span> =
2720 "<em><a><number-optional-number></a></em>"</dt>
2721 <dd>The standard deviation for the blur operation. If two <a><number></a>
2722 s are provided, the first number represents a standard deviation value
2723 along the x-axis of the coordinate system established by attribute <a>'filter/primitiveUnits'</a> on the <a
2724 href="#FilterElement"><span class="element-name">'filter'</span></a>
2725 element. The second value represents a standard deviation in Y. If one
2726 number is provided, then that value is used for both X and Y.<br />
2727 A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).<br />
2728 If <a>'stdDeviation'</a> is <span class="attr-value">0</span> in only one of X or Y,
2729 then the effect is that the blur is only applied in the direction that has a non-zero value.
2730 <br />
2731 The <a>lacuna value</a> for <a>'stdDeviation'</a> is <span class="attr-value">0</span>.<br />
2732 <span class="anim-target">Animatable: yes.</span></dd>
2733 </dl>
2734 </div>
2736 <p><a href="#AnExample">The example</a> at the start of this chapter makes
2737 use of the <a>'feGaussianBlur'</a> filter primitive
2738 to create a drop shadow effect.</p>
2739 </edit:with>
2741 <h2 id="feUnsharpMaskElement">Filter primitive <span
2742 class="element-name">'feUnsharpMask'</span></h2>
2744 <edit:elementsummary name='feUnsharpMask'/>
2746 <p>This filter primitive performs an image sharpening operation on the input image. This is traditionally known as an unsharp mask operation.</p>
2748 <p>The filter first does a <a>'feGaussianBlur'</a> operation on the input image and then subtracts the difference between the input image and the blurred image.</p>
2750 <p>
2751 For controlling the result there are three attributes that can be used:
2752 <ul>
2753 <li>the <a>'feUnsharpMask/stdDeviation'</a> attribute controls how much to blur the input image</li>
2754 <li>the <a>'feUnsharpMask/threshold'</a> attribute can be used for controlling when the difference should not be subtracted</li>
2755 <li>the <a>'feUnsharpMask/amount'</a> attribute specifies an optional multiplier for the difference to subtract</li>
2756 </ul>
2757 </p>
2759 <h2 id="feImageElement">Filter primitive <span
2760 class="element-name">'feImage'</span></h2>
2762 <edit:elementsummary name='feImage'/>
2763 <edit:with element='feImage'>
2765 <p>This filter primitive refers to a graphic external to this filter element,
2766 which is loaded or rendered into an RGBA raster and becomes the result of the
2767 filter primitive.</p>
2769 <p>This filter primitive can refer to an external image or can be a reference
2770 to another piece of SVG. It produces an image similar to the built-in image
2771 source <a href="#SourceGraphic"><span
2772 class="attr-value">SourceGraphic</span></a> except that the graphic comes
2773 from an external source.</p>
2775 <p>If the <span class="attr-name">xlink:href</span> references a stand-alone
2776 image resource such as a JPEG, PNG or SVG file, then the image resource is
2777 rendered according to the behavior of the <span
2778 class="element-name">'image'</span> element; otherwise, the referenced
2779 resource is rendered according to the behavior of the <span
2780 class="element-name">'use'</span> element. In either case, the current user
2781 coordinate system depends on the value of attribute <a>'filter/primitiveUnits'</a> on the <a
2782 href="#FilterElement"><span class="element-name">'filter'</span></a> element.
2783 The processing of the <span class="attr-name">preserveAspectRatio</span>
2784 attribute on the <span class="element-name">'feImage'</span> element is
2785 identical to that of the <a href="struct.html#ImageElement"><span
2786 class="element-name">'image'</span></a> element.</p>
2788 <p><span class="requirement" id="assert_hqImageResampling">When the referenced image must be resampled to match the device coordinate
2789 system, it is recommended that high quality viewers make use of appropriate
2790 interpolation techniques, for example bilinear or bicubic.</span> Depending on the
2791 speed of the available interpolents, this choice may be affected by the <span
2792 class="prop-name">'image-rendering'</span> property setting.</p>
2794 <div class="adef-list">
2795 <p><em>Attribute definitions:</em></p>
2796 <dl>
2797 <dt id="feImageHrefAttribute"><span
2798 class="adef">xlink:href</span> =
2799 "<span class="attr-value"><IRI></span>"</dt>
2800 <dd>An <a>IRI reference</a>
2801 to an image resource or to an element.
2802 <br />
2803 <span class="anim-target">Animatable: yes.</span></dd>
2804 <dt id="feImageElementPreserveAspectRatioAttribute">
2805 <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'>[defer] <align> [<meetOrSlice>]</span>"
2806 </dt>
2807 <dd>
2808 <p>
2809 See <a>'preserveAspectRatio'</a>.
2810 </p>
2811 <p>
2812 The lacuna value for <a>'preserveAspectRatio'</a> is <span class="attr-value">xMidYMid meet</span>.
2813 </p>
2814 <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
2815 </dd>
2816 </dl>
2817 </div>
2819 <p><span class="example-ref">Example feImage</span> illustrates how images are placed relative
2820 to an object. From left to right:</p>
2821 <ul>
2822 <li>
2823 The default placement of an image. Note that the image is
2824 centered in the <a>filter region</a> and has the maximum size that will
2825 fit in the region consistent with preserving the aspect ratio.
2826 </li>
2827 <li>
2828 The image stretched to fit the bounding box of an object.
2829 </li>
2830 <li>
2831 The image placed using user coordinates. Note that the image is
2832 first centered in a box the size of the <a>filter region</a> and has the
2833 maximum size that will fit in the box consistent with preserving
2834 the aspect ratio. This box is then shifted by the given <a>'x'</a> and
2835 <a>'y'</a> values relative to the viewport the object is in.
2836 </li>
2837 </ul>
2839 <edit:example href='examples/feImage-01.svg' name='feImage' description='Examples of feImage use' image='yes' link='yes'/>
2840 </edit:with>
2842 <h2 id="feMergeElement">Filter primitive <span
2843 class="element-name">'feMerge'</span></h2>
2845 <edit:elementsummary name='feMerge'/>
2846 <edit:elementsummary name='feMergeNode'/>
2848 <p>This filter primitive composites input image layers on top of each other
2849 using the <em>over</em> operator with <em>Input1</em> (corresponding to the
2850 first <a href="#feMergeNodeElement"><span
2851 class="element-name">'feMergeNode'</span></a> child element) on the bottom
2852 and the last specified input, <em>InputN</em> (corresponding to the last <a
2853 href="#feMergeNodeElement"><span
2854 class="element-name">'feMergeNode'</span></a> child element), on top.</p>
2856 <p>Many effects produce a number of intermediate layers in order to create
2857 the final output image. This filter allows us to collapse those into a single
2858 image. Although this could be done by using n-1 Composite-filters, it is more
2859 convenient to have this common operation available in this form, and offers
2860 the implementation some additional flexibility.</p>
2862 <p>Each 'feMerge' element can have any number of 'feMergeNode' subelements,
2863 each of which has an <a href="#CommonAttributes"><span
2864 class="attr-name">in</span></a> attribute.</p>
2866 <p>The canonical implementation of feMerge is to render the entire effect
2867 into one RGBA layer, and then render the resulting layer on the output
2868 device. In certain cases (in particular if the output device itself is a
2869 continuous tone device), and since merging is associative, it might be a
2870 sufficient approximation to evaluate the effect one layer at a time and
2871 render each layer individually onto the output device bottom to top.</p>
2873 <p>If the topmost image input is <a href="#SourceGraphic"><span
2874 class="attr-value">SourceGraphic</span></a> and this <span
2875 class="element-name">'feMerge'</span> is the last filter primitive in the
2876 filter, the implementation is encouraged to render the layers up to that
2877 point, and then render the <a href="#SourceGraphic"><span
2878 class="attr-value">SourceGraphic</span></a> directly from its vector
2879 description on top.</p>
2881 <p id="feMergeNode"><a href="#AnExample">The example</a> at the start of this chapter makes
2882 use of the <span class="element-name">feMerge</span> filter primitive to
2883 composite two intermediate filter results together.</p>
2885 <h2 id="feMorphologyElement">Filter primitive <span
2886 class="element-name">'feMorphology'</span></h2>
2888 <edit:elementsummary name='feMorphology'/>
2889 <edit:with element='feMorphology'>
2891 <p>This filter primitive performs "fattening" or "thinning" of artwork. It is
2892 particularly useful for fattening or thinning an alpha channel.</p>
2894 <p>The dilation (or erosion) kernel is a rectangle with a width of
2895 2*<em>x-radius</em> and a height of 2*<em>y-radius</em>. In dilation, the
2896 output pixel is the individual component-wise maximum of the corresponding
2897 R,G,B,A values in the input image's kernel rectangle. In erosion, the output
2898 pixel is the individual component-wise minimum of the corresponding R,G,B,A
2899 values in the input image's kernel rectangle.</p>
2901 <p>Frequently this operation will take place on alpha-only images, such as
2902 that produced by the built-in input, <a href="#SourceAlpha"><span
2903 class="attr-value">SourceAlpha</span></a>. In that case, the implementation
2904 might want to optimize the single channel case.</p>
2906 <p>If the input has infinite extent and is constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>
2907 where the fill is a solid color), this operation has no effect.
2908 If the input has infinite extent and the filter result
2909 is the input to an <a>'feTile'</a>, the filter is evaluated with
2910 periodic boundary conditions.</p>
2912 <p>Because <span class="element-name">'feMorphology'</span> operates on
2913 premultipied color values, it will always result in color values less than or
2914 equal to the alpha channel.</p>
2916 <div class="adef-list">
2917 <p><em>Attribute definitions:</em></p>
2918 <dl>
2919 <dt id="feMorphologyOperatorAttribute"><span
2920 class="adef">operator</span> = "<em>erode | dilate</em>"</dt>
2921 <dd>A keyword indicating whether to erode (i.e., thin) or dilate (fatten)
2922 the source graphic.
2923 The lacuna value for <a>'operator'</a> is <span class="attr-value">erode</span>.
2924 <br />
2925 <span class="anim-target">Animatable: yes.</span></dd>
2926 <dt id="feMorphologyRadiusAttribute"><span class="adef">radius</span> =
2927 "<em><a><number-optional-number></a></em>"</dt>
2928 <dd>The radius (or radii) for the operation. If two <a><number></a>
2929 s are provided, the first number represents a x-radius and the second
2930 value represents a y-radius. If one number is provided, then that value
2931 is used for both X and Y. The values are in the coordinate system
2932 established by attribute <a>'filter/primitiveUnits'</a> on the <a
2933 href="#FilterElement"><span class="element-name">'filter'</span></a>
2934 element.<br />
2935 A negative or zero value disables the effect of the given filter
2936 primitive (i.e., the result is a transparent black image).<br />
2937 If the attribute is not specified, then the effect is as if a value of
2938 <span class="attr-value">0</span> were specified.<br />
2939 <span class="anim-target">Animatable: yes.</span></dd>
2940 </dl>
2941 </div>
2942 </edit:with>
2944 <edit:example href="examples/feMorphology.svg" image="yes" link="yes"/>
2946 <h2 id="feOffsetElement">Filter primitive <span
2947 class="element-name">'feOffset'</span></h2>
2949 <edit:elementsummary name='feOffset'/>
2951 <p>This filter primitive offsets the input image relative to its current
2952 position in the image space by the specified vector.</p>
2954 <p>This is important for effects like drop shadows.</p>
2956 <p>When applying this filter, the destination location may be offset by a
2957 fraction of a pixel in device space. <span class="requirement" id="assert_hqFeOffsetInterpolation">In this case a high quality viewer
2958 should make use of appropriate interpolation techniques, for example bilinear
2959 or bicubic.</span> This is especially recommended for dynamic viewers where this
2960 interpolation provides visually smoother movement of images. For static
2961 viewers this is less of a concern. Close attention should be made to the
2962 <span class="prop-name">'image-rendering'</span> property setting to
2963 determine the authors intent.</p>
2965 <div class="adef-list">
2966 <p><em>Attribute definitions:</em></p>
2967 <dl>
2968 <dt id="feOffsetDxAttribute"><span
2969 class="adef">dx</span> = "<em><a><number></a></em>"</dt>
2970 <dd>The amount to offset the input graphic along the x-axis. The offset
2971 amount is expressed in the coordinate system established by attribute
2972 <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a>
2973 element.<br />
2974 If the attribute is not specified, then the effect is as if a value of
2975 <span class="attr-value">0</span> were specified.<br />
2976 <span class="anim-target">Animatable: yes.</span></dd>
2977 <dt id="feOffsetDyAttribute"><span
2978 class="adef">dy</span> = "<em><a><number></a></em>"</dt>
2979 <dd>The amount to offset the input graphic along the y-axis. The offset
2980 amount is expressed in the coordinate system established by attribute
2981 <a>'filter/primitiveUnits'</a> on the <a
2982 href="#FilterElement"><span class="element-name">'filter'</span></a>
2983 element.<br />
2984 If the attribute is not specified, then the effect is as if a value of
2985 <span class="attr-value">0</span> were specified.<br />
2986 <span class="anim-target">Animatable: yes.</span></dd>
2987 </dl>
2988 </div>
2990 <p><a href="#AnExample">The example</a> at the start of this chapter makes
2991 use of the <span class="element-name">feOffset</span> filter primitive to
2992 offset the drop shadow from the original source graphic.</p>
2994 <h2 id="feSpecularLightingElement">Filter primitive <span
2995 class="element-name">'feSpecularLighting'</span></h2>
2997 <edit:elementsummary name='feSpecularLighting'/>
2999 <p>This filter primitive lights a source graphic using the alpha channel as a
3000 bump map. The resulting image is an RGBA image based on the light color. The
3001 lighting calculation follows the standard specular component of the Phong
3002 lighting model. The resulting image depends on the light color, light
3003 position and surface geometry of the input bump map. The result of the
3004 lighting calculation is added. The filter primitive assumes that the viewer
3005 is at infinity in the z direction (i.e., the unit vector in the eye direction
3006 is (0,0,1) everywhere).</p>
3008 <p>This filter primitive produces an image which contains the specular
3009 reflection part of the lighting calculation. Such a map is intended to be
3010 combined with a texture using the <em>add</em> term of the
3011 <em>arithmetic</em> <a href="#feCompositeElement"><span
3012 class="element-name">'feComposite'</span></a> method. Multiple light sources
3013 can be simulated by adding several of these light maps before applying it to
3014 the texture image.</p>
3016 <p>The resulting RGBA image is computed as follows:</p>
3018 <p class="filterformula">S<sub>r</sub> = k<sub>s</sub> * pow(N.H,
3019 specularExponent) * L<sub>r<br />
3020 </sub> S<sub>g</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
3021 L<sub>g<br />
3022 </sub> S<sub>b</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
3023 L<sub>b<br />
3024 </sub> S<sub>a</sub> = max(S<sub>r,</sub> S<sub>g,</sub> S<sub>b</sub>)</p>
3026 <p>where</p>
3027 <dl>
3028 <dd>k<sub>s</sub> = specular lighting constant<br />
3029 N = surface normal unit vector, a function of x and y<br />
3030 H = "halfway" unit vector between eye unit vector and light unit
3031 vector<br />
3032 <br />
3033 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light</dd>
3034 </dl>
3036 <p>See <a href="#feDiffuseLighting"><span
3037 class="element-name">'feDiffuseLighting'</span></a> for definition of N and
3038 (L<sub>r</sub>, L<sub>g</sub>, L<sub>b</sub>).</p>
3040 <p>The definition of H reflects our assumption of the constant eye vector E =
3041 (0,0,1):</p>
3043 <p class="filterformula">H = (L + E) / Norm(L+E)</p>
3045 <p>where L is the light unit vector.</p>
3047 <p>Unlike the <a href="#feDiffuseLighting"><span
3048 class="element-name">'feDiffuseLighting'</span></a>, the <span
3049 class="element-name">'feSpecularLighting'</span> filter produces a non-opaque
3050 image. This is due to the fact that the specular result
3051 (S<sub>r</sub>,S<sub>g</sub>,S<sub>b</sub>,S<sub>a</sub>) is meant to be
3052 added to the textured image. The alpha channel of the result is the max of
3053 the color components, so that where the specular light is zero, no additional
3054 coverage is added to the image and a fully white highlight will add
3055 opacity.</p>
3057 <p>The <a href="#feDiffuseLighting"><span
3058 class="element-name">'feDiffuseLighting'</span></a> and <span
3059 class="element-name">'feSpecularLighting'</span> filters will often be
3060 applied together. An implementation may detect this and calculate both maps
3061 in one pass, instead of two.</p>
3063 <div class="adef-list">
3064 <p><em>Attribute definitions:</em></p>
3065 <dl>
3066 <dt id="feSpecularLightingSurfaceScaleAttribute"><span
3067 class="adef">surfaceScale</span> = "<em><a><number></a></em>"</dt>
3068 <dd>height of surface when A<sub>in</sub> = 1.<br />
3069 If the attribute is not specified, then the effect is as if a value of
3070 <span class="attr-value">1</span> were specified.<br />
3071 <span class="anim-target">Animatable: yes.</span></dd>
3072 <dt id="feSpecularLightingSpecularConstantAttribute"><span
3073 class="adef">specularConstant</span> = "<em><a><number></a></em>"</dt>
3074 <dd>ks in Phong lighting model. In SVG, this can be any non-negative
3075 number.<br />
3076 If the attribute is not specified, then the effect is as if a value of
3077 <span class="attr-value">1</span> were specified.<br />
3078 <span class="anim-target">Animatable: yes.</span></dd>
3079 <dt id="feSpecularLightingSpecularExponentAttribute"><span
3080 class="adef">specularExponent</span> = "<em><a><number></a></em>"</dt>
3081 <dd>Exponent for specular term, larger is more "shiny". Range 1.0 to
3082 128.0.<br />
3083 If the attribute is not specified, then the effect is as if a value of
3084 <span class="attr-value">1</span> were specified.<br />
3085 <span class="anim-target">Animatable: yes.</span></dd>
3086 <dt id="feSpecularLightingKernelUnitLengthAttribute"><span
3087 class="adef">kernelUnitLength</span> = "<span
3088 class="attr-value"><a><number-optional-number></a></span>"</dt>
3089 <dd>The first number is the <dx> value. The second number is the
3090 <dy> value. If the <dy> value is not specified, it defaults
3091 to the same value as <dx>. Indicates the intended distance in
3092 current filter units (i.e., units as determined by the value of
3093 attribute <a>'filter/primitiveUnits'</a>) for <code>dx</code> and
3094 <code>dy</code>, respectively, in the <a
3095 href="#SurfaceNormalCalculations">surface normal calculation
3096 formulas</a>. By specifying value(s) for <span
3097 class="attr-name">kernelUnitLength</span>, the kernel becomes defined
3098 in a scalable, abstract coordinate system. If <span
3099 class="attr-name">kernelUnitLength</span> is not specified, the
3100 <code>dx</code> and <code>dy</code> values should represent very small
3101 deltas relative to a given <code>(x,y)</code> position, which might be
3102 implemented in some cases as one pixel in the intermediate image
3103 offscreen bitmap, which is a pixel-based coordinate system, and thus
3104 potentially not scalable. For some level of consistency across display
3105 media and user agents, it is necessary that a value be provided for at
3106 least one of <span class="attr-name">filterRes</span> and <span
3107 class="attr-name">kernelUnitLength</span>. Discussion of intermediate
3108 images are in the <a href="#Introduction">Introduction</a> and in the
3109 description of attribute <a>'filter/filterRes'</a>.<br />
3110 If a negative or zero value is specified the default value will be used
3111 instead. <br />
3112 <span class="anim-target">Animatable: yes.</span></dd>
3113 </dl>
3114 </div>
3116 <p>The light source is defined by one of the child elements <a>'feDistantLight'</a>,
3117 <a>'fePointLight'</a> or <a>'feDistantLight'</a>. The light color is
3118 specified by property <a>'lighting-color'</a>.</p>
3120 <p><a href="#AnExample">The example</a> at the start of this chapter makes
3121 use of the <span class="element-name">feSpecularLighting</span> filter
3122 primitive to achieve a highly reflective, 3D glowing effect.</p>
3124 <h2 id="feTileElement">Filter primitive <span
3125 class="element-name">'feTile'</span></h2>
3127 <edit:elementsummary name='feTile'/>
3129 <p>This filter primitive fills a target rectangle with a repeated, tiled
3130 pattern of an input image.
3131 The target rectangle is as large as the <a>filter primitive subregion</a> established
3132 by the <span class="element-name">'feTile'</span> element.
3133 </p>
3135 <p>Typically, the input image has been defined with its own <a>filter primitive subregion</a> in order to
3136 define a reference tile. <span class="element-name">'feTile'</span>
3137 replicates the reference tile in both X and Y to completely fill the target
3138 rectangle. The top/left corner of each given tile is at location
3139 <code>(x+i*width,y+j*height)</code>, where <code>(x,y)</code> represents the
3140 top/left of the input image's <a>filter primitive subregion</a>, <code>width</code>
3141 and <code>height</code> represent the width and height of the input image's
3142 <a>filter primitive subregion</a>, and <code>i</code> and <code>j</code> can be any
3143 integer value. In most cases, the input image will have a smaller <a>filter
3144 primitive subregion</a> than the <span class="element-name">'feTile'</span> in
3145 order to achieve a repeated pattern effect.</p>
3147 <p class="requirement" id="assertTileArtifacts">Implementers must take appropriate measures in constructing the tiled
3148 image to avoid artifacts between tiles, particularly in situations where the
3149 user to device transform includes shear and/or rotation. Unless care is
3150 taken, interpolation can lead to edge pixels in the tile having opacity
3151 values lower or higher than expected due to the interaction of painting
3152 adjacent tiles which each have partial overlap with particular pixels.</p>
3154 <div class="adef-list">
3155 </div>
3157 <h2 id="feTurbulenceElement">Filter primitive <span
3158 class="element-name">'feTurbulence'</span></h2>
3160 <edit:with element="feTurbulence">
3162 <p class="specissue">ISSUE: Consider phasing out this C algorithm in favor of Simplex noise, which is more HW friendly.</p>
3164 <p>This filter primitive creates an image using the Perlin turbulence
3165 function. It allows the synthesis of artificial textures like clouds or
3166 marble. For a detailed description the of the Perlin turbulence function, see
3167 "Texturing and Modeling", Ebert et al, AP Professional, 1994. The resulting
3168 image will fill the entire <a>filter primitive subregion</a> for this filter primitive.</p>
3170 <p>It is possible to create bandwidth-limited noise by synthesizing only one
3171 octave.</p>
3173 <p>The C code below shows the exact algorithm used for this filter effect.
3174 The <a>filter primitive subregion</a> is to be passed as the arguments fTileX,
3175 fTileY, fTileWidth and fTileHeight.</p>
3177 <p>For fractalSum, you get a turbFunctionResult that is aimed at a range of
3178 -1 to 1 (the actual result might exceed this range in some cases). To convert
3179 to a color value, use the formula <code>colorValue = ((turbFunctionResult *
3180 255) + 255) / 2</code>, then clamp to the range 0 to 255.</p>
3182 <p>For turbulence, you get a turbFunctionResult that is aimed at a range of 0
3183 to 1 (the actual result might exceed this range in some cases). To convert to
3184 a color value, use the formula <code>colorValue = (turbFunctionResult *
3185 255)</code>, then clamp to the range 0 to 255.</p>
3187 <p>The following order is used for applying the pseudo random numbers. An
3188 initial seed value is computed based on the <a>'seed'</a> attribute.
3189 Then the implementation computes the lattice
3190 points for R, then continues getting additional pseudo random numbers
3191 relative to the last generated pseudo random number and computes the lattice
3192 points for G, and so on for B and A.</p>
3194 <p>The generated color and alpha values are in the color space determined by
3195 the <a>'color-interpolation-filters'</a> property:</p>
3196 <pre class="svgsamplecompressed">/* Produces results in the range [1, 2**31 - 2].
3197 Algorithm is: r = (a * r) mod m
3198 where a = 16807 and m = 2**31 - 1 = 2147483647
3199 See [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988
3200 To test: the algorithm should produce the result 1043618065
3201 as the 10,000th generated number if the original seed is 1.
3202 */
3203 #define RAND_m 2147483647 /* 2**31 - 1 */
3204 #define RAND_a 16807 /* 7**5; primitive root of m */
3205 #define RAND_q 127773 /* m / a */
3206 #define RAND_r 2836 /* m % a */
3207 long setup_seed(long lSeed)
3208 {
3209 if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
3210 if (lSeed > RAND_m - 1) lSeed = RAND_m - 1;
3211 return lSeed;
3212 }
3213 long random(long lSeed)
3214 {
3215 long result;
3216 result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
3217 if (result <= 0) result += RAND_m;
3218 return result;
3219 }
3220 #define BSize 0x100
3221 #define BM 0xff
3222 #define PerlinN 0x1000
3223 #define NP 12 /* 2^PerlinN */
3224 #define NM 0xfff
3225 static uLatticeSelector[BSize + BSize + 2];
3226 static double fGradient[4][BSize + BSize + 2][2];
3227 struct StitchInfo
3228 {
3229 int nWidth; // How much to subtract to wrap for stitching.
3230 int nHeight;
3231 int nWrapX; // Minimum value to wrap.
3232 int nWrapY;
3233 };
3234 static void init(long lSeed)
3235 {
3236 double s;
3237 int i, j, k;
3238 lSeed = setup_seed(lSeed);
3239 for(k = 0; k < 4; k++)
3240 {
3241 for(i = 0; i < BSize; i++)
3242 {
3243 uLatticeSelector[i] = i;
3244 for (j = 0; j < 2; j++)
3245 fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
3246 s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
3247 fGradient[k][i][0] /= s;
3248 fGradient[k][i][1] /= s;
3249 }
3250 }
3251 while(--i)
3252 {
3253 k = uLatticeSelector[i];
3254 uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
3255 uLatticeSelector[j] = k;
3256 }
3257 for(i = 0; i < BSize + 2; i++)
3258 {
3259 uLatticeSelector[BSize + i] = uLatticeSelector[i];
3260 for(k = 0; k < 4; k++)
3261 for(j = 0; j < 2; j++)
3262 fGradient[k][BSize + i][j] = fGradient[k][i][j];
3263 }
3264 }
3265 #define s_curve(t) ( t * t * (3. - 2. * t) )
3266 #define lerp(t, a, b) ( a + t * (b - a) )
3267 double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
3268 {
3269 int bx0, bx1, by0, by1, b00, b10, b01, b11;
3270 double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
3271 register i, j;
3272 t = vec[0] + PerlinN;
3273 bx0 = (int)t;
3274 bx1 = bx0+1;
3275 rx0 = t - (int)t;
3276 rx1 = rx0 - 1.0f;
3277 t = vec[1] + PerlinN;
3278 by0 = (int)t;
3279 by1 = by0+1;
3280 ry0 = t - (int)t;
3281 ry1 = ry0 - 1.0f;
3282 // If stitching, adjust lattice points accordingly.
3283 if(pStitchInfo != NULL)
3284 {
3285 if(bx0 >= pStitchInfo->nWrapX)
3286 bx0 -= pStitchInfo->nWidth;
3287 if(bx1 >= pStitchInfo->nWrapX)
3288 bx1 -= pStitchInfo->nWidth;
3289 if(by0 >= pStitchInfo->nWrapY)
3290 by0 -= pStitchInfo->nHeight;
3291 if(by1 >= pStitchInfo->nWrapY)
3292 by1 -= pStitchInfo->nHeight;
3293 }
3294 bx0 &= BM;
3295 bx1 &= BM;
3296 by0 &= BM;
3297 by1 &= BM;
3298 i = uLatticeSelector[bx0];
3299 j = uLatticeSelector[bx1];
3300 b00 = uLatticeSelector[i + by0];
3301 b10 = uLatticeSelector[j + by0];
3302 b01 = uLatticeSelector[i + by1];
3303 b11 = uLatticeSelector[j + by1];
3304 sx = double(s_curve(rx0));
3305 sy = double(s_curve(ry0));
3306 q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
3307 q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
3308 a = lerp(sx, u, v);
3309 q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
3310 q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
3311 b = lerp(sx, u, v);
3312 return lerp(sy, a, b);
3313 }
3314 double turbulence(int nColorChannel, double *point, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqX</a>, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqY</a>,
3315 int <a href="#feTurbulenceNumOctavesAttribute">nNumOctaves</a>, bool bFractalSum, bool bDoStitching,
3316 double <a href="#FilterPrimitiveSubRegion">fTileX</a>, double <a href="#FilterPrimitiveSubRegion">fTileY</a>, double <a href="#FilterPrimitiveSubRegion">fTileWidth</a>, double <a href="#FilterPrimitiveSubRegion">fTileHeight</a>)
3317 {
3318 StitchInfo stitch;
3319 StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
3320 // Adjust the base frequencies if necessary for stitching.
3321 if(bDoStitching)
3322 {
3323 // When stitching tiled turbulence, the frequencies must be adjusted
3324 // so that the tile borders will be continuous.
3325 if(fBaseFreqX != 0.0)
3326 {
3327 double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
3328 double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
3329 if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX)
3330 fBaseFreqX = fLoFreq;
3331 else
3332 fBaseFreqX = fHiFreq;
3333 }
3334 if(fBaseFreqY != 0.0)
3335 {
3336 double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
3337 double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
3338 if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY)
3339 fBaseFreqY = fLoFreq;
3340 else
3341 fBaseFreqY = fHiFreq;
3342 }
3343 // Set up initial stitch values.
3344 pStitchInfo = &stitch;
3345 stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
3346 stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
3347 stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
3348 stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
3349 }
3350 double fSum = 0.0f;
3351 double vec[2];
3352 vec[0] = point[0] * fBaseFreqX;
3353 vec[1] = point[1] * fBaseFreqY;
3354 double ratio = 1;
3355 for(int nOctave = 0; nOctave < nNumOctaves; nOctave++)
3356 {
3357 if(bFractalSum)
3358 fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
3359 else
3360 fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
3361 vec[0] *= 2;
3362 vec[1] *= 2;
3363 ratio *= 2;
3364 if(pStitchInfo != NULL)
3365 {
3366 // Update stitch values. Subtracting PerlinN before the multiplication and
3367 // adding it afterward simplifies to subtracting it once.
3368 stitch.nWidth *= 2;
3369 stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
3370 stitch.nHeight *= 2;
3371 stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
3372 }
3373 }
3374 return fSum;
3375 }</pre>
3377 <div class="adef-list">
3378 <p><em>Attribute definitions:</em></p>
3379 <dl>
3380 <dt id="feTurbulenceBaseFrequencyAttribute"><span
3381 class="adef">baseFrequency</span> =
3382 "<em><a><number-optional-number></a></em>"</dt>
3383 <dd>
3384 <p>The base frequency (frequencies) parameter(s) for the noise function.
3385 If two <a><number></a>s are provided, the first number represents a base frequency in the X
3386 direction and the second value represents a base frequency in the Y
3387 direction. If one number is provided, then that value is used for both
3388 X and Y.</p>
3389 <p>The <a>lacuna value</a> for <a>'baseFrequency'</a> is <span class="attr-value">0</span>.</p>
3390 <p>Negative values are <a>unsupported</a>.</p>
3391 <p><span class="anim-target">Animatable: yes.</span></p>
3392 </dd>
3393 <dt id="feTurbulenceNumOctavesAttribute"><span
3394 class="adef">numOctaves</span> = "<em><a><integer></a></em>"</dt>
3395 <dd>
3396 <p>The numOctaves parameter for the noise function.</p>
3397 <p><span class="requirement" id="assert_turbulenceNumOctavesLacunaValue">The <a>lacuna value</a> for <a>'numOctaves'</a> is <span class="attr-value">1</span>.</span></p>
3398 <p><span class="requirement" id="assert_turbulenceNumOctavesUnsupportedValue">Negative values are <a>unsupported</a>.</span></p>
3399 <p><span class="requirement" id="assert_turbulenceNumOctavesAnimatable"><span class="anim-target">Animatable: yes.</span></span></p>
3400 </dd>
3401 <dt id="feTurbulenceSeedAttribute">
3402 <span class="adef">seed</span> = "<em><a><number></a></em>"</dt>
3403 <dd>
3404 <p>The starting number for the pseudo random number generator.</p>
3405 <p><span class="requirement" id="assert_turbulenceSeedLacunaValue">The <a>lacuna value</a> for <a>'seed'</a> is <span class="attr-value">0</span>.</span></p>
3406 <p><span class="requirement" id="assert_turbulenceSeedTruncation">When the seed number is handed over to the algorithm above it must first be
3407 truncated, i.e. rounded to the closest integer value towards zero.</span></p>
3408 <p><span class="anim-target">Animatable: yes.</span></p>
3409 </dd>
3410 <dt id="feTurbulenceStitchTilesAttribute"><span
3411 class="adef">stitchTiles</span> = "<em>stitch | noStitch</em>"</dt>
3412 <dd>
3413 <p>If <span class="attr-value">stitchTiles="noStitch"</span>, no attempt
3414 it made to achieve smooth transitions at the border of tiles which
3415 contain a turbulence function. Sometimes the result will show clear
3416 discontinuities at the tile borders.<br />
3417 If <span class="attr-value">stitchTiles="stitch"</span>, then the user
3418 agent will automatically adjust baseFrequency-x and baseFrequency-y
3419 values such that the <a>'feTurbulence'</a> node's width and height (i.e., the
3420 width and height of the current subregion) contains an integral number
3421 of the Perlin tile width and height for the first octave. The
3422 baseFrequency will be adjusted up or down depending on which way has
3423 the smallest relative (not absolute) change as follows: Given the
3424 frequency, calculate <code>lowFreq=floor(width*frequency)/width</code>
3425 and <code>hiFreq=ceil(width*frequency)/width</code>. If
3426 frequency/lowFreq < hiFreq/frequency then use lowFreq, else use
3427 hiFreq. While generating turbulence values, generate lattice vectors as
3428 normal for Perlin Noise, except for those lattice points that lie on
3429 the right or bottom edges of the active area (the size of the resulting
3430 tile). In those cases, copy the lattice vector from the opposite edge
3431 of the active area.</p>
3432 <p><span class="requirement" id="assert_turbulenceStitchTilesLacunaValue">The <a>lacuna value</a> for <a>'stitchTiles'</a> is <span class="attr-value">noStitch</span>.</span></p>
3433 <p><span class="anim-target">Animatable: yes.</span></p>
3434 </dd>
3435 <dt id="feTurbulenceTypeAttribute">
3436 <span class="adef">type</span> = "<em>fractalNoise | turbulence</em>"</dt>
3437 <dd>
3438 <p>Indicates whether the filter primitive should perform a noise or
3439 turbulence function.</p>
3440 <p><span class="requirement" id="assert_turbulenceTypeLacunaValue">The <a>lacuna value</a> for <a>'type'</a> is <span class="attr-value">turbulence</span>.</span></p>
3441 <p><span class="anim-target">Animatable: yes.</span></p>
3442 </dd>
3443 </dl>
3444 </div>
3446 <edit:example href="examples/feTurbulence.svg" image="yes" link="yes"/>
3447 </edit:with>
3449 <h2 id="feDropShadowElement">Filter primitive <span
3450 class="element-name">'feDropShadow'</span></h2>
3452 <edit:elementsummary name='feDropShadow'/>
3454 <p>This filter creates a drop shadow of the input image. It is a shorthand
3455 filter, and is defined in terms of combinations of other <a>filter primitives</a>.
3456 The expectation is that it can be optimized more easily by
3457 implementations.</p>
3459 <p>The result of a <a>'feDropShadow'</a> filter
3460 primitive is equivalent to the following:
3462 <pre class="examplesource">
3463 <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/>
3464 <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/>
3465 <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/>
3466 <feComposite in2="offsetblur" operator="in"/>
3467 <feMerge>
3468 <feMergeNode/>
3469 <feMergeNode in="<b>in-of-feDropShadow</b>"/>
3470 </feMerge>
3471 </pre>
3472 </p>
3474 <p>
3475 The above divided into steps:
3476 <ol>
3477 <li>Take the alpha channel of the input to the <a>'feDropShadow'</a> filter primitive and the <a>'feDropShadow/stdDeviation'</a> on the <a>'feDropShadow'</a> and do processing as if the
3478 following <a>'feGaussianBlur'</a> was applied:
3479 <pre class="examplesource"> <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/></pre>
3480 <br />
3481 </li>
3482 <li>Offset the result of step 1 by <a>'feDropShadow/dx'</a> and <a>'feDropShadow/dy'</a> as
3483 specified on the <a>'feDropShadow'</a>
3484 element, equivalent to applying an <a>'feOffset'</a> with these parameters:
3485 <pre class="examplesource"> <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/></pre>
3486 <br />
3487 </li>
3488 <li>Do processing as if an <a>'feFlood'</a> element with <a>'flood-color'</a> and
3489 <a>'flood-opacity'</a> as specified on the <a>'feDropShadow'</a> was applied:
3490 <pre class="examplesource"> <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/></pre>
3491 <br />
3492 </li>
3493 <li>Composite the result of the <a href="#feFloodElement"><span
3494 class="element-name">'feFlood'</span></a> in step 3 with the result of
3495 the <a href="#feOffsetElement"><span
3496 class="element-name">'feOffset'</span></a> in step 2 as if an <a>'feComposite'</a> filter primitive with <a
3497 href="#feCompositeOperatorAttribute"><span
3498 class="attr-name">operator</span></a>='in' was applied:
3499 <pre class="examplesource"> <feComposite in2="offsetblur" operator="in"/></pre>
3500 <br />
3501 </li>
3502 <li>Finally merge the result of the previous step, doing processing as if
3503 the following <a>'feMerge'</a> was performed:
3504 <pre class="examplesource"> <feMerge>
3505 <feMergeNode/>
3506 <feMergeNode in="<b>in-of-feDropShadow</b>"/>
3507 </feMerge></pre>
3508 </li>
3509 </ol>
3510 </p>
3512 <p class="note implementation">Note that while the definition of the <span
3513 class="element-name">'feDropShadow'</span> filter primitive says that it can
3514 be expanded into an equivalent tree it is not required that it is implemented
3515 like that. The expectation is that user agents can optimize the handling by not having to do all the steps separately.
3516 </p>
3518 <p>Beyond the DOM interface <a
3519 href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a> there is no way
3520 of accessing the internals of the <a>'feDropShadow'</a> filter primitive, meaning <span class="requirement" id="assert_dropShadowShadowTrees">if the
3521 filter primitive is implemented as an equivalent tree then that tree must not
3522 be exposed to the DOM.</span> </p>
3524 <div class="adef-list">
3525 <p><em>Attribute definitions:</em></p>
3526 <dl>
3527 <dt id="feDropShadowDxAttribute">
3528 <span class="adef">dx</span> = "<em><a><number></a></em>"</dt>
3529 <dd>
3530 <p>The x offset of the drop shadow.</p>
3531 <p>The <a>lacuna value</a> for <a>'feDropShadow/dx'</a> is <span class="attr-value">2</span>.</p>
3532 <p>This attribute is then forwarded to the <a>'feOffset/dx'</a> attribute of the internal <a>'feOffset'</a> element.</p>
3533 <p><span class="anim-target">Animatable: yes.</span></p>
3534 </dd>
3535 <dt id="feDropShadowDyAttribute">
3536 <span class="adef">dy</span> = "<em><a><number></a></em>"</dt>
3537 <dd>
3538 <p>The y offset of the drop shadow.</p>
3539 <p>The <a>lacuna value</a> for <a>'feDropShadow/dy'</a> is <span class="attr-value">2</span>. </p>
3540 <p>This attribute is then forwarded to the <a>'feOffset/dy'</a> attribute of the internal <a>'feOffset'</a> element.</p>
3541 <p><span class="anim-target">Animatable: yes.</span></p>
3542 </dd>
3543 <dt id="feDropShadowStdDeviationAttribute"><span
3544 class="adef">stdDeviation</span> =
3545 "<em><a><number-optional-number></a></em>"</dt>
3546 <dd>
3547 <p>The standard deviation for the blur operation in the drop shadow.</p>
3548 <p>The <a>lacuna value</a> for <a>'feDropShadow/stdDeviation'</a> is <span class="attr-value">2</span>.</p>
3549 <p>This attribute is then forwarded to the <a>'feGaussianBlur/stdDeviation'</a> attribute of the internal
3550 <a>'feGaussianBlur'</a> element.</p>
3551 <p><span class="anim-target">Animatable: yes.</span></p>
3552 </dd>
3553 </dl>
3554 </div>
3556 <div class="note">
3557 <h2 id="feDiffuseSpecularElement">Filter primitive <span
3558 class="element-name">'feDiffuseSpecular'</span></h2>
3559 The WG is looking at providing a shorthand for diffuse+specular.
3560 </div>
3562 <div class="note">
3563 <h2 id="feCustomElement">Filter primitive <span
3564 class="element-name">'feCustom'</span></h2>
3565 The WG is considering a proposal to add a filter primitive that would reference a
3566 programmable operation, similar to an OpenCL kernel or GLSL fragment shader. At
3567 this time, the WG is intending to <strong>not</strong> include such a feature
3568 in the current version of this specification. If you feel it is necessary, please
3569 submit feedback to the WG (by email, described in the introduction) with your
3570 reasons and, preferably, use cases.
3571 </div>
3573 <h2 id="FilterCSSImageValue">The filter CSS <image> value</h2>
3575 <p>
3576 The filter() function produces a CSS <image> value. It has the following syntax:
3577 </p>
3579 <h4 class='no-toc' id='filter-syntax'>
3580 filter() syntax</h4>
3582 <pre class='prod'><code><dfn><filter></dfn> = filter(
3583 <image>,
3584 none | <filter-function> [ <filter-function> ]*
3585 )
3586 </code></pre>
3588 <p>
3589 The function takes two parameters. The first is a CSS <image> value. The second
3590 is the value of a <span class="prop-name">filter</span> property. The function take the
3591 input image parameter and apply the filter rules, returning a processing image.
3592 </p>
3594 <h2 id="RelaxNG">RelaxNG Schema for Filter Effects 1.0</h2>
3596 <p>The schema for Filter Effects 1.0 is written in <a
3597 href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">RelaxNG</a>
3598 [<a href="#ref-RNG">RelaxNG</a>], a namespace-aware schema language that uses
3599 the datatypes from <a
3600 href="http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/">XML Schema Part
3601 2</a> [<a href="#ref-Schema2">Schema2</a>]. This allows namespaces and
3602 modularity to be much more naturally expressed than using DTD syntax. The
3603 RelaxNG schema for Filter Effects 1.0 may be imported by other RelaxNG schemas,
3604 or combined with other schemas in other languages into a multi-namespace,
3605 multi-grammar schema using <a
3606 href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">Namespace-based Validation
3607 Dispatching Language</a> [<a href="#ref-NVDL">NVDL</a>].</p>
3609 <p>Unlike a DTD, the schema used for validation is not hardcoded into the
3610 document instance. There is no equivalent to the DOCTYPE declaration. Simply
3611 point your editor or other validation tool to the IRI of the schema (or your
3612 local cached copy, as you prefer).</p>
3614 <p>
3615 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 <a href="rng">here</a>.
3616 </p>
3619 <h2 id="ShorthandEquivalents">Shorthands defined in terms of the <span class="element-name">'filter'</span> element</h2>
3621 <p>
3622 Below are the equivalents for each of the filter functions expressed in terms of
3623 the 'filter element' element. The parameters from the function are labelled with
3624 brackets in the following style: [amount].
3625 </p>
3627 <h3 id="grayscaleEquivalent">grayscale</h3>
3629 <pre class="examplesource"> <filter id="grayscale">
3630 <feColorMatrix type="matrix"
3631 values="(0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3632 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3633 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3634 0 0 0 1 0"/>
3635 </filter> </pre>
3637 <h3 id="sepiaEquivalent">sepia</h3>
3639 <pre class="examplesource"> <filter id="sepia">
3640 <feColorMatrix type="matrix"
3641 values="(0.393 * [amount]) (0.769 * [amount]) (0.189 * [amount]) 0 0
3642 (0.349 * [amount]) (0.686 * [amount]) (0.168 * [amount]) 0 0
3643 (0.272 * [amount]) (0.534 * [amount]) (0.131 * [amount]) 0 0
3644 0 0 0 1 0"/>
3645 </filter> </pre>
3647 <h3 id="saturateEquivalent">saturate</h3>
3649 <pre class="examplesource"> <filter id="saturate">
3650 <feColorMatrix type="saturate"
3651 values="(1 - [amount])"/>
3652 </filter> </pre>
3654 <h3 id="huerotateEquivalent">hue-rotate</h3>
3656 <pre class="examplesource"> <filter id="hue-rotate">
3657 <feColorMatrix type="hueRotate"
3658 values="[angle]"/>
3659 </filter> </pre>
3661 <h3 id="invertEquivalent">invert</h3>
3663 <pre class="examplesource"> <filter id="invert">
3664 <feComponentTransfer>
3665 <feFuncR type="table" tableValues="[amount] (1 - [amount])"/>
3666 <feFuncG type="table" tableValues="[amount] (1 - [amount])"/>
3667 <feFuncB type="table" tableValues="[amount] (1 - [amount])"/>
3668 </feComponentTransfer>
3669 </filter> </pre>
3671 <h3 id="opacityEquivalent">opacity</h3>
3673 <pre class="examplesource"> <filter id="opacity">
3674 <feComponentTransfer>
3675 <feFuncA type="table" tableValues="0 [amount]"/>
3676 </feComponentTransfer>
3677 </filter> </pre>
3679 <h3 id="gammaEquivalent">gamma</h3>
3681 <pre class="examplesource"> <filter id="gamma">
3682 <feComponentTransfer>
3683 <feFuncR type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3684 <feFuncG type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3685 <feFuncB type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3686 </feComponentTransfer>
3687 </filter> </pre>
3689 <h3 id="blurEquivalent">blur</h3>
3691 <pre class="examplesource"> <filter id="blur">
3692 <feGaussianBlur stdDeviation="[radiusX radiusY]">
3693 </filter> </pre>
3695 <h3 id="sharpenEquivalent">sharpen</h3>
3697 <pre class="examplesource"> <filter id="unsharp">
3698 <feUnsharpMask stdDeviation="[radius]" threshold="[threshold]" amount="[amount]">
3699 </filter> </pre>
3701 <h3 id="dropshadowEquivalent">drop-shadow</h3>
3703 <pre class="examplesource"> <filter id="drop-shadow">
3704 <feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/>
3705 <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
3706 <feFlood flood-color="[color]"/>
3707 <feComposite in2="offsetblur" operator="in"/>
3708 <feMerge>
3709 <feMergeNode/>
3710 <feMergeNode in="input-image"/>
3711 </feMerge>
3712 </filter> </pre>
3714 <h2 id="DOMInterfaces">DOM interfaces</h2>
3716 <div class="note">
3717 The interfaces below will be made available in a IDL file for an upcoming draft.
3718 </div>
3720 <h3 id="InterfaceImageData">Interface ImageData</h3>
3722 <edit:interface name='::svg::ImageData'/>
3724 <h3 id="InterfaceSVGFilterElement">Interface SVGFilterElement</h3>
3726 <edit:with element='filter'>
3727 <edit:interface name='::svg::SVGFilterElement'/>
3728 </edit:with>
3730 <h3 id="InterfaceSVGFilterPrimitiveStandardAttributes">Interface SVGFilterPrimitiveStandardAttributes</h3>
3732 <edit:with element='feTile'>
3733 <edit:interface name='::svg::SVGFilterPrimitiveStandardAttributes'/>
3734 </edit:with>
3736 <h3 id="InterfaceSVGFEBlendElement">Interface SVGFEBlendElement</h3>
3738 <edit:with element='feBlend'>
3739 <edit:interface name='::svg::SVGFEBlendElement'/>
3740 </edit:with>
3742 <h3 id="InterfaceSVGFEColorMatrixElement">Interface SVGFEColorMatrixElement</h3>
3744 <edit:with element='feColorMatrix'>
3745 <edit:interface name='::svg::SVGFEColorMatrixElement'/>
3746 </edit:with>
3748 <h3 id="InterfaceSVGFEComponentTransferElement">Interface SVGFEComponentTransferElement</h3>
3750 <edit:with element='feComponentTransfer'>
3751 <edit:interface name='::svg::SVGFEComponentTransferElement'/>
3752 </edit:with>
3754 <h3 id="InterfaceSVGComponentTransferFunctionElement">Interface SVGComponentTransferFunctionElement</h3>
3756 <edit:with element='feFuncR'>
3757 <edit:interface name='::svg::SVGComponentTransferFunctionElement'/>
3758 </edit:with>
3760 <h3 id="InterfaceSVGFEFuncRElement">Interface SVGFEFuncRElement</h3>
3762 <edit:with element='feFuncR'>
3763 <edit:interface name='::svg::SVGFEFuncRElement'/>
3764 </edit:with>
3766 <h3 id="InterfaceSVGFEFuncGElement">Interface SVGFEFuncGElement</h3>
3768 <edit:with element='feFuncG'>
3769 <edit:interface name='::svg::SVGFEFuncGElement'/>
3770 </edit:with>
3772 <h3 id="InterfaceSVGFEFuncBElement">Interface SVGFEFuncBElement</h3>
3774 <edit:with element='feFuncB'>
3775 <edit:interface name='::svg::SVGFEFuncBElement'/>
3776 </edit:with>
3778 <h3 id="InterfaceSVGFEFuncAElement">Interface SVGFEFuncAElement</h3>
3780 <edit:with element='feFuncA'>
3781 <edit:interface name='::svg::SVGFEFuncAElement'/>
3782 </edit:with>
3784 <h3 id="InterfaceSVGFECompositeElement">Interface SVGFECompositeElement</h3>
3786 <edit:with element='feComposite'>
3787 <edit:interface name='::svg::SVGFECompositeElement'/>
3788 </edit:with>
3790 <h3 id="InterfaceSVGFEConvolveMatrixElement">Interface SVGFEConvolveMatrixElement</h3>
3792 <edit:with element='feConvolveMatrix'>
3793 <edit:interface name='::svg::SVGFEConvolveMatrixElement'/>
3794 </edit:with>
3796 <h3 id="InterfaceSVGFEDiffuseLightingElement">Interface SVGFEDiffuseLightingElement</h3>
3798 <edit:with element='feDiffuseLighting'>
3799 <edit:interface name='::svg::SVGFEDiffuseLightingElement'/>
3800 </edit:with>
3802 <h3 id="InterfaceSVGFEDistantLightElement">Interface SVGFEDistantLightElement</h3>
3804 <edit:with element='feDistantLight'>
3805 <edit:interface name='::svg::SVGFEDistantLightElement'/>
3806 </edit:with>
3808 <h3 id="InterfaceSVGFEPointLightElement">Interface SVGFEPointLightElement</h3>
3810 <edit:with element='fePointLight'>
3811 <edit:interface name='::svg::SVGFEPointLightElement'/>
3812 </edit:with>
3814 <h3 id="InterfaceSVGFESpotLightElement">Interface SVGFESpotLightElement</h3>
3816 <edit:with element='feSpotLight'>
3817 <edit:interface name='::svg::SVGFESpotLightElement'/>
3818 </edit:with>
3820 <h3 id="InterfaceSVGFEDisplacementMapElement">Interface SVGFEDisplacementMapElement</h3>
3822 <edit:with element='feDisplacementMap'>
3823 <edit:interface name='::svg::SVGFEDisplacementMapElement'/>
3824 </edit:with>
3826 <h3 id="InterfaceSVGFEFloodElement">Interface SVGFEFloodElement</h3>
3828 <edit:with element='feFlood'>
3829 <edit:interface name='::svg::SVGFEFloodElement'/>
3830 </edit:with>
3832 <h3 id="InterfaceSVGFEGaussianBlurElement">Interface SVGFEGaussianBlurElement</h3>
3834 <edit:with element='feGaussianBlur'>
3835 <edit:interface name='::svg::SVGFEGaussianBlurElement'/>
3836 </edit:with>
3838 <h3 id="InterfaceSVGFEImageElement">Interface SVGFEImageElement</h3>
3840 <edit:with element='feImage'>
3841 <edit:interface name='::svg::SVGFEImageElement'/>
3842 </edit:with>
3844 <h3 id="InterfaceSVGFEMergeElement">Interface SVGFEMergeElement</h3>
3846 <edit:with element='feMerge'>
3847 <edit:interface name='::svg::SVGFEMergeElement'/>
3848 </edit:with>
3850 <h3 id="InterfaceSVGFEMergeNodeElement">Interface SVGFEMergeNodeElement</h3>
3852 <edit:with element='feMergeNode'>
3853 <edit:interface name='::svg::SVGFEMergeNodeElement'/>
3854 </edit:with>
3856 <h3 id="InterfaceSVGFEMorphologyElement">Interface SVGFEMorphologyElement</h3>
3858 <edit:with element='feMorphology'>
3859 <edit:interface name='::svg::SVGFEMorphologyElement'/>
3860 </edit:with>
3862 <h3 id="InterfaceSVGFEOffsetElement">Interface SVGFEOffsetElement</h3>
3864 <edit:with element='feOffset'>
3865 <edit:interface name='::svg::SVGFEOffsetElement'/>
3866 </edit:with>
3868 <h3 id="InterfaceSVGFESpecularLightingElement">Interface SVGFESpecularLightingElement</h3>
3870 <edit:with element='feSpecularLighting'>
3871 <edit:interface name='::svg::SVGFESpecularLightingElement'/>
3872 </edit:with>
3874 <h3 id="InterfaceSVGFETileElement">Interface SVGFETileElement</h3>
3876 <edit:with element='feTile'>
3877 <edit:interface name='::svg::SVGFETileElement'/>
3878 </edit:with>
3880 <h3 id="InterfaceSVGFETurbulenceElement">Interface SVGFETurbulenceElement</h3>
3882 <edit:with element='feTurbulence'>
3883 <edit:interface name='::svg::SVGFETurbulenceElement'/>
3884 </edit:with>
3886 <h3 id="InterfaceSVGFEDropShadowElement">Interface SVGFEDropShadowElement</h3>
3888 <edit:with element='feDropShadow'>
3889 <edit:interface name='::svg::SVGFEDropShadowElement'/>
3890 </edit:with>
3892 <h2 id="references1">References</h2>
3893 <h3 id="normref">Normative References</h3>
3894 <dl>
3895 <dt id="ref-CSS21"><strong class="normref">[CSS21]</strong></dt>
3896 <dd><strong>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</strong>,
3897 Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, eds.,
3898 W3C, 23 April 2009, (Candidate Recommendation) </dd>
3900 <dt id="ref-NVDL"><strong class="normref">[NVDL]</strong></dt>
3901 <dd><strong>Document Schema Definition Languages (DSDL) — Part 4:
3902 Namespace-based Validation Dispatching Language — NVDL. ISO/IEC FCD
3903 19757-4</strong>, See <a
3904 href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/</a>
3905 </dd>
3907 <dt id="ref-PORTERDUFF"><strong class="normref">[PORTERDUFF]</strong></dt>
3908 <dd><strong>Compositing Digital Images</strong>, T. Porter, T. Duff,
3909 SIGGRAPH '84 Conference Proceedings, Association for Computing
3910 Machinery, Volume 18, Number 3, July 1984. </dd>
3911 <dt id="ref-SVG-COMPOSITING"><strong class="normref">[SVG-COMPOSITING]</strong></dt>
3912 <dd>
3913 <cite class="w3cwd"><a href="http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/">SVG Compositing Specification</a></cite>,
3914 A. Grasso, ed.
3915 World Wide Web Consortium, 30 April 2009.
3916 <br/>This edition of SVG Compositing is http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/.
3917 <br/>The <a href="http://www.w3.org/TR/SVGCompositing/">latest edition of SVG Compositing</a> is available at
3918 http://www.w3.org/TR/SVGCompositing/.
3919 </dd>
3920 <dt id="ref-RNG"><strong class="normref">[RelaxNG]</strong></dt>
3921 <dd><strong>Document Schema Definition Languages (DSDL) — Part 2:
3922 Regular grammar- based validation — RELAX NG. ISO/IEC FDIS
3923 19757-2:2002(E)</strong>, J. Clark, <span class="ruby"><span
3924 xml:lang="ja" lang="ja" class="rb">村田 真</span> <span
3925 class="rp">(</span><span class="rt"><span
3926 class="familyname">Murata</span> M.</span><span
3927 class="rp">)</span></span>, eds., 12 December 2002. See <a
3928 href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf</a>
3929 </dd>
3930 <dt id="ref-Schema2"><strong class="normref">[Schema2]</strong></dt>
3931 <dd><strong>XML Schema Part 2: Datatypes Second Edition</strong>, P.
3932 Biron, A. Malhotra, eds. W3C, 28 October 2004 (Recommendation). Latest
3933 version available at <a
3934 href="http://www.w3.org/TR/xmlschema-2/">http://www.w3.org/TR/xmlschema-2/</a>.
3935 See also <a
3936 href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/">Processing
3937 XML 1.1 documents with XML Schema 1.0 processors</a>. </dd>
3938 <dt id="ref-svg11"><strong class="normref">[SVG11]</strong></dt>
3939 <dd><strong>Scalable Vector Graphics (SVG) 1.1 Specification</strong>,
3940 Dean Jackson editor, W3C, 14 January 2003 (Recommendation). See <a
3941 href="http://www.w3.org/TR/2003/REC-SVG11-20030114/">http://www.w3.org/TR/2003/REC-SVG11-20030114/</a>
3942 </dd>
3943 <dt id="ref-svgt12"><strong class="normref">[SVGT12]</strong></dt>
3944 <dd><strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>,
3945 Dean Jackson editor, W3C, 22 December 2008 (Recommendation). See <a
3946 href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/</a>
3947 </dd>
3948 </dl>
3950 <h3 id="informref">Informative References</h3>
3951 <dl>
3952 <dt id="ref-html5"><strong class="informref">[HTML5]</strong></dt>
3953 <dd><strong>HTML5</strong>, Ian Hickson editor, Google,
3954 10 June 2008 (Working Draft). See <a
3955 href="http://www.w3.org/TR/2008/WD-html5-20080610/">http://www.w3.org/TR/2008/WD-html5-20080610/</a>
3956 </dd>
3957 </dl>
3959 <h2 id="changes">Changes</h2>
3960 <p>For changes since the last published draft, see the public <a href="http://dev.w3.org/cvsweb/SVG/modules/filters/publish/">cvs log</a>.</p>
3961 </body>
3962 </html>
