- From: Erik Dahlstrvm via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 07 Jan 2011 13:10:55 +0000
- To: public-fx-editors@w3.org
Update of /sources/public/Graphics-FX/modules/filters/publish
In directory hutz:/tmp/cvs-serv19086
Added Files:
SVGFilter.html SVGFilterPrimer.html SVGFilterReqs.html
Log Message:
Moved filters spec from dev.w3.org/SVG/modules/filters.
--- NEW FILE: SVGFilterReqs.html ---
<!--
SVG Filter Requirements
$Id: SVGFilterReqs.html,v 1.1 2011/01/07 13:10:53 edahlstr Exp $
Note: This document is generated from ../master/SVGFilterReqs.html.
Run "make" from ../master/ to regenerate it.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>SVG Filter Requirements</title><style type="text/css">
.designgoals {
list-style-type: decimal;
}
.req-level1 {
list-style-type: decimal;
font-weight: bold;
}
.req-level2 {
list-style-type: decimal;
font-weight: normal;
}
.req-level1 li {
margin-top: 1em;
}
.req-level2 li {
margin-top: 0em;
}
.label {
margin-top: 1em;
}
.comment {
background: #ffffaa;
}
.svgversion {
color: #336633;
font-weight: bold;
}
.term {
font-weight: bold;
color: #aa3333;
}
.issue {
color: #ff0000;
}
</style><link rel="stylesheet" href="style/base.css"/><link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"/></head><body>
<div class="head">
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
<h1 id="pagetitle">SVG Filter Requirements</h1>
<h2 id="pagesubtitle">W3C Editor’s Draft <em>07 January 2011</em></h2>
<dl><dt>This version:</dt><dd><a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilterReqs.html">http://dev.w3.org/SVG/modules/filters/publish/SVGFilterReqs.html</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/SVGFilterReqs12/">http://www.w3.org/TR/SVGFilterReqs12/</a></dd><dt>Previous version:</dt><dd><a href="http://www.w3.org/2007/WD-SVGFilterReqs12-20070501/">http://www.w3.org/2007/WD-SVGFilterReqs12-20070501/</a></dd><dt>Editor:</dt><dd>Erik Dahlström, Opera Software <<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> © 2011 <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/>
<h2 id="sec-abstract">Abstract</h2>
<p>This document lists the design principles and requirements for the
creation of a SVG specification related to filters. </p>
<h2 id="sec-status">Status of this Document</h2>
<p>This is a W3C Working Draft for review by W3C Members and other interested
parties. It is a draft document and may be updated, replaced or made obsolete
by other documents at any time. It is inappropriate to use W3C Working Drafts
as reference material or to cite them as other than "work in progress". A
list of current W3C Recommendations and other technical documents, including
Working Drafts and Notes, can be found at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a> </p>
<p>This is the first release of the SVG Filter Requirements. It is expected
that this document will progress through a number of working drafts,
including "Last Call", before being published in final form. </p>
<p>This document was developed by the <a href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics</a> (SVG)
working group as part of the W3C <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a>. The authors
of this document are the SVG Working Group members. </p>
<p>Feedback on this document should be sent to the email list <a href="mailto:public-svg-filters@w3.org">public-svg-filters@w3.org</a>. This
is an archived public list specific to the issues of SVG Filters. Public
discussion of issues related to vector graphics on the Web and SVG in
particular takes place on the <a href="mailto:www-svg@w3.org">the public
mailing list of the SVG Working Group</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">list archives</a>). To
subscribe send an email to <code>www-svg-request@w3.org</code> with the word
<code>subscribe</code> in the subject line. </p>
<p>The latest information regarding <a rel="disclosures" href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a>
related to this document is available on the Web. As of this publication, the
SVG Working Group are not aware of any royalty-bearing patents they believe
to be essential to SVG. </p>
<p><em>This section represents the status of this document at the time this
version was published. It will become outdated if and when a new version is
published. The latest status is maintained at the W3C. </em> </p>
<h2 id="toc">Table of Contents</h2>
<ul class="toc">
<li><a href="#sec-introduction">1 Introduction </a></li>
<li><a href="#sec-terminology">2 Terminology </a></li>
<li><a href="#sec-usage">3 Usage Scenarios </a></li>
<li><a href="#sec-features">4 Special Filter Considerations</a></li>
<li><a href="#sec-requirements">5 Requirements</a></li>
<li><a href="#sec-references">6 References</a></li>
<li><a href="#sec-authorlist">7 Author List</a></li></ul>
<div class="div1">
<h2 id="sec-introduction">1 Introduction </h2>
<p>The
<a href="http://www.w3.org/TR/SVG11">SVG specification</a> is a W3C
recommendation that describes two-dimensional graphics in XML. </p>
</div>
<div class="div1">
<h2 id="sec-terminology">2 Terminology </h2>
<p>The following key words and phrases used throughout this document are
defined here for clarity. The terms Must, Should, and May are used to specify
the extent to which an item is a requirement for the SVG working group in
defining SVGP. These recommendations should not be mistaken as a guide to
implementors. </p>
<ol><li><b>'Must'</b> means that the item is an absolute requirement. </li><li><b>'Should'</b> means that there may exist valid reasons in particular
circumstances to ignore the item, but the full implications must be
understood and carefully weighed before choosing a different course. </li><li><b>'May' </b> means that item will be considered, but further
examination is needed to determine if the item should be treated as a
requirement. </li><li><b>'SVG' </b> refers to SVG in general without reference to any version
or profile. </li><li><b>'SVG 1.0' </b> refers to the original SVG specification. </li><li><b>'SVG 1.1' </b> refers to the modularized version of SVG 1.0. </li><li><b>'SVG 1.2' </b> refers to the next release of SVG and is planned to
reference this specification. </li><li><b>'SVGF' </b> refers to SVG Filter, an SVG specification for
filtering. </li></ol>
</div>
<div class="div1">
<h2 id="sec-usage">3 Usage Scenarios </h2>
<p>The following usage scenarios illustrate some of the ways in which SVG
Filters might be used for various applications. </p>
<p><b>Making drop shadows</b> Filtering the input (e.g. text or bitmaps) to
produce drop shadows. </p>
<p><b>Changing color tone</b> Filtering the input to become e.g. sepia-toned or black and white.</p>
</div>
<div class="div1">
<h2 id="sec-features">4 Special Filter Considerations</h2>
<p><b>Memory and processor requirements</b> A filter effect may require
significant memory or processing resources. </p>
</div>
<div class="div1">
<h2 id="sec-requirements">5 Requirements</h2>
<ol class="req-level1"><li>General Requirements
<ol class="req-level2"><li>Any valid SVG 1.1 filter <span class="term">must</span> be a valid
SVGF filter. </li><li>Conformance criteria for SVGF <span class="term">must</span> be
produced. The criteria <span class="term">should</span> be separated
into sections relevant to particular application types (eg. SVG
files/document fragments, SVG generators, SVG viewers, SVG printers,
etc.) </li><li>Software or documents <span class="term">must</span> pass the
relevant criteria to be able to claim conformance to the particular
application type. </li><li>A conformance test suite <span class="term">must</span> be
developed for SVGF. The test suite must be made publicly available.
Conformance test suites for other uses of SVGF (e.g. prepress
guidelines) <span class="term">may</span> be developed. </li><li>A specification referencing SVGF <span class="term">may</span>
declare that 'enableBackground' is not supported when used in
conjunction with that specification. If so, then support for
'backgroundAlpha' and 'backgroundImage' <span class="term">must</span> be excluded as well. </li><li>A specification referencing SVGF <span class="term">must</span>
declare if animations applies when a 'filter' chain is in its scope.
</li></ol>
</li><li>Scripting
<ol class="req-level2"><li>A dynamic SVGF viewer <span class="term">must</span> support the
SVGF scripting feature set. </li></ol>
</li><li>Animation
<ol class="req-level2"><li>A dynamic SVGF viewer <span class="term">must</span> support animation of all
properties listed as animatable. </li></ol>
</li></ol>
</div>
<div class="div1">
<h2 id="sec-references">6 References</h2>
<dl class="references"><dt class="label" id="ref-svg">SVG 1.1</dt><dd><em>Scalable Vector Graphics (SVG) 1.1 Specification</em>, Jon
Ferraiolo, Jun Fujisawa, Dean Jackson, editors, W3C, 14 January 2003
(Recommendation). See <a href="http://www.w3.org/TR/SVG11/">http://www.w3.org/TR/SVG11/</a> </dd><dt class="label" id="ref-svgreqs">SVG 1.1/1.2/2.0
Requirements</dt><dd><em>SVG 1.1/1.2/2.0 Requirements Document</em>, Dean Jackson, editor,
W3C, 22 April 2002. See <a href="http://www.w3.org/TR/SVG2Reqs/">http://www.w3.org/TR/SVG2Reqs/</a>
</dd><dt class="label" id="ref-svgmobilereqs">Mobile SVG Profiles</dt><dd><em>Mobile SVG Profiles: SVG Tiny and SVG Basic</em>, Tolga Capin,
editor, W3C, 14 January 2003 (Recommendation). See <a href="http://www.w3.org/TR/SVGMobile">http://www.w3.org/TR/SVGMobile</a>
</dd></dl>
</div>
<hr class="xhtml"/>
<h2 id="sec-authorlist">7 Author List</h2>
<p>The authors of this specification are the participants of the W3C SVG
Working Group.</p>
<dl><dt>Authors:</dt><dd><ul><li>Ola Andersson, ZOOMON AB</li><li>Henric Axelsson, Ericsson AB</li><li>Phil Armstrong, Corel Corporation</li><li>Robin Berjon, Expway</li><li>Benoît Bézaire, Corel Corporation</li><li>Craig Brown, Canon Information Systems Research Australia</li><li>Mike Bultrowicz, Savage Software</li><li>Tolga Capin, Nokia Inc.</li><li>Mathias Larsson Carlander, Ericsson AB</li><li>Jakob Cederquist, ZOOMON AB</li><li>Charilaos Christopoulos, Ericsson AB</li><li>Lee Cole, Quark</li><li>Don Cone, America Online Inc.</li><li>Alex Danilo, Canon Information Systems Research Australia</li><li>Thomas DeWeese, Eastman Kodak</li><li>Jon Ferraiolo, Adobe Systems Inc.</li><li>Darryl Fuller, Schema Software</li><li>藤沢 淳 (FUJISAWA Jun), Canon</li><li>Rick Graham, BitFlash</li><li>Vincent Hardy, Sun Microsystems Inc.</li><li>端山 貴也 (HAYAMA Takanari), KDDI Research Labs</li><li>Lofton Henderson, OASIS</li><li>石川雅康 (ISHIKAWA Masayasu), W3C</li><li>Dean Jackson, W3C/CSIRO (<i>W3C TeamContact</i>)</li><li>Christophe Jolif, ILOG S.A.</li><li>Lee Klosterman, Hewlett-Packard</li><li>小林 亜令 (KOBAYASHI Arei), KDDI Research Labs</li><li>Thierry Kormann, ILOG S.A.</li><li>Yuri Khramov, Schema Software</li><li>Chris Lilley, W3C (<i>Working Group Chair</i>)</li><li>Philip Mansfield, Schema Software</li><li>Peter Mierau, Adobe Systems Inc.</li><li>水口 充 (MINAKUCHI Mitsuru), Sharp Corporation</li><li>Luc Minnebo, Agfa-Gevaert N.V.</li><li>小野 修一郎 (ONO Shuichiro), Sharp Corporation</li><li>Antoine Quint, Fuchsia Design (formerly of ILOG)</li><li>相良 毅 (SAGARA Takeshi), KDDI Research Labs</li><li>Brad Sipes, ZOOMON AB</li><li>Peter Sorotokin, Adobe Systems Inc.</li><li>上田 宏高 (UEDA Hirotaka), Sharp Corporation</li><li>Rick Yardumian, Canon Development Americas</li><li>Charles Ying, Openwave Systems, Inc.</li></ul>
</dd></dl>
<script src="style/expanders.js" type="text/javascript"> </script></body></html>
--- NEW FILE: SVGFilter.html ---
<!--
SVG Filters 1.2, Part 2: Language
$Id: SVGFilter.html,v 1.1 2011/01/07 13:10:53 edahlstr Exp $
Note: This document is generated from ../master/SVGFilter.html.
Run "make" from ../master/ to regenerate it.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>SVG Filters 1.2, Part 2: Language</title><link rel="stylesheet" type="text/css" href="style/svg-style.css"/><link rel="stylesheet" type="text/css" href="style/svg-style-extra.css"/><link rel="stylesheet" href="style/base.css"/><link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"/></head><body>
<div class="head">
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
<h1 id="pagetitle">SVG Filters 1.2, Part 2: Language</h1>
<h2 id="pagesubtitle">W3C Editor’s Draft <em>07 January 2011</em></h2>
<dl><dt>This version:</dt><dd><a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilter.html">http://dev.w3.org/SVG/modules/filters/publish/SVGFilter.html</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/SVGFilter12/">http://www.w3.org/TR/SVGFilter12/</a></dd><dt>Previous version:</dt><dd><a href="http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/">http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/</a></dd><dt>Editor:</dt><dd>Erik Dahlström, Opera Software <<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> © 2011 <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>
[...4435 lines suppressed...]
Regular grammar- based validation — RELAX NG. ISO/IEC FDIS
19757-2:2002(E)</strong>, J. Clark, <span class="ruby"><span lang="ja" class="rb">村田 真</span> <span class="rp">(</span><span class="rt"><span class="familyname">Murata</span> M.</span><span class="rp">)</span></span>, eds., 12 December 2002. See <a 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>
</dd><dt id="ref-Schema2"><strong class="normref">[Schema2]</strong></dt><dd><strong>XML Schema Part 2: Datatypes Second Edition</strong>, P.
Biron, A. Malhotra, eds. W3C, 28 October 2004 (Recommendation). Latest
version available at <a href="http://www.w3.org/TR/xmlschema-2/">http://www.w3.org/TR/xmlschema-2/</a>.
See also <a href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/">Processing
XML 1.1 documents with XML Schema 1.0 processors</a>. </dd><dt id="ref-svg11"><strong class="normref">[SVG11]</strong></dt><dd><strong>Scalable Vector Graphics (SVG) 1.1 Specification</strong>,
Dean Jackson editor, W3C, 14 January 2003 (Recommendation). See <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/">http://www.w3.org/TR/2003/REC-SVG11-20030114/</a>
</dd><dt id="ref-svgt12"><strong class="normref">[SVGT12]</strong></dt><dd><strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>,
Dean Jackson editor, W3C, 22 December 2008 (Recommendation). See <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/</a>
</dd></dl>
<h3 id="informref">32.2 Informative References</h3>
<dl><dt id="ref-html5"><strong class="informref">[HTML5]</strong></dt><dd><strong>HTML5</strong>, Ian Hickson editor, Google,
10 June 2008 (Working Draft). See <a href="http://www.w3.org/TR/2008/WD-html5-20080610/">http://www.w3.org/TR/2008/WD-html5-20080610/</a>
</dd></dl>
<h2 id="changes">33 Changes</h2>
<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>
<script src="style/expanders.js" type="text/javascript"> </script></body></html>
--- NEW FILE: SVGFilterPrimer.html ---
<!--
SVG Filters 1.2, Part 1: Primer
$Id: SVGFilterPrimer.html,v 1.1 2011/01/07 13:10:53 edahlstr Exp $
Note: This document is generated from ../master/SVGFilterPrimer.html.
Run "make" from ../master/ to regenerate it.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><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" href="style/base.css"/><link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"/></head><body>
<div class="head">
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
<h1 id="pagetitle">SVG Filters 1.2, Part 1: Primer</h1>
<h2 id="pagesubtitle">W3C Editor’s Draft <em>07 January 2011</em></h2>
<dl><dt>This version:</dt><dd><a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilterPrimer.html">http://dev.w3.org/SVG/modules/filters/publish/SVGFilterPrimer.html</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/SVGFilterPrimer12/">http://www.w3.org/TR/SVGFilterPrimer12/</a></dd><dt>Previous 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>Editor:</dt><dd>Erik Dahlström, Opera Software <<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> © 2011 <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/>
<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. The latest status
of this document series is maintained at the W3C. </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>.
</p>
<p>We explicitly invite comments on this specification. Please send them to
<a href="mailto:public-svg-filters@w3.org">public-svg-filters@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/public-svg-filters/">archives</a>).
For comments on the core SVG language, use <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 either
list. To subscribe to these lists send an email to <a href="mailto:public-svg-filters-request@w3.org">public-svg-filters-request@w3.org</a>
or <a href="mailto:www-svg-request@w3.org">www-svg-request@w3.org</a> with
the word subscribe in the subject line. </p>
<p>The latest information regarding <a href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a>
related to this document is available on the Web. As of this publication, the
SVG Working Group are not aware of any royalty-bearing patents they believe
to be essential to SVG. </p>
<p>Publication of this document does not imply endorsement by the W3C
membership. A list of current W3C Recommendations and other technical
documents can be found at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>. W3C publications may
be updated, replaced, or obsoleted by other documents at any time. It is
inappropriate to cite a W3C Working Draft as anything other than a <em>work
in progress</em>." </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><a href="#Introduction">1 Filters in SVG</a></li>
<li><a href="#Example">2 An example</a></li>
<li><a href="#feGaussianBlurElement">3 Filter primitive <span class="element-name">‘feGaussianBlur’</span></a></li>
<li><a href="#references">4 References </a></li></ul>
<h2 id="Introduction">1 Filters in SVG</h2>
<p>Filter effects are defined by <a href="SVGFilter.html#FilterElement"><span class="element-name">‘filter’</span></a> elements. To apply a filter effect
to a <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">graphics element</span></a> or a <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>, you set the
value of the <a href="SVGFilter.html#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="SVGFilter.html#FilterElement"><span class="element-name">‘filter’</span></a> element contains a set of
<span id="TermFilterPrimitive" class="SVG-Term">filter primitives</span> 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/2003/REC-SVG11-20030114/intro.html#TermContainerElement"><span class="svg-term">container elements</span></a> such as <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#GElement"><span class="element-name">‘g’</span></a>, the <a href="SVGFilter.html#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="SVGFilter.html#FilterElement"><span class="element-name">‘filter’</span></a> element via use of the keywords
<a href="SVGFilter.html#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> or <a href="SVGFilter.html#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>.
Filter effects can be applied to <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermContainerElement"><span class="svg-term">container elements</span></a> with no
content (e.g., an empty <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#GElement"><span class="element-name">‘g’</span></a> element), in which case the
<a href="SVGFilter.html#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> or <a href="SVGFilter.html#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> consist of a transparent black
rectangle that is the size of the
<a href="SVGFilter.html#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</p>
<p>Sometimes filter primitives result in undefined pixels. For example,
filter primitive <a href="SVGFilter.html#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="Example">2 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>
<pre class="xml"><?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><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/filters01.png"/></td></tr></table><p class="view-as-svg"><a href="examples/filters01.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
<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" height="70" alt="filters01 - original source graphic" src="examples/filters01-0.png"/><br/>
Source graphic</p>
</td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 1" src="examples/filters01-1.png"/><br/>
After filter primitive 1</p>
</td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 2" src="examples/filters01-2.png"/><br/>
After filter primitive 2</p>
</td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 3" src="examples/filters01-3.png"/><br/>
After filter primitive 3</p>
</td></tr><tr><td> </td><td> </td><td/><td/><td/><td/><td/></tr><tr><td> </td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 4" src="examples/filters01-4.png"/><br/>
After filter primitive 4</p>
</td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 5" src="examples/filters01-5.png"/><br/>
After filter primitive 5</p>
</td><td> </td><td><p><img width="115" height="70" alt="filters01 - after filter element 6" src="examples/filters01-6.png"/><br/>
After filter primitive 6</p>
</td></tr></tbody></table>
<ol><li>Filter primitive <a href="SVGFilter.html#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> takes input <a href="SVGFilter.html#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="SVGFilter.html#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="SVGFilter.html#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="SVGFilter.html#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="SVGFilter.html#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="SVGFilter.html#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="feGaussianBlurElement">3 Filter primitive <span class="element-name">‘feGaussianBlur’</span></h2>
<p>
The <a href="SVGFilter.html#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> filter primitive can be used to create blur effects.
Below is an example where the blur is applied only in one direction, which can
give better performance in some <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermUserAgent"><span class="svg-term">user agents</span></a>.
<pre class="xml"><?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 360">
<defs>
<font-face font-family="FORQUE">
<font-face-src>
<font-face-uri xlink:href="Forque.svg#FORQUE"/>
</font-face-src>
</font-face>
<style>
/* Free font by Tup Wanders, http://www.tupwanders.nl, Licensed with a Creative Commons attribution license. */
text { text-anchor: middle; font: 70px FORQUE, sans-serif; }
#bx { filter: url(#blurX) }
#by { filter: url(#blurY) }
#header { filter: url(#ds); fill: white; text-decoration: underline }
#attribution { font-size: 6px }
:root { background: green; fill: white }
</style>
<filter id="blurX" x="0" y="20%" width="100%" height="1.5em" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="4 0">
<animate attributeName="stdDeviation" values="8 0;20 0;0 0" keySplines="0.25 0.1 0.25 1" keyTimes="0;0.5;1" calcMode="spline" dur="4s" begin="bx.click" fill="freeze"/>
</feGaussianBlur>
</filter>
<filter id="blurY" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="0 4"/>
</filter>
<filter id="ds" x="-0.1" y="-0.1" width="1.2" height="1.2">
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="2" dy="2"/>
<feComposite in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<text id="bx" x="40%" y="50%">BlurX</text>
<text id="by" x="60%" y="70%">BlurY</text>
<text id="header" y="1em" x="50%">Unidirectional blur</text>
<text id="attribution" x="100%" y="355">Forque font by Tup Wanders</text>
</svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feGaussianBlur-stdDeviation-00.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feGaussianBlur-stdDeviation-00.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
</p>
<p>The blur filter can also be used for creating the impression of something being in motion, as in this example.
<pre class="xml"><?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 360">
<defs>
<filter id="motionblur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
<symbol id="crow" viewBox="0 0 197 190">
<path d="M 72.566789,186.38448 C 71.202549,184.36785 66.167569,175.06788 61.377949,165.71788 C 56.588329,156.36788 52.650829,149.03965 52.627949,149.43293 C 52.605069,149.82621 53.231819,152.07621 54.020719,154.43293 C 56.134749,160.74826 59.591199,174.77158 59.554549,176.88449 C 59.524869,178.59503 59.416409,178.58387 57.935879,176.71788 C 55.201299,173.27137 45.853349,153.1995 41.635529,141.71788 C 37.663679,130.90581 37.605079,130.81611 38.205719,136.46788 C 38.959899,143.56439 37.583169,143.96813 34.795769,137.46788 C 30.104179,126.52701 28.892829,118.89987 27.609109,92.21788 C 26.579279,70.81278 27.181269,61.74079 30.007419,56.07564 C 31.906109,52.26963 32.139109,52.60152 20.824699,42.99574 C 13.205099,36.52681 11.734279,35.68694 7.1852392,35.20738 L 2.0863492,34.66985 L 7.5863492,32.82094 C 10.611349,31.80405 13.481709,30.60949 13.964929,30.16638 C 15.394959,28.85504 9.7899892,24.44625 4.4291292,22.66566 C 1.6943392,21.75731 -0.28374076,20.75464 0.033389242,20.43751 C 0.35051924,20.12038 7.241692,19.78442 15.348169,19.69093 C 30.881569,19.51179 34.937409,20.13958 47.086349,24.60361 C 50.936349,26.01826 55.713159,27.18519 57.701489,27.19679 C 65.982349,27.2451 71.556499,17.90344 69.368439,7.6442896 C 67.940739,0.95023961 69.214399,0.010319613 79.726899,2.961339e-05 C 85.523249,-0.0056403866 91.246029,0.80265961 98.391539,2.6362896 C 104.0594,4.0907296 112.29453,5.9632196 116.69184,6.7973796 C 134.01279,10.0831 145.35739,15.11226 132.4653,13.78988 C 123.72653,12.89352 125.97985,14.08978 145.54774,20.73521 C 161.35384,26.10311 174.7538,32.06177 176.16916,34.35187 C 176.71697,35.23824 175.39586,35.37836 170.91088,34.90959 C 167.61644,34.56525 164.05819,34.00702 163.00367,33.66907 C 159.44558,32.52878 164.45052,35.98642 172.8528,40.47328 C 181.01437,44.83161 187.58635,49.6841 187.58635,51.35196 C 187.58635,51.95969 185.75677,52.07923 182.83635,51.6623 C 177.61881,50.91742 177.61253,50.9017 184.83635,56.66751 C 189.29595,60.22701 191.15689,64.23449 188.33635,64.20466 C 187.64885,64.19739 183.75408,6228489 179.6813,59.95466 C 175.60852,57.62443 170.43352,54.66077 168.1813,53.36875 C 160.24766,48.81749 155.25808,48.53915 153.96805,52.57585 C 153.59155,53.75397 153.17397,57.05515 153.04009,59.91181 C 152.72526,66.62933 148.47286,73.16418 144.39537,73.19653 C 141.27521,73.22129 140.06261,74.55103 141.84736,75.99069 C 143.5779,77.38662 163.91595,85.24612 177.08635,89.60855 C 183.13635,91.61249 189.88635,94.27223 192.08634,95.51908 C 196.03044,97.75438 196.08764,97.86951 196.17774,103.75198 C 196.32804,113.55263 191.83044,119.99235 183.2058,122.3255 C 179.71567,123.26966 178.08026,123.11668 172.50059,121.32412 C 165.62068,119.11384 161.59126,116.76556 147.7546,106.9026 C 143.17214,103.63615 137.09714,100.07812 134.2546,98.99585 L 129.08635,97.0281 L 124.58635,102.12335 C 122.11135,104.92574 119.27183,107.21844 118.2763,107.21824 C 117.28078,107.21804 114.25803,108.66351 111.55908,110.4304 C 108.02382,112.74478 106.47184,114.49211 106.00784,116.6804 C 105.6536,118.35101 104.7976,120.39288 104.10563,121.21788 102.12794,123.57575 99.866059,134.66955 99.008439,146.21788 C 98.702099,150.34288 97.981489,154.68231 97.407089,155.86106 C 96.606229,157.50454 96.855109,159.32029 98.474539,163.64858 C 99.636029,166.75296 100.58635,170.19015 100.58635,171.28678 C 100.58635,174.34075 97.802589,174.76966 95.009829,172.14599 L 92.535069,169.82107 L 94.060709,174.1452 C 97.730759,184.54723 95.140999,185.2202 87.992199,175.72216 C 84.864209,171.56625 82.136779,168.33411 81.931259,168.53964 C 81.725729,168.74517 82.756989,171.5332 84.222939,174.73527 C 87.061249,180.93494 87.859979,187.23913 85.894459,187.92805 C 85.215209,188.16613 81.485349,182.83448 77.222469,175.53184 C 73.108409,168.48416 69.042179,161.81788 68.186409,160.71788 C 66.764029,158.88956 66.749579,159.06125 68.018079,162.71788 C 68.781269,164.91788 70.803819,170.06041 72.512649,174.14572 C 77.734689,186.63018 77.767619,194.07236 72.566789,186.38448 z"/>
</symbol>
</defs>
<image xlink:href="forest-small.jpg" width="100%" height="100%" filter="url(#motionblur)"/>
<use xlink:href="#crow" width="25%" height="25%" x="20%" y="40%" transform="rotate(-12)"/>
</svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feGaussianBlur-motion-00.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feGaussianBlur-motion-00.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
</p>
<h2 id="references">4 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="SVGFilterRequirements">SVGFilterReqs</dt><dd><strong>SVG Filter Requirements</strong>, Erik Dahlström, W3C, 3 May 2007
(Working Draft). See <a href="http://www.w3.org/TR/2007/WD-SVGFilterReqs12-20070501/">http://www.w3.org/TR/2007/WD-SVGFilterReqs12-20070501/</a>
</dd><dt id="SVG12Filter">SVG12Filters</dt><dd><strong>SVG Filters 1.2</strong>, Erik Dahlström editor, W3C, 3 May 2007 (Working Draft). See <a href="http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/">http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/</a>
</dd></dl>
<script src="style/expanders.js" type="text/javascript"> </script></body></html>
Received on Friday, 7 January 2011 13:10:58 UTC