index.html
19.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>SVG Filters 1.2, Part 1: Primer</title>
<link rel="stylesheet" type="text/css" href="style/svg-style.css" />
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD"/>
</head>
<body>
<div class="head">
<p><a href="http://www.w3.org/"><img height="48" width="72"
src="http://www.w3.org/Icons/w3c_home" alt="W3C" /></a></p>
<h1 id="pagetitle">SVG Filters 1.2, Part 1: Primer</h1>
<h2 id="pagesubtitle">W3C Working Draft 01 May 2007</h2>
<dl>
<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2007/WD-SVGFilterPrimer12-20070501/">http://www.w3.org/TR/2007/WD-SVGFilterPrimer12-20070501/</a></dd>
<dt>Latest version:</dt>
<dd><a href="http://www.w3.org/TR/SVGFilterPrimer12/">http://www.w3.org/TR/SVGFilterPrimer12/</a></dd>
<dt>Editors:</dt>
<dd>Erik Dahlström, Opera Software ASA, <<a
href="mailto:ed@opera.com">ed@opera.com</a>></dd>
<dt>Authors:</dt>
<dd>The authors of this specification are the participants of the W3C SVG Working Group.</dd>
</dl>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
</div>
<hr title="Separator from Header" />
<h2 id="abstract">Abstract </h2>
<p>
SVG is language for describing vector graphics, however it's typically rendered on raster displays. SVG filter effects is a way of processing the generated raster image before it's displayed.
</p>
<p>Although originally designed for use in SVG, filter effects are defined in XML and are accessed via a presentation property, and therefore could be used in other environments, such as HTML styled with CSS and XSL:FO.
</p>
<p>
This document introduces the features used by SVG filters.
</p>
<h2 id="status">Status of This Document </h2>
<p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
<p>This document is the First Public Working Draft of this specification. </p>
<p>
This document has been produced by the <a href="http://www.w3.org/Graphics/SVG/">W3C SVG Working Group</a> as
part of the W3C <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a> within the
<a href="http://www.w3.org/Interaction/">Interaction Domain</a>. The Working Group expects to advance this Working Draft to Recommendation Status.
</p>
<p>We explicitly invite comments on this specification. Please send them to <a
href="mailto:www-svg@w3.org">www-svg@w3.org</a>: the public email list for
issues related to vector graphics on the Web (<a
href="http://lists.w3.org/Archives/Public/www-svg/">archives</a>). Acceptance
of the archiving policy is requested automatically upon first post to this
list. To subscribe send an email to <a href="mailto:www-svg-request@w3.org">www-svg-request@w3.org</a> with
the word subscribe in the subject line. </p>
<p>This document was produced by a group operating under the
<a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5
February 2004 <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>.
<acronym title="World Wide Web Consortium">W3C</acronym> maintains a <a href="http://www.w3.org/2004/01/pp-impl/19480/status" rel="disclosure">public list of any
patent disclosures</a> made in connection with the
deliverables of the group; that page also includes
instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the
individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the
information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>.</p>
<p>
Publication as a Working Draft does not imply endorsement by the <acronym title="World Wide Web Consortium">W3C</acronym> Membership.
This is a draft document and may be updated, replaced or obsoleted by other
documents at any time. It is inappropriate to cite this document as other than
work in progress.
</p>
<h2 id="howto"> How to read this document and give feedback </h2>
<p>This is a primer for the SVG Filter specification. It gives guidelines on
how to use the SVG Filter specification with SVG 1.2. In many cases the
reader will have to be familiar with the <a href="http://www.w3.org/TR/SVG11/">SVG</a> language. </p>
<p>
This document is informative.
</p>
<h2 id="toc">Table of Contents</h2>
<ul class="toc">
<li>1 <a href="#Introduction">Filters in SVG</a>
</li>
<li>2 <a href="#Anexample">An example</a>
</li>
<li>3 <a href="#references">References</a>
</li>
</ul>
<h2 id="Introduction"> Filters in SVG</h2>
<p>Filter effects are defined by <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterElement"><span class="element-name">'filter'</span></a> elements. To apply a filter effect
to a <a href="http://www.w3.org/TR/SVG11/intro.html#TermGraphicsElement">graphics element</a>
or a <a href="http://www.w3.org/TR/SVG11/intro.html#TermContainerElement">container element</a>, you set the
value of the <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterProperty"><span class="prop-name">'filter'</span></a> property on the given element such that
it references the filter effect.</p>
<p>Each <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterElement"><span class="element-name">'filter'</span></a> element contains a set of <a id="TermFilterPrimitive" name="TermFilterPrimitive"><span class="SVG-Term">filter primitives</span></a> as its children. Each filter
primitive performs a single fundamental graphical operation (e.g., a blur or
a lighting effect) on one or more inputs, producing a graphical result.
Because most of the filter primitives represent some form of image
processing, in most cases the output from a filter primitive is a single RGBA
image.</p>
<p>The original source graphic or the result from a filter primitive can be
used as input into one or more other filter primitives. A common application
is to use the source graphic multiple times. For example, a simple filter
could replace one graphic by two by adding a black copy of original source
graphic offset to create a drop shadow. In effect, there are now two layers
of graphics, both with the same original source graphics.</p>
<p>When applied to <a href="http://www.w3.org/TR/SVG11/intro.html#TermContainerElement">container
elements</a> such as <a href="http://www.w3.org/TR/SVG11/struct.html#GElement"><span class="element-name">'g'</span></a>, the <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterProperty"><span class="prop-name">'filter'</span></a> property applies to the contents of the
group as a whole. The group's children do not render to the screen directly;
instead, the graphics commands necessary to render the children are stored
temporarily. Typically, the graphics commands are executed as part of the
processing of the referenced <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterElement"><span class="element-name">'filter'</span></a> element via use of the keywords <a href="/TR/2007/WD-SVGFilter12-20070501/#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> or <a href="/TR/2007/WD-SVGFilter12-20070501/#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>. Filter effects can be applied to
<a href="http://www.w3.org/TR/SVG11/intro.html#TermContainerElement">container elements</a> with no
content (e.g., an empty <a href="http://www.w3.org/TR/SVG11/struct.html#GElement"><span class="element-name">'g'</span></a> element), in which case the <a href="/TR/2007/WD-SVGFilter12-20070501/#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> or <a href="/TR/2007/WD-SVGFilter12-20070501/#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> consist of a transparent black
rectangle that is the size of the <a href="/TR/2007/WD-SVGFilter12-20070501/#FilterEffectsRegion"><span class="attr-value">filter
effects region</span></a>.</p>
<p>Sometimes filter primitives result in undefined pixels. For example,
filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feOffsetElement"><span class="element-name">'feOffset'</span></a> can shift an image down and to the
right, leaving undefined pixels at the top and left. In these cases, the
undefined pixels are set to transparent black.</p>
<h2 id="Anexample"> An example</h2>
<p>The following shows an example of a filter effect.</p>
<p><span class="example-ref">Example filters01</span> - introducing filter
effects.</p>
<div class="example">
<div class="exampleheader">
<strong>Example:</strong> <a href="examples/filters01.svg">filters01.svg</a>
</div>
<div class="examplesource">
<pre>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example filters01.svg - introducing filter effects</title>
<desc>An example which combines multiple filter primitives
to produce a 3D lighting effect on a graphic consisting
of the string "SVG" sitting on top of oval filled in red
and surrounded by an oval outlined in red.</desc>
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
</svg>
</pre>
</div>
<div class="exampleimage">
<img src="examples/filters01.png" alt="Rendering of filters01.svg" />
</div>
</div>
<p>The filter effect used in the example above is repeated here with
reference numbers in the left column before each of the six filter
primitives:</p>
<table summary="filter example with reference numbers">
<tbody>
<tr>
<td valign="top"><pre style="color:black">
1
2
3
4
5
6
</pre>
</td>
<td valign="top"><pre><filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<desc>Produces a 3D lighting effect.</desc>
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter></pre>
</td>
</tr>
</tbody>
</table>
<p>The following pictures show the intermediate image results from each of
the six filter elements:</p>
<table summary="filter example intermediate results">
<tbody>
<tr>
<td><p><img width="115" alt="filters01 - original source graphic" src="examples/filters01-0.png" height="70"></img><br></br>
Source graphic</p>
</td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 1" src="examples/filters01-1.png" height="70"></img><br></br>
After filter primitive 1</p>
</td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 2" src="examples/filters01-2.png" height="70"></img><br></br>
After filter primitive 2</p>
</td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 3" src="examples/filters01-3.png" height="70"></img><br></br>
After filter primitive 3</p>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 4" src="examples/filters01-4.png" height="70"></img><br></br>
After filter primitive 4</p>
</td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 5" src="examples/filters01-5.png" height="70"></img><br></br>
After filter primitive 5</p>
</td>
<td> </td>
<td><p><img width="115" alt="filters01 - after filter element 6" src="examples/filters01-6.png" height="70"></img><br></br>
After filter primitive 6</p>
</td>
</tr>
</tbody>
</table>
<ol>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feGaussianBlurElement"><span class="element-name">'feGaussianBlur'</span></a> takes input <a href="/TR/2007/WD-SVGFilter12-20070501/#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>, which is the alpha channel of
the source graphic. The result is stored in a temporary buffer named
"blur". Note that "blur" is used as input to both filter primitives 2 and
3.</li>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feOffsetElement"><span class="element-name">'feOffset'</span></a> takes buffer "blur", shifts
the result in a positive direction in both x and y, and creates a new
buffer named "offsetBlur". The effect is that of a drop shadow.</li>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feSpecularLightingElement"><span class="element-name">'feSpecularLighting'</span></a>, uses buffer "blur"
as a model of a surface elevation and generates a lighting effect from a
single point source. The result is stored in buffer "specOut".</li>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feCompositeElement"><span class="element-name">'feComposite'</span></a> masks out the result of
filter primitive 3 by the original source graphics alpha channel so that
the intermediate result is no bigger than the original source
graphic.</li>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feCompositeElement"><span class="element-name">'feComposite'</span></a> composites the result of
the specular lighting with the original source graphic.</li>
<li>Filter primitive <a href="/TR/2007/WD-SVGFilter12-20070501/#feMergeElement"><span class="element-name">'feMerge'</span></a> composites two layers together.
The lower layer consists of the drop shadow result from filter primitive
2. The upper layer consists of the specular lighting result from filter
primitive 5.</li>
</ol>
<h2 id="references"> References </h2>
<dl>
<dt id="SVG12Full">SVG12</dt>
<dd><strong>Scalable Vector Graphics (SVG) 1.2 Specification</strong>,
Dean Jackson editor, W3C, 27 October 2004 (Working Draft). See <a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a>
</dd>
<dt id="SVG12Requirements">SVG12Reqs</dt>
<dd><strong>SVG 1.1/1.2/2.0 Requirements</strong>, Dean Jackson editor,
W3C, 22 April 2002 (Working Draft). See <a href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/</a>
</dd>
<dt id="SVGPrintRequirements">SVGPrintReqs</dt>
<dd><strong>SVG Printing Requirements</strong>, Jun Fujisawa, Lee
Klosterman Craig Brown, Alex Danilo editors, W3C, 18 February 2003
(Working Draft). See <a href="http://www.w3.org/TR/2003/WD-SVGPrintReqs-20030218/">http://www.w3.org/TR/2003/WD-SVGPrintReqs-20030218/</a>
</dd>
<dt id="SVG12Print">SVG12Print</dt>
<dd><strong>SVG Print 1.2</strong>, Andrew Shellshear editor, W3C, 1 May 2007 (Working Draft). See <a href="http://www.w3.org/TR/2007/WD-SVGPrint12-20070501/">http://www.w3.org/TR/2007/WD-SVGPrint12-20070501/</a>
</dd>
</dl>
</body>
</html>