SVG Essentials/Filters - Revision history

Docbook2Wiki: Initial conversion from Docbook

2008-03-07T13:40:50Z

Initial conversion from Docbook

←Older revision

Revision as of 13:40, 7 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-07T12:51:41Z

Initial conversion from Docbook

←Older revision		Revision as of 12:51, 7 March 2008
Line 203:		Line 203:
	</div>		</div>
	</dl>		</dl>
		+
	<dl>		<dl>
	<dt><tt>saturate</tt>		<dt><tt>saturate</tt>
Line 213:		Line 214:
	</div>		</div>
	</dl>		</dl>
		+
	<dl>		<dl>
	<dt><tt>luminanceToAlpha</tt>		<dt><tt>luminanceToAlpha</tt>
Line 223:		Line 225:
	</div>		</div>
	</dl>		</dl>
		+

	== The feImage Filter ==		== The feImage Filter ==
Line 361:		Line 364:
	If you are dividing the input spectrum into <tt>''n''</tt> different sections, you must provide <tt>''n''</tt>+1 items in <tt>tableValues</tt>, separated by whitespace or commas.		If you are dividing the input spectrum into <tt>''n''</tt> different sections, you must provide <tt>''n''</tt>+1 items in <tt>tableValues</tt>, separated by whitespace or commas.
	</dl>		</dl>
		+
	<dl>		<dl>
	<dt><tt>discrete</tt>		<dt><tt>discrete</tt>
Line 386:		Line 390:
	Dividing the input channel into <tt>''n''</tt> sections requires <tt>''n''</tt> entries in the <tt>tableValues</tt> attribute. ''Exception'': If you want to remap all the input values to a single output value, you must place that entry into <tt>tableValues</tt> twice; thus, to set any input value of the blue channel to 0.5, you would say: <tt><feFuncB type="discrete" tableValues="0.5 0.5"/></tt>.		Dividing the input channel into <tt>''n''</tt> sections requires <tt>''n''</tt> entries in the <tt>tableValues</tt> attribute. ''Exception'': If you want to remap all the input values to a single output value, you must place that entry into <tt>tableValues</tt> twice; thus, to set any input value of the blue channel to 0.5, you would say: <tt><feFuncB type="discrete" tableValues="0.5 0.5"/></tt>.
	</dl>		</dl>
		+

	<div class="note">		<div class="note">
Line 449:		Line 454:
	</div>		</div>
	</dl>		</dl>
		+

	[[SVG Essentials/Filters#svgess-CHP-10-FIG-15\|Figure 10-15]] shows the combinations that we've described; the arithmetic blend is 50% of A and 50% of B.		[[SVG Essentials/Filters#svgess-CHP-10-FIG-15\|Figure 10-15]] shows the combinations that we've described; the arithmetic blend is 50% of A and 50% of B.

Evanlenz: 1 revision(s)

2008-03-06T23:40:38Z

1 revision(s)

←Older revision

Revision as of 23:40, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T23:33:32Z

Initial conversion from Docbook

←Older revision

Revision as of 23:33, 6 March 2008

Evanlenz: 1 revision(s)

2008-03-06T22:52:46Z

1 revision(s)

←Older revision

Revision as of 22:52, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T22:38:57Z

Initial conversion from Docbook

←Older revision

Revision as of 22:38, 6 March 2008

Evanlenz: 1 revision(s)

2008-03-06T22:22:07Z

1 revision(s)

←Older revision

Revision as of 22:22, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

2008-03-06T22:21:01Z

Initial conversion from Docbook

←Older revision		Revision as of 22:21, 6 March 2008
Line 7:		Line 7:
	'''Figure 10-1. Flower composed of plain vectors'''		'''Figure 10-1. Flower composed of plain vectors'''

-	[[Image:SVG ~~Essentials/I_10_tt189~~.png\|Flower composed of plain vectors]]	+	[[Image:SVG Essentials_I_10_tt189.png\|Flower composed of plain vectors]]
	</div>		</div>

Line 63:		Line 63:
	'''Figure 10-2. Result of first attempt at a drop shadow'''		'''Figure 10-2. Result of first attempt at a drop shadow'''

-	[[Image:SVG ~~Essentials/I_10_tt191~~.png\|Result of first attempt at a drop shadow]]	+	[[Image:SVG Essentials_I_10_tt191.png\|Result of first attempt at a drop shadow]]
	</div>		</div>

Line 106:		Line 106:
	'''Figure 10-3. Result of improved drop shadow'''		'''Figure 10-3. Result of improved drop shadow'''

-	[[Image:SVG ~~Essentials/I_10_tt194~~.png\|Result of improved drop shadow]]	+	[[Image:SVG Essentials_I_10_tt194.png\|Result of improved drop shadow]]
	</div>		</div>

Line 124:		Line 124:
	'''Figure 10-4. Drop shadow applied to text'''		'''Figure 10-4. Drop shadow applied to text'''

-	[[Image:SVG ~~Essentials/I_10_tt195~~.png\|Drop shadow applied to text]]	+	[[Image:SVG Essentials_I_10_tt195.png\|Drop shadow applied to text]]
	</div>		</div>

Line 185:		Line 185:
	'''Figure 10-5. Drop shadow and glowing text'''		'''Figure 10-5. Drop shadow and glowing text'''

-	[[Image:SVG ~~Essentials/I_10_tt198~~.png\|Drop shadow and glowing text]]	+	[[Image:SVG Essentials_I_10_tt198.png\|Drop shadow and glowing text]]
	</div>		</div>

Line 200:		Line 200:
	'''Figure 10-6. Result of hueRotate on fully saturated colors'''		'''Figure 10-6. Result of hueRotate on fully saturated colors'''

-	[[Image:SVG ~~Essentials/I_10_tt199~~.png\|Result of hueRotate on fully saturated colors]]	+	[[Image:SVG Essentials_I_10_tt199.png\|Result of hueRotate on fully saturated colors]]
	</div>		</div>
	</dl>		</dl>
Line 210:		Line 210:
	'''Figure 10-7. Result of saturate on primary colors'''		'''Figure 10-7. Result of saturate on primary colors'''

-	[[Image:SVG ~~Essentials/I_10_tt200~~.png\|Result of saturate on primary colors]]	+	[[Image:SVG Essentials_I_10_tt200.png\|Result of saturate on primary colors]]
	</div>		</div>
	</dl>		</dl>
Line 220:		Line 220:
	'''Figure 10-8. Result of luminanceToAlpha'''		'''Figure 10-8. Result of luminanceToAlpha'''

-	[[Image:SVG ~~Essentials/I_10_tt201~~.png\|Result of luminanceToAlpha]]	+	[[Image:SVG Essentials_I_10_tt201.png\|Result of luminanceToAlpha]]
	</div>		</div>
	</dl>		</dl>
Line 258:		Line 258:
	'''Figure 10-9. Result of feImage'''		'''Figure 10-9. Result of feImage'''

-	[[Image:SVG ~~Essentials/I_10_tt202~~.png\|Result of feImage]]	+	[[Image:SVG Essentials_I_10_tt202.png\|Result of feImage]]
	</div>		</div>

Line 292:		Line 292:
	'''Figure 10-10. Result of linear component transfer'''		'''Figure 10-10. Result of linear component transfer'''

-	[[Image:SVG ~~Essentials/I_10_tt203~~.png\|Result of linear component transfer]]	+	[[Image:SVG Essentials_I_10_tt203.png\|Result of linear component transfer]]
	</div>		</div>

Line 300:		Line 300:
	'''Figure 10-11. Gamma curve functions'''		'''Figure 10-11. Gamma curve functions'''

-	[[Image:SVG ~~Essentials/I_10_tt204~~.png\|Gamma curve functions]]	+	[[Image:SVG Essentials_I_10_tt204.png\|Gamma curve functions]]
	</div>		</div>

Line 322:		Line 322:
	'''Figure 10-12. Result of using gamma correction'''		'''Figure 10-12. Result of using gamma correction'''

-	[[Image:SVG ~~Essentials/I_10_tt205~~.png\|Result of using gamma correction]]	+	[[Image:SVG Essentials_I_10_tt205.png\|Result of using gamma correction]]
	</div>		</div>

Line 402:		Line 402:
	'''Figure 10-13. Result of using table and discrete transfers'''		'''Figure 10-13. Result of using table and discrete transfers'''

-	[[Image:SVG ~~Essentials/I_10_tt208~~.png\|Result of using table and discrete transfers]]	+	[[Image:SVG Essentials_I_10_tt208.png\|Result of using table and discrete transfers]]
	</div>		</div>

Line 416:		Line 416:
	'''Figure 10-14. Comparsion of linearRGB and sRGB'''		'''Figure 10-14. Comparsion of linearRGB and sRGB'''

-	[[Image:SVG ~~Essentials/I_10_tt209~~.png\|Comparsion of linearRGB and sRGB]]	+	[[Image:SVG Essentials_I_10_tt209.png\|Comparsion of linearRGB and sRGB]]
	</div>		</div>

Line 455:		Line 455:
	'''Figure 10-15. Result of using feComposite operators'''		'''Figure 10-15. Result of using feComposite operators'''

-	[[Image:SVG ~~Essentials/I_10_tt217~~.png\|Result of using feComposite operators]]	+	[[Image:SVG Essentials_I_10_tt217.png\|Result of using feComposite operators]]
	</div>		</div>

Line 492:		Line 492:
	'''Figure 10-16. Result of feComposite in and out'''		'''Figure 10-16. Result of feComposite in and out'''

-	[[Image:SVG ~~Essentials/I_10_tt218~~.png\|Result of feComposite in and out]]	+	[[Image:SVG Essentials_I_10_tt218.png\|Result of feComposite in and out]]
	</div>		</div>

Line 524:		Line 524:
	'''Figure 10-17. Result of feBlend in and out'''		'''Figure 10-17. Result of feBlend in and out'''

-	[[Image:SVG ~~Essentials/I_10_tt219~~.png\|Result of feBlend in and out]]	+	[[Image:SVG Essentials_I_10_tt219.png\|Result of feBlend in and out]]
	</div>		</div>

Line 571:		Line 571:
	'''Figure 10-18. Result of feFlood and feTile elements'''		'''Figure 10-18. Result of feFlood and feTile elements'''

-	[[Image:SVG ~~Essentials/I_10_tt220~~.png\|Result of feFlood and	+	[[Image:SVG Essentials_I_10_tt220.png\|Result of feFlood and
	feTile elements]]		feTile elements]]
	</div>		</div>
Line 593:		Line 593:
	'''Figure 10-19. Relationship of x-, y,- and z-axes'''		'''Figure 10-19. Relationship of x-, y,- and z-axes'''

-	[[Image:SVG ~~Essentials/I_10_tt221~~.png\|Relationship of x-, y,- and z-axes]]	+	[[Image:SVG Essentials_I_10_tt221.png\|Relationship of x-, y,- and z-axes]]
	</div>		</div>

Line 675:		Line 675:
	'''Figure 10-20. Result of applying diffuse lighting filter'''		'''Figure 10-20. Result of applying diffuse lighting filter'''

-	[[Image:SVG ~~Essentials/I_10_tt223~~.png\|Result of applying diffuse lighting filter]]	+	[[Image:SVG Essentials_I_10_tt223.png\|Result of applying diffuse lighting filter]]
	</div>		</div>

Line 755:		Line 755:
	'''Figure 10-21. Result of applying specular lighting filter'''		'''Figure 10-21. Result of applying specular lighting filter'''

-	[[Image:SVG ~~Essentials/I_10_tt225~~.png\|Result of applying specular lighting filter]]	+	[[Image:SVG Essentials_I_10_tt225.png\|Result of applying specular lighting filter]]
	</div>		</div>

Line 804:		Line 804:
	'''Figure 10-22. Result of accessing background alpha'''		'''Figure 10-22. Result of accessing background alpha'''

-	[[Image:SVG ~~Essentials/I_10_tt226~~.png\|Result of accessing background alpha]]	+	[[Image:SVG Essentials_I_10_tt226.png\|Result of accessing background alpha]]
	</div>		</div>

Line 843:		Line 843:
	'''Figure 10-23. Result of using feMorphology'''		'''Figure 10-23. Result of using feMorphology'''

-	[[Image:SVG ~~Essentials/I_10_tt227~~.png\|Result of using feMorphology]]	+	[[Image:SVG Essentials_I_10_tt227.png\|Result of using feMorphology]]
	</div>		</div>

Line 892:		Line 892:
	'''Figure 10-24. Result of using feConvolveMatrix'''		'''Figure 10-24. Result of using feConvolveMatrix'''

-	[[Image:SVG ~~Essentials/I_10_tt231~~.png\|Result of using feConvolveMatrix]]	+	[[Image:SVG Essentials_I_10_tt231.png\|Result of using feConvolveMatrix]]
	</div>		</div>

Line 944:		Line 944:
	'''Figure 10-25. Result of using feDisplacementMap'''		'''Figure 10-25. Result of using feDisplacementMap'''

-	[[Image:SVG ~~Essentials/I_10_tt232~~.png\|Result of using feDisplacementMap]]	+	[[Image:SVG Essentials_I_10_tt232.png\|Result of using feDisplacementMap]]
	</div>		</div>

Line 972:		Line 972:
	'''Figure 10-26. Same graphic used as both inputs to feDisplacementMap'''		'''Figure 10-26. Same graphic used as both inputs to feDisplacementMap'''

-	[[Image:SVG ~~Essentials/I_10_tt233~~.png\|Same graphic used as both inputs to feDisplacementMap]]	+	[[Image:SVG Essentials_I_10_tt233.png\|Same graphic used as both inputs to feDisplacementMap]]
	</div>		</div>

Line 995:		Line 995:
	'''Figure 10-27. Various values of feTurbulence attributes'''		'''Figure 10-27. Various values of feTurbulence attributes'''

-	[[Image:SVG ~~Essentials/I_10_tt234~~.png\|Various values of feTurbulence attributes]]	+	[[Image:SVG Essentials_I_10_tt234.png\|Various values of feTurbulence attributes]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

2008-03-04T22:37:00Z

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
The preceding chapters have given you a basis for creating graphics that convey information with great precision and detail. If you're going on a spring picnic, you want a precise map. When you look in the newspaper for the graphics that describe the weather forecast, you want "just the facts."

If you're asked later to describe the day of the picnic, nobody wants a crisp recitation of meteorological statistics. Similarly, nobody wants to see a graphic of a spring flower composed of pure vectors; [[SVG Essentials/Filters#svgess-CHP-10-FIG-1|Figure 10-1]] fails totally to convey any warmth or charm.

<div id="svgess-CHP-10-FIG-1">
'''Figure 10-1. Flower composed of plain vectors'''

[[Image:SVG Essentials/I_10_tt189.png|Flower composed of plain vectors]]
</div>

Graphics are often designed to evoke feelings or moods as much as they are meant to convey information. Artists who work with bitmap graphics have many tools at their disposal to add such effects; they can produce blurred shadows, selectively thicken or thin lines, add textures to part of the drawing, make an object appear to be embossed or beveled, etc.

== How Filters Work ==

Although SVG is not a bitmap description language, it still lets you use some of these same tools. When an SVG viewer program processes a graphic object, it will render the object to some bitmapped output device; at some point the program will convert the object's description into the appropriate set of pixels that appear on the output device. Now let's say that you use the SVG <tt><filter></tt> element to specify a set of operations that display an object with a blurred shadow offset slightly to the side, and attach that filter to an object:

<filter id="drop-shadow">

</filter>

<g id="spring-flower"
'''style="filter: url(#drop-shadow);"'''/>

</g>

Because the flower uses a filter in its presentation style, SVG will not render the flower directly to the final graphic. Instead, SVG will render the flower's pixels into a temporary bitmap. The operations specified by the filter will be applied to that temporary area and their result will be rendered into the final graphic.

== Creating a Drop Shadow ==

In [[SVG Essentials/Document Structure|Chapter 4]], in [[SVG Essentials/Document Structure#The image Element|Section 4.3.5]], we created a drop shadow by offsetting a gray ellipse underneath a colored ellipse. It worked, but it wasn't elegant. Let's investigate a way to create a better-looking drop shadow with a filter.

=== Establishing the Filter's Bounds ===

The <tt><filter></tt> element has attributes that describe the clipping region for a filter. You specify an <tt>x</tt>, <tt>y</tt>, <tt>width</tt>, and <tt>height</tt> in terms of the percentage of the filtered object's bounding box. (That is the default.) Any portion of the resulting output that's outside the bounds will not be displayed. If you are intending to apply a filter to many objects, you may want to omit these attributes altogether and take the default values of <tt>x</tt> equal to -10%, <tt>y</tt> equal to -10%, <tt>width</tt> equal to 120%, and <tt>height</tt> equal to 120%. This gives extra space for filters — such as the drop shadow that we're constructing — that produce output larger than their input.

These attributes are in terms of the filtered object's bounding box; specifically, <tt>filterUnits</tt> has a value of <tt>objectBoundingBox</tt> by default. If you wish to specify boundaries in user units, then set the attribute's value to <tt>userSpaceOnUse</tt>.

=== Using feGaussianBlur for a Drop Shadow ===

Between the beginning and ending <tt><filter></tt> tags are the filter primitives that perform the operations you desire. Each primitive has one or more inputs, and exactly one output. An input can be the original graphic, specified as <tt>SourceGraphic</tt>, the alpha (opaqueness) channel of the graphic, specified as <tt>SourceAlpha</tt>, or the output of a previous filtering primitive. You will probably use the alpha source more often, since it avoids the interactions of alpha and color, as described in [[SVG Essentials/Clipping and Masking|Chapter 9]], in [[SVG Essentials/Clipping and Masking#Masking|Section 9.2]].

[[SVG Essentials/Filters#svgess-CHP-10-EX-1|Example 10-1]] is our first attempt to produce a drop shadow on the flower, using the <tt><feGaussianBlur></tt> filter primitive. We specify <tt>SourceAlpha</tt> as its input (the <tt>in</tt> attribute), and the amount of blur with the <tt>stdDeviation</tt> attribute. The larger this number, the greater the blur. If you give two numbers separated by whitespace as the value for <tt>stdDeviation</tt>, the first number is taken as the blur in the ''x''-direction and the second as the blur in the ''y''-direction.

<div id="svgess-CHP-10-EX-1">
'''Example 10-1. First attempt to produce a drop shadow'''

<defs>

<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
</filter>

</defs>
<g id="flower" filter="url(#drop-shadow)">

</g>
</div>

[[SVG Essentials/Filters#svgess-CHP-10-FIG-2|Figure 10-2]] shows the result, which is probably not what you thought it would be.

<div id="svgess-CHP-10-FIG-2">
'''Figure 10-2. Result of first attempt at a drop shadow'''

[[Image:SVG Essentials/I_10_tt191.png|Result of first attempt at a drop shadow]]
</div>

Don't be surprised; remember, the filter returns the output, which is a blurred alpha channel, ''instead'' of the original source graphic. We could get the effect we want by putting the flower within the <tt><defs></tt> section of the document and changing our SVG to read:

<use xlink:href="#flower" filter="url(#drop-shadow)"
transform="translate(4, 4)"/>
<use xlink:href="#flower"/>

However, that would require SVG to execute all the elements that make up the flower twice. Instead, we will add more filter primitives, so that all the work can be handled during rendering.

=== Storing, Chaining, and Merging Filter Results ===

[[SVG Essentials/Filters#svgess-CHP-10-EX-2|Example 10-2]] is the updated filter.

<div id="svgess-CHP-10-EX-2">
'''Example 10-2. Improved drop shadow filter'''

<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" '''result="blur"'''/> '''[1]'''
<feOffset '''in="blur"''' dx="4" dy="4" '''result="offsetBlur"'''/> '''[2]'''
<feMerge> '''[3]'''
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</div>

<tt>'''[1]'''</tt> The <tt>result</tt> attribute specifies that the result of this primitive can be referenced later by the name <tt>blur</tt>. This isn't like an XML <tt>id</tt>; the name you give is a local name that's only valid for the duration of the primitives contained in the current <tt><filter></tt>.

<tt>'''[2]'''</tt> The <tt><feOffset></tt> primitive takes its input, in this case the <tt>blur</tt> result from the Gaussian blur, offsets it by the specified <tt>dx</tt> and <tt>dy</tt> values, and stores the resulting bitmap under the name <tt>offsetBlur</tt>.

<tt>'''[3]'''</tt> The <tt><feMerge></tt> primitive encloses a list of <tt><feMergeNode></tt> elements, each of which specifies an input. The inputs are stacked one on top of another in the order that they appear. In this case, we want the <tt>offsetBlur</tt> below the original <tt>sourceGraphic</tt>.

We now refer to this improved drop shadow filter sequence when drawing the flower, producing a surprisingly pleasant image in [[SVG Essentials/Filters#svgess-CHP-10-FIG-3|Figure 10-3]].

<g id="flower" filter="url(#drop-shadow)">

</g>

<div id="svgess-CHP-10-FIG-3">
'''Figure 10-3. Result of improved drop shadow'''

[[Image:SVG Essentials/I_10_tt194.png|Result of improved drop shadow]]
</div>

<div class="note">
'''Note'''

When you first start working with filters, I strongly recommend that you do things in stages, testing filters one at a time. I created large numbers of stunningly ugly results during botched attempts to discover how a filter really works. You probably will, too. We'll just keep it as our little secret.

Similarly, when you first learn about filters, you will be tempted to apply as many of them as possible to a drawing, just to see what will happen. Since your purpose is experimentation, go ahead. Once you finish experimenting and begin production work, the purpose of the filter changes. Filters should support and enhance your message, not overwhelm it. Judicious use of one or two filters is a buoy; a flotilla of filters almost always sinks the message.
</div>

== Creating a Glowing Shadow ==

The drop shadow works well on the flower, but looks totally unimpressive when applied to text, as we see in [[SVG Essentials/Filters#svgess-CHP-10-FIG-4|Figure 10-4]].

<div id="svgess-CHP-10-FIG-4">
'''Figure 10-4. Drop shadow applied to text'''

[[Image:SVG Essentials/I_10_tt195.png|Drop shadow applied to text]]
</div>

Instead, we'd like a glowing turquoise area to surround the text, and we can do this with the <tt><feColorMatrix></tt> primitive to change black to a different color.

=== The feColorMatrix Element ===

The <tt><feColorMatrix></tt> element allows you to change color values in a very generalized way. The sequence of primitives used to create a glowing turquoise shadow is shown in [[SVG Essentials/Filters#svgess-CHP-10-EX-3|Example 10-3]].

<div id="svgess-CHP-10-EX-3">
'''Example 10-3. Glow filter'''

<filter id="glow">
<feColorMatrix type="matrix" '''[1]'''
values=
"0 0 0 0 0
0 0 0 0.9 0
0 0 0 0.9 0
0 0 0 1 0"/>
<feGaussianBlur stdDeviation="2.5" '''[2]'''
result="coloredBlur"/> '''[3]'''
<feMerge> '''[4]'''
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</div>

<tt>'''[1]'''</tt> The <tt><feColorMatrix></tt> is a very versatile primitive, allowing you to modify any of the color or alpha values of a pixel. When the <tt>type</tt> attribute equals <tt>matrix</tt>, you must set the <tt>value</tt> to a series of twenty numbers describing the transformation.

To set up a transformation that adds color to the alpha values, set up your matrix values as follows:

values=
"0 0 0 ''red'' 0
0 0 0 ''green'' 0
0 0 0 ''blue'' 0
0 0 0 1 0"

where the red, green, and blue values are decimal numbers which usually range from zero to 1. In this example, we've set the red to zero, and the green and blue values to 0.9, which will produce a bright cyan color.

You'll note that we didn't specify an <tt>in</tt> attribute for the input to this primitive; the default is to use the <tt>SourceGraphic</tt>. We also didn't put a <tt>result</tt> attribute into this primitive. This means that the color matrix operation's output is available only as the implicit input to the next filter primitive. If you use this shortcut, then the next filter primitive must ''not'' have an <tt>in</tt> attribute.

<tt>'''[2]'''</tt> Now that we have a cyan-colored source, we use Gaussian blur to spread it out.

<tt>'''[3]'''</tt> The resulting cyan-colored blur is stored for future reference as <tt>coloredBlur</tt>.

<tt>'''[4]'''</tt> As in the previous example, we use <tt><feMerge></tt> to output the glow underneath the object in question.

With these two filters, we can create the new, improved [[SVG Essentials/Filters#svgess-CHP-10-FIG-5|Figure 10-5]] with SVG like this:

<g id="flower" style="filter: url(#drop-shadow);">

</g>
<text x="120" y="50"
style="filter: url(#glow); fill: #003333; font-size:18;>
Spring <tspan x="120" y="70">Flower</tspan>
</text>

<div id="svgess-CHP-10-FIG-5">
'''Figure 10-5. Drop shadow and glowing text'''

[[Image:SVG Essentials/I_10_tt198.png|Drop shadow and glowing text]]
</div>

=== More About the feColorMatrix Element ===

We started with the most general kind of color matrix, where you get to specify any values you wish. There are three other values for the <tt>type</tt> attribute. Each of these "built-in" color matrices accomplishes a particular visual task and has its own way of specifying <tt>values</tt>.

<dl>
<dt><tt>hueRotate</tt>
<dd>The <tt>values</tt> is a single number that tells how many degrees the color values should be rotated. The mathematics used to accomplish this are very similar to those used in the <tt>rotate</tt> transformation as described in [[SVG Essentials/Transforming the Coordinate System#The rotate Transformation|Section 5.5]] in [[SVG Essentials/Transforming the Coordinate System|Chapter 5]]. The relation between rotation and resulting color is not at all obvious, as shown in [[SVG Essentials/Filters#svgess-CHP-10-FIG-6|Figure 10-6]].

<div id="svgess-CHP-10-FIG-6">
'''Figure 10-6. Result of hueRotate on fully saturated colors'''

[[Image:SVG Essentials/I_10_tt199.png|Result of hueRotate on fully saturated colors]]
</div>
</dl>
<dl>
<dt><tt>saturate</tt>
<dd>The <tt>values</tt> attribute specifies a single number in the range zero to one. The smaller the number, the more "washed out" the colors will be, as you see in [[SVG Essentials/Filters#svgess-CHP-10-FIG-7|Figure 10-7]].

<div id="svgess-CHP-10-FIG-7">
'''Figure 10-7. Result of saturate on primary colors'''

[[Image:SVG Essentials/I_10_tt200.png|Result of saturate on primary colors]]
</div>
</dl>
<dl>
<dt><tt>luminanceToAlpha</tt>
<dd>This filter creates an alpha channel based upon a color's luminance. The luminance is the inherent "brightness" of a color, as described in [[SVG Essentials/Clipping and Masking#Masking|Section 9.2]] in [[SVG Essentials/Clipping and Masking|Chapter 9]]. In [[SVG Essentials/Filters#svgess-CHP-10-FIG-8|Figure 10-8]], the luminance of the colored squares is used as an alpha channel for solid black squares. The lighter a color, the less the transparency it confers upon the filtered object. The <tt>values</tt> attribute is ignored for this <tt>type</tt>.

<div id="svgess-CHP-10-FIG-8">
'''Figure 10-8. Result of luminanceToAlpha'''

[[Image:SVG Essentials/I_10_tt201.png|Result of luminanceToAlpha]]
</div>
</dl>

== The feImage Filter ==

Up to this point, we've used only the original graphic or its alpha channel as input to a filter. SVG's <tt><feImage></tt> element lets you use any JPG, PNG, or SVG file; or an SVG element with an <tt>id</tt> attribute as input to a filter. In [[SVG Essentials/Filters#svgess-CHP-10-EX-4|Example 10-4]], we import a picture of the sky with a cloud in it to use as a background in the picture of the flower.

<div id="svgess-CHP-10-EX-4">
'''Example 10-4. Using the feImage element'''

<defs>
<filter id="sky-shadow" filterUnits="objectBoundingBox">
'''<feImage xlink:href="sky.jpg" result="sky"/>'''
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feMerge>
'''<feMergeNode in="sky"/>'''
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>

<g id="flower" style="filter: url(#sky-shadow)">

</g>


<image xlink:href="sky.jpg" x="170" y="10"
width="122" height="104"/>
</div>

Since we're referencing a JPG image, it stretches to fill the bounding box of the filtered object. [[SVG Essentials/Filters#svgess-CHP-10-FIG-9|Figure 10-9]] shows the result, with the original picture of the sky shown at right at its true size.

<div id="svgess-CHP-10-FIG-9">
'''Figure 10-9. Result of feImage'''

[[Image:SVG Essentials/I_10_tt202.png|Result of feImage]]
</div>

== The feComponentTransfer Filter ==

The problem with the background is that it is too dark. Using <tt>saturate</tt> isn't the answer; it raises or lowers all the color levels. What we need to do is increase the level of green and red more than the blue level, and the <tt><feComponentTransfer></tt> element lets us do just that.

You adjust the levels of red, green, blue, and alpha by placing a <tt><feFuncR></tt>, <tt><feFuncG></tt>, <tt><feFuncB></tt>, and <tt><feFuncA></tt> element inside the <tt><feComponentTransfer></tt>. Each of these sub-elements may independently specify a <tt>type</tt> attribute that tells how that particular channel is to be modified.

To simulate the effect of a brightness control, you specify the <tt>linear</tt> function, which places the current color value <tt>C</tt> into the formula: <tt>''slope''</tt> <tt> * C + </tt> <tt>''intercept''</tt>. The <tt>''intercept''</tt> provides a "base value" for the result; the <tt>''slope''</tt> is a simple scaling factor. [[SVG Essentials/Filters#svgess-CHP-10-EX-5|Example 10-5]] uses a filter that adds a brightened sky to the flower with the drop shadow. Note that the red and green channels are adjusted differently than the blue channel. This dramatically brightens the sky in [[SVG Essentials/Filters#svgess-CHP-10-FIG-10|Figure 10-10]].

<div id="svgess-CHP-10-EX-5">
'''Example 10-5. Changing brightness with feComponentTransfer'''

<filter id="brightness-shadow" filterUnits="objectBoundingBox">
<feImage xlink:href="sky.jpg" result="sky"/>
'''<feComponentTransfer in="sky" result="sky">'''
''' <feFuncB type="linear" slope="3" intercept="0"/>'''
''' <feFuncR type="linear" slope="1.5" intercept="0.2"/>'''
''' <feFuncG type="linear" slope="1.5" intercept="0.2"/>'''
''' </feComponentTransfer>'''
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feMerge>
<feMergeNode in="sky"/>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</div>

<div id="svgess-CHP-10-FIG-10">
'''Figure 10-10. Result of linear component transfer'''

[[Image:SVG Essentials/I_10_tt203.png|Result of linear component transfer]]
</div>

A simple linear adjustment will add and multiply the same amount to every color value within a channel. This is not the case with the <tt>gamma</tt> function, which places the current color value <tt>C</tt> into the formula: <tt>''amplitude''</tt> <tt> * C</tt> <sup><tt>''exponent''</tt></sup> <tt> + </tt> <tt>''offset''</tt>. The <tt>''offset''</tt> provides a "base value" for the result; the <tt>''amplitude''</tt> is a simple scaling factor, and <tt>''exponent''</tt> makes the result a curved line rather than a straight line. Since the color value is always between zero and one, the larger your exponent, the ''smaller'' the modified value will be. [[SVG Essentials/Filters#svgess-CHP-10-FIG-11|Figure 10-11]] shows the curves generated with exponent values of 0.6 (the solid line) and 0.3 (the dashed line). Looking at the dashed line, you can see that a low original color value such as 0.1 will be boosted to 0.5, a 400% increase. An original value of 0.5, on the other hand, will increase only 80% to 0.9.

<div id="svgess-CHP-10-FIG-11">
'''Figure 10-11. Gamma curve functions'''

[[Image:SVG Essentials/I_10_tt204.png|Gamma curve functions]]
</div>

When you specify a gamma filter, you set the <tt>amplitude</tt>, <tt>exponent</tt>, and <tt>offset</tt> attributes to correspond to the values in the preceding formula. [[SVG Essentials/Filters#svgess-CHP-10-EX-6|Example 10-6]] uses gamma correction to adjust the sky. In this particular case, the differences between [[SVG Essentials/Filters#svgess-CHP-10-FIG-12|Figure 10-12]] and [[SVG Essentials/Filters#svgess-CHP-10-FIG-10|Figure 10-10]] are minor, but there are some images which can be improved much more by one method than by the other.

<div id="svgess-CHP-10-EX-6">
'''Example 10-6. Gamma adjustment with feComponentTransfer'''

<feImage xlink:href="sky.jpg" result="sky"/>
<feComponentTransfer in="sky" result="sky">
<feFuncB type="gamma"
amplitude="1" exponent="0.2" offset="0"/>
<feFuncR type="gamma"
amplitude="1" exponent="0.707" offset="0"/>
<feFuncG type="gamma"
amplitude="1" exponent="0.707" offset="0"/>
</feComponentTransfer>
</div>

<div id="svgess-CHP-10-FIG-12">
'''Figure 10-12. Result of using gamma correction'''

[[Image:SVG Essentials/I_10_tt205.png|Result of using gamma correction]]
</div>

<div class="note">
'''Note'''

The astute reader (that's you) may have observed that both linear and gamma functions can produce color values greater than 1.0. The SVG specification says that this is not an error; after each filter primitive, the SVG processor will clamp the values to a valid range. Thus, any value greater than 1.0 is reduced to 1.0 and any value less than zero is set to zero.
</div>

<tt><feComponentTransfer></tt> has other options for the <tt>type</tt> attribute. Please note that you may mix and match any of these; you can gamma correct the red values while brightening the green values with a linear function.

;<tt>identity</tt>
: A "do-nothing" function. This lets you explicitly state that a color channel should remain unaffected. (This is the default if you don't provide an <tt><feFunc</tt> <tt>''X''</tt> <tt>></tt> element for a particular channel.)

<dl>
<dt><tt>table</tt>
<dd>Lets you divide the color values into a series of equal intervals, each of which will be proportionately scaled. Consider the following remapping, which doubles the value of the lowest quarter of the color range, squeezes the next quarter into a range of one tenth, keeps the third quarter in exact proportion, then squeezes the last quarter of the values into the remaining 15% of the color range:

{| border="1"
|-
! Original value range !! Modified value range
|-
| 0.00 -- 0.25 || 0.00 -- 0.50
|-
| 0.25 -- 0.50 || 0.50 -- 0.60
|-
| 0.50 -- 0.75 || 0.60 -- 0.85
|-
| 0.75 -- 1.00 || 0.85 -- 0.100
|}

You would specify this mapping for the green channel by listing the endpoints of the remapped range in the <tt>tableValues</tt> attribute.

<feFuncG type="table"
tableValues ="0.0, 0.5, 0.6, 0.85, 1.0"/>

If you are dividing the input spectrum into <tt>''n''</tt> different sections, you must provide <tt>''n''</tt>+1 items in <tt>tableValues</tt>, separated by whitespace or commas.
</dl>
<dl>
<dt><tt>discrete</tt>
<dd>Lets you divide the color values into a series of equal intervals, each of which will be mapped to a single discrete color value. Consider the following remapping, which maps the value of the lowest quarter of the color range to 0.125, sets the next quarter to 0.375, the third quarter to 0.625, and remaining quarter to 0.875. (That is, each quarter of the range is mapped to its center point.)

{| border="1"
|-
! Original value range !! Modified value
|-
| 0.00 — 0.25 || 0.125
|-
| 0.25 — 0.50 || 0.375
|-
| 0.50 — 0.75 || 0.625
|-
| 0.75 — 1.00 || 0.875
|}

You would specify this mapping for the green channel by listing the discrete values, separated by commas or whitespace, in the <tt>tableValues</tt> attribute.

<feFuncG type="discrete"
tableValues ="0.125 0.375 0.625 0.875"/>

Dividing the input channel into <tt>''n''</tt> sections requires <tt>''n''</tt> entries in the <tt>tableValues</tt> attribute. ''Exception'': If you want to remap all the input values to a single output value, you must place that entry into <tt>tableValues</tt> twice; thus, to set any input value of the blue channel to 0.5, you would say: <tt><feFuncB type="discrete" tableValues="0.5 0.5"/></tt>.
</dl>

<div class="note">
'''Note'''

If you want to invert the range of color values for a channel (that is, change increasing values from a minimum to maximum into decreasing values from the maximum to the minimum), use this:

<feFunc''X'' type="table"
tableValues="''maximum''
''minimum''"/>
</div>

[[SVG Essentials/Filters#svgess-CHP-10-FIG-13|Figure 10-13]] shows the results of using discrete and table transfers as well as inversion via a table transfer.

<div id="svgess-CHP-10-FIG-13">
'''Figure 10-13. Result of using table and discrete transfers'''

[[Image:SVG Essentials/I_10_tt208.png|Result of using table and discrete transfers]]
</div>

<div class="warning">
'''Warning'''

Ordinarily, the values for red, green, or blue run in a straight line from zero to one, with zero being none of the color and one being 100% of the color. This is called a linear color space. However, when SVG calculates the color values between gradient stops (as described in [[SVG Essentials/Patterns and Gradients|Chapter 7]], in [[SVG Essentials/Patterns and Gradients#Gradients|Section 7.2]]), it uses a special way of representing color such that the values do not follow a straight line from zero to one. This representation is called the standard RGB or ''sRGB'' color space, and its use can make gradients much more natural-looking. [[SVG Essentials/Filters#svgess-CHP-10-FIG-14|Figure 10-14]] shows a comparison. The first gradient goes from black to green, the second from red to green to blue, and the third from black to white.

By default, filter arithmetic calculates any interpolated ("in-between") values in the linear RGB space, so if you apply a filter to an object that has been filled with a gradient, you will get results that aren't at all what you expect. In order to get the correct result, you must tell the filter to do its calculations in sRGB space by adding a <tt>color-interpolation-filters="sRGB"</tt> attribute to your <tt><filter></tt> element. Alternatively, you may leave the filter alone and apply <tt>color-interpolation="linearRGB"</tt> to the <tt><gradient></tt> element, so that it uses the same color space as the default for filters.
</div>

<div id="svgess-CHP-10-FIG-14">
'''Figure 10-14. Comparsion of linearRGB and sRGB'''

[[Image:SVG Essentials/I_10_tt209.png|Comparsion of linearRGB and sRGB]]
</div>

== The feComposite Filter ==

So far we have combined the results of filters by using <tt><feMerge></tt> to layer the intermediate results one over another. We will now investigate the much more general <tt><feComposite></tt> element. This element takes two inputs, specified with the <tt>in</tt> and <tt>in2</tt> attributes, and an <tt>operator</tt> that tells how the two are to be combined. In the following explanation, we'll presume that you've specified <tt>in="A"</tt> and <tt>in2="B"</tt>.

;<tt><feComposite operator="'''over'''" in="A" in2="B"/></tt>
: Produces the result of layering <tt>A</tt> over <tt>B</tt>, exactly as <tt><feMergeNode></tt> does. In fact, <tt><feMergeNode></tt> is really just a convenient shortcut for a <tt><feComposite></tt> element that specifies an <tt>over</tt> operation.
;<tt><feComposite operator="'''in'''" in="A" in2="B"/></tt>
: The result is the part of <tt>A</tt> that is within the boundaries of <tt>B</tt>. Don't confuse the name of this attribute value with the <tt>in</tt> attribute.
;<tt><feComposite operator="'''out'''" in="A" in2="B"/></tt>
: The result is the part of <tt>A</tt> that is outside the boundaries of <tt>B</tt>.
;<tt><feComposite operator="'''atop'''" in="A" in2="B"/></tt>
: The result is the part of <tt>A</tt> that is inside B, as well as the part of <tt>B</tt> outside A. To quote the article in which these operators were first defined: "...''paper'' atop ''table'' includes ''paper'' where it is on top of ''table'', and ''table'' otherwise; area beyond the edge of the table is out of the picture."<ref>"Compositing Digital Images," T. Porter, T. Duff, SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.</ref>
;<tt><feComposite operator="'''xor'''" in="A" in2="B"/></tt>
: The result is the part of <tt>A</tt> that is outside <tt>B</tt> together with the part of <tt>B</tt> that is outside <tt>A</tt>.

<dl>
<dt><tt><feComposite in="A" in2="B" operator="'''arithmetic'''" .../></tt>
<dd>The ultimate in flexibility. You provide four coefficients, <tt>k1</tt>, <tt>k2</tt>, <tt>k3</tt>, and <tt>k4</tt>. The result for each pixel is calculated as:

k1 * A * B + k2 * A + k3 * B + k4

<div class="note">
'''Note'''

The arithmetic operator is useful for doing a "dissolve" effect. If you want to have a resulting image that is <tt>''a''</tt>% of image A and <tt>''b''</tt>% of image B, set <tt>k1</tt> and <tt>k4</tt> to zero, <tt>k2</tt> to <tt>''a''</tt>/100, and <tt>k3</tt> to <tt>''b''</tt>/100. So, to make a blend with 30% of <tt>A</tt> and 70% of <tt>B</tt>, you'd use this:

<feComposite in="A" in2="B" result="combined"
k1="0" k2="0.30" k3="0.70" k4="0"/>
</div>
</dl>

[[SVG Essentials/Filters#svgess-CHP-10-FIG-15|Figure 10-15]] shows the combinations that we've described; the arithmetic blend is 50% of A and 50% of B.

<div id="svgess-CHP-10-FIG-15">
'''Figure 10-15. Result of using feComposite operators'''

[[Image:SVG Essentials/I_10_tt217.png|Result of using feComposite operators]]
</div>

[[SVG Essentials/Filters#svgess-CHP-10-EX-7|Example 10-7]] uses the <tt>in</tt> and <tt>out</tt> operators to do "cut-outs." The drop shadow has been eliminated from this example to produce a more visually pleasing result in [[SVG Essentials/Filters#svgess-CHP-10-FIG-16|Figure 10-16]].

<div id="svgess-CHP-10-EX-7">
'''Example 10-7. Use of feComposite in and out'''

<defs>
<filter id="sky-in" filterUnits="objectBoundingBox">
<feImage xlink:href="sky.jpg" result="sky"/>
<feComposite in="sky" in2="SourceGraphic"
operator="in"/>
</filter>

<filter id="sky-out" filterUnits="objectBoundingBox">
<feImage xlink:href="sky.jpg" result="sky"/>
<feComposite in="sky" in2="SourceGraphic"
operator="out"/>
</filter>

<g id="flower">

</g>
</defs>

<use xlink:href="#flower" transform="translate(10,10)"
style="filter: url(#sky-in);"/>

<use xlink:href="#flower" transform="translate(170,10)"
style="filter: url(#sky-out);"/>

</div>

<div id="svgess-CHP-10-FIG-16">
'''Figure 10-16. Result of feComposite in and out'''

[[Image:SVG Essentials/I_10_tt218.png|Result of feComposite in and out]]
</div>

== The feBlend Filter ==

But wait, there's more! Yes, filters provide yet another way to combine images. The <tt><feBlend></tt> element requires two inputs, specified with the <tt>in</tt> and <tt>in2</tt> attributes, and a <tt>mode</tt> that tells how the inputs are to be blended. The possible values are: <tt>normal</tt>, <tt>multiply</tt>, <tt>screen</tt>, <tt>lighten</tt>, and <tt>darken</tt>. Given opaque inputs <tt><feBlend in="A" in2="B" mode="</tt> <tt>''m''</tt> <tt>"/></tt>, the following table shows the color of the resulting pixel for each mode:

{| border="1"
|-
! Mode !! Effect
|-
| <tt>normal</tt> || B only; this is the same as the <tt>over</tt> operator in <tt><feMerge></tt>.
|-
| <tt>multiply</tt> || As the name suggests, the resulting color value is the product of <tt>A</tt>'s color value and <tt>B</tt>'s color value. This tends to dramatically weaken light colors.
|-
| <tt>screen</tt> || Adds the color values together, then subtracts their product. This tends to strengthen light colors more than dark colors.
|-
| <tt>darken</tt> || Takes the minimum of A and B. This is the darker color, hence the name.
|-
| <tt>lighten</tt> || Takes the maximum of A and B. This is the lighter color, hence the name.
|}

Note that the appropriate calculation is done independently for each of the red, green, and blue values. So, if you were to darken a pure red square with RGB values of (100%, 0%, 0%) and a gray square with RGB values of (50%, 50%, 50%), the resulting color would be (50%, 0%, 0%). If the inputs are not opaque, then all the modes except for <tt>screen</tt> factor in the transparencies when making the calculations.

Finally, once the color value is calculated, the opacity of the result is determined by the formula <tt>1 - (1 -</tt> <tt>''opacity of A''</tt> <tt>) * (1 -</tt> <tt>''opacity of B''</tt> <tt>)</tt>. Using this formula, two opaque items will still be opaque; two items that are 50% opaque will combine to one that is 75% opaque.

[[SVG Essentials/Filters#svgess-CHP-10-FIG-17|Figure 10-17]] shows the result of blending an opaque solid gray (50%, 50%, 50%) bar with opaque and 50% opaque color squares that have RGB values of black (#000), yellow (#ff0), red (#f00), medium-bright green (#0c0), and dark blue (#009).

<div id="svgess-CHP-10-FIG-17">
'''Figure 10-17. Result of feBlend in and out'''

[[Image:SVG Essentials/I_10_tt219.png|Result of feBlend in and out]]
</div>

== The feFlood and feTile Filters ==

The <tt><feFlood></tt> and <tt><feTile></tt> elements are "utility filters." Much like <tt><feOffset></tt>, they allow you to carry out certain common operations within a series of filter primitives rather than having to create extra SVG elements in your main graphic.

<tt><feFlood></tt> provides a solid colored area for use in compositing or merging. You provide the <tt>flood-fill-color</tt> and <tt>flood-fill-opacity</tt>, and the filter does the rest.

<tt><feTile></tt> takes its input and tiles it horizontally and vertically to fill the area that is specified in the filter. The size of the tile itself is specified by the <tt><feImage></tt> element used as the input to <tt><feTile></tt>.

[[SVG Essentials/Filters#svgess-CHP-10-EX-8|Example 10-8]] uses <tt><feComposite></tt> to cut out the flooded and tiled area to the shape of a flower. The image used as a tile is shown for reference at the upper right of [[SVG Essentials/Filters#svgess-CHP-10-FIG-18|Figure 10-18]].

<div id="svgess-CHP-10-EX-8">
'''Example 10-8. Example of feFlood and feTile'''

<defs>
<filter id="flood-filter" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="#993300" flood-opacity="0.8" result="tint"/>
<feComposite in="tint" in2="SourceGraphic"
operator="in"/>
</filter>

<filter id="tile-filter" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="cloth.jpg" width="32" height="32"
result="cloth"/>
<feTile in="cloth" result="cloth"/>
<feComposite in="cloth" in2="SourceGraphic"
operator="in"/>
</filter>

<g id="flower">

</g>

</defs>
<use xlink:href="#flower" transform="translate(0, 0)"
style="filter: url(#flood-filter);"/>
<use xlink:href="#flower" transform="translate(110,0)"
style="filter: url(#tile-filter);"/>
<image xlink:href="cloth.jpg" x="220" y="10"
width="32" height="32"/>
</div>

<div id="svgess-CHP-10-FIG-18">
'''Figure 10-18. Result of feFlood and feTile elements'''

[[Image:SVG Essentials/I_10_tt220.png|Result of feFlood and
feTile elements]]
</div>

== Lighting Effects ==

If you draw a bright green circle with SVG, it looks like a refugee from a traffic signal, glowing by its own light and otherwise lying flat on the screen. If you look at a circle cut out of green construction paper, it looks more "real" because it is lit from an outside source and has some texture. A circle cut from green plastic not only is lit from outside, it also has reflected highlights. We call light from an outside source diffuse lighting, and the highlights that reflect off a surface specular lighting, from the Latin ''speculum'', meaning ''mirror''.

In order to achieve these effects, you must specify:

* The type of lighting you want (<tt><feDiffuseLighting></tt> or <tt><feSpecularLighting></tt>)
* The object you want to light
* The color of light you are using
* The type of light source you want (<tt><fePointLight></tt>, <tt><feDistantLight></tt>, or <tt><feSpotLight></tt>) and its location

You specify the location of a light source in three dimensions; this means you will need a ''z''-value in addition to ''x''- and ''y''-values. The relationship of the ''x''-, ''y-'', and ''z''-axes is shown in [[SVG Essentials/Filters#svgess-CHP-10-FIG-19|Figure 10-19]]; the positive ''z'' axis is "coming out of the screen" and pointing at you.

Both these lighting effects use the alpha channel of the object they are illuminating as a bump map; higher alpha values are presumed to be "raised" above the surface of the object.

<div id="svgess-CHP-10-FIG-19">
'''Figure 10-19. Relationship of x-, y,- and z-axes'''

[[Image:SVG Essentials/I_10_tt221.png|Relationship of x-, y,- and z-axes]]
</div>

=== Diffuse Lighting ===

The best way to show how the <tt><feDiffuseLighting></tt> element works is to jump right into [[SVG Essentials/Filters#svgess-CHP-10-EX-9|Example 10-9]]. We will shine a pale yellow light on a green circle, textured with the curve pattern that we used in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-1|Example 7-1]].

<div id="svgess-CHP-10-EX-9">
'''Example 10-9. Diffuse lighting with a point light source'''

<path id="curve" d="M 0 0 Q 5 20 10 10 T 20 20" '''[1]'''
style="stroke: black; fill: none;"/>

<circle id="green-light" cx="50" cy="50" r="50" '''[2]'''
style="fill: #060;"/>

<filter id="diff-light" color-interpolation-filters="sRGB" '''[3]'''
x="0" y="0" width="100%" height="100%">

<feImage xlink:href="#curve" result="tile" '''[4]'''
width="20" height="20"/>

<feTile in="tile" result="tile"/>

<feColorMatrix type="luminanceToAlpha" in="tile" '''[5]'''
result="alphaTile"/>

<feDiffuseLighting in="alphaTile" '''[6]'''
lighting-color="#ffffcc"
surfaceScale="1" '''[7]'''
diffuseConstant="0.5" '''[8]'''
result="diffuseOutput"> '''[9]'''
<fePointLight x="0" y="50" z="50"/> '''[10]'''
</feDiffuseLighting> '''[11]'''

<feComposite in="diffuseOutput" in2="SourceGraphic" '''[12]'''
operator="in" result="diffuseOutput"/>

<feBlend in="diffuseOutput" in2="SourceGraphic" '''[13]'''
mode="screen"/>
</filter>
</div>

<tt>'''[1]'''</tt> Define the curve that will be used as the tile.

<tt>'''[2]'''</tt> Define the object that we want to illuminate.

<tt>'''[3]'''</tt> Set the color interpolation method and the boundaries for the filter.

<tt>'''[4]'''</tt> Tile the area of the filter with the <tt>curve</tt> image. This will become our bump map...

<tt>'''[5]'''</tt> ...so convert it to a pure alpha map, named <tt>alphaTile</tt>.

<tt>'''[6]'''</tt> This tiled area is the input to the <tt><feDiffuseLighting></tt> element, which we will illuminate with a pale yellow light,as specified by the <tt>lighting-color</tt> attribute.

<tt>'''[7]'''</tt> The <tt>surfaceScale</tt> attribute tells the height of the surface for an alpha value of 1. (Specifically, it's the factor by which the alpha value is multiplied.)

<tt>'''[8]'''</tt> <tt>diffuseConstant</tt> is a multiplicative factor that is used in determining the final RGB values of a pixel. It must have a value greater than or equal to zero; its default value is one. The brighter your <tt>lighting-color</tt>, the smaller this number should be. Unless you like having your picture washed out.

<tt>'''[9]'''</tt> The result of this filter will be named <tt>diffuseOutput</tt>.

<tt>'''[10]'''</tt> In this example, we are using a point light source, which means a source that radiates light in all directions. We will position it at the left center of the area we wish to illuminate, and set it 50 units in front of the screen. The farther you set it away from the object, the more evenly the object is illuminated. In this example, we've moved the light up close and personal to get the greatest possible effect.

<tt>'''[11]'''</tt> The end of the <tt><feDiffuseLighting></tt> element.

<div class="note">
'''Note'''

The input to this filter was an alpha channel; the output is a ''totally opaque'' RGB bitmap; its alpha channel is equal to 1.0 at every point.
</div>

<tt>'''[12]'''</tt> We use <tt><feComposite></tt>'s <tt>in</tt> operator to clip the filter's output to the boundaries of the source graphic (the circle).

<tt>'''[13]'''</tt> Finally, we use <tt><feBlend></tt> in <tt>screen</tt> mode, which tends to lighten the input, to create the final image.

Once this is all defined, the following statement activates the filter on the desired object to produce [[SVG Essentials/Filters#svgess-CHP-10-FIG-20|Figure 10-20]]:

<use xlink:href="#green-light" style="filter: url(#diff-light);"/>

<div id="svgess-CHP-10-FIG-20">
'''Figure 10-20. Result of applying diffuse lighting filter'''

[[Image:SVG Essentials/I_10_tt223.png|Result of applying diffuse lighting filter]]
</div>

=== Specular Lighting ===

Specular lighting, on the other hand, gives highlights rather than illumination. [[SVG Essentials/Filters#svgess-CHP-10-EX-10|Example 10-10]] shows how this works.

<div id="svgess-CHP-10-EX-10">
'''Example 10-10. Specular lighting with a distant light'''

<path id="curve" d="M 0 0 Q 5 20 10 10 T 20 20" '''[1]'''
style="stroke: black; fill: none;"/>
<circle id="green-light" cx="50" cy="50" r="50"
style="fill: #060;"/>

<filter id="spec-light" color-interpolation-filters="sRGB" '''[2]'''
x="0" y="0" width="100%" height="100%">

<feImage xlink:href="#curve" result="tile" '''[3]'''
width="20" height="20"/>

<feTile in="tile" result="tile"/>

<feColorMatrix type="luminanceToAlpha" in="tile"
result="alphaTile"/>

<feSpecularLighting in="alphaTile" '''[4]'''
lighting-color="#ffffcc"
surfaceScale="1" '''[5]'''
specularConstant="1" '''[6]'''
specularExponent="4" '''[7]'''
result="specularOutput"> '''[8]'''
<feDistantLight elevation="25" azimuth="0"/> '''[9]'''
</feSpecularLighting> '''[10]'''

<feComposite in="specularOutput" in2="SourceGraphic" '''[11]'''
operator="in" result="specularOutput"/>

<feComposite in="specularOutput" in2="SourceGraphic" '''[12]'''
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</div>

<tt>'''[1]'''</tt> As in the previous example, the first six lines define the curve and circle.

<tt>'''[2]'''</tt> The only difference between this and the previous example is the filter name.

<tt>'''[3]'''</tt> As in the previous example, this section tiles the curve into an alpha channel.

<tt>'''[4]'''</tt> Starts the definition of the <tt><feSpecularLighting></tt> filter and specifies the <tt>lighting-color</tt> to be a pale yellow light.

<tt>'''[5]'''</tt> The <tt>surfaceScale</tt> attribute tells the height of the surface for an alpha value of 1. (Specifically, it's the factor by which the alpha value is multiplied.)

<tt>'''[6]'''</tt> <tt>specularConstant</tt> is a multiplicative factor that is used in determining the final RGB values of a pixel. It must have a value greater than or equal to zero; its default value is one. The brighter your <tt>lighting-color</tt>, the smaller this number should be.

<tt>'''[7]'''</tt> <tt>specularExponent</tt> is another factor that is used in determining the final RGB values of a pixel. This attribute must have a value from 1 to 128; the default value is 1. The larger this number, the more "shiny" the result.

<tt>'''[8]'''</tt> The result of this filter will be named <tt>specularOutput</tt>.

<tt>'''[9]'''</tt> In this example, we are using a distant light source, which means that is ''z''-value is effectively infinity. The <tt>elevation</tt> tells how far up or down the light is above the horizon, and the <tt>azimuth</tt> specifies the angle of the light in the plane of the screen — whether it's to the left, right, top, or bottom of the object being illuminated.

<tt>'''[10]'''</tt> The end of the <tt><feSpecularLighting></tt> element.

<div class="note">
'''Note'''

The input to this filter was an alpha channel; the output contains both alpha '''and''' color information (unlike <tt><feDiffuseLighting></tt>, which always produces an opaque result).
</div>

<tt>'''[11]'''</tt> We use <tt><feComposite></tt>'s <tt>in</tt> operator to clip the filter's output to the boundaries of the source graphic (the circle).

<tt>'''[12]'''</tt> Finally, we use <tt><feComposite></tt> with the <tt>arithmetic</tt> operator to do a straight addition of the lighting and the source graphic.

Once this is all defined, the following statement activates the filter on the desired object, producing the highlighting relief effect in [[SVG Essentials/Filters#svgess-CHP-10-FIG-21|Figure 10-21]].

<use xlink:href="#green-light" style="filter: url(#spec-light);"/>

<div id="svgess-CHP-10-FIG-21">
'''Figure 10-21. Result of applying specular lighting filter'''

[[Image:SVG Essentials/I_10_tt225.png|Result of applying specular lighting filter]]
</div>

<div class="note">
'''Note'''

An excellent tutorial on lighting effects in three dimensions is available at ''http://www.webreference.com/3d/lesson12/''. We're working in only two dimensions, but much of the information is applicable.
</div>

A third type of light source, <tt><feSpotLight></tt>, is specified with these attributes: <tt>x</tt>, <tt>y</tt>, and <tt>z</tt>, the location of the spotlight (default value is zero); <tt>pointsAtX</tt>, <tt>pointsAtY</tt>, and <tt>pointsAtZ</tt>, the place that the spotlight is pointing at (default value is zero); <tt>specularExponent</tt>, a value that controls the focus for the light source (default value is one); and <tt>limitingConeAngle</tt>, which restricts the region where the light is projected. This is the angle between the spot light axis and the cone. Thus, if you want a 30 degree spread for the entire cone, specify the angle as 15. (The default value is to allow unlimited spread.)

== Accessing the Background ==

In addition to the <tt>SourceGraphic</tt> and <tt>SourceAlpha</tt> filter inputs, a filtered object may access the part of the image that has already been rendered onto the canvas when you invoke a filter. These parts are called <tt>BackgroundImage</tt> (''not'' <tt>BackgroundGraphic</tt>) and <tt>BackgroundAlpha</tt>. In order to access these inputs, the filtered object must be within a container element that has set the <tt>enable-background</tt> attribute to the value <tt>new</tt>. [[SVG Essentials/Filters#svgess-CHP-10-EX-11|Example 10-11]] performs a Gaussian blur on the background alpha channel.

<div id="svgess-CHP-10-EX-11">
'''Example 10-11. Accessing the background'''

<defs>
<filter id="blur-background">
<feGaussianBlur in="BackgroundAlpha" '''[1]'''
stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>

<g enable-background="new"> '''[2]'''
<circle cx="30" cy="30" r="30" style="fill: #fff;"/> '''[3]'''
<rect x="0" y="0" width="60" height="60"
style="filter: url(#blur-background); '''[4]'''
fill: none; stroke: blue;" />
</g>
</div>

<tt>'''[1]'''</tt> This is similar to the blur filter used for drop shadows, except that the input is now the <tt>BackgroundAlpha</tt> rather than the <tt>SourceAlpha</tt>.

<tt>'''[2]'''</tt> Since <tt><g></tt> is a container element, it is a perfect candidate for placing the <tt>enable-background</tt>. All the children of this element will have access to the background image and alpha.

<tt>'''[3]'''</tt> We render a white circle onto the canvas; this makes it "invisible" against a white background.

<tt>'''[4]'''</tt> We now draw a rectangle and use the filter. The background alpha that it picks up will be circular, so [[SVG Essentials/Filters#svgess-CHP-10-FIG-22|Figure 10-22]] shows a square with a circular shadow. (Strange, but true!)

<div id="svgess-CHP-10-FIG-22">
'''Figure 10-22. Result of accessing background alpha'''

[[Image:SVG Essentials/I_10_tt226.png|Result of accessing background alpha]]
</div>

== The feMorphology Element ==

The <tt><feMorphology></tt> element lets you "thin" or "thicken" a graphic. You specify an <tt>operator</tt> with a value of <tt>erode</tt> to thin or <tt>dilate</tt> to thicken a graphic. The <tt>radius</tt> attribute tells us how much the lines are to be thickened or thinned. It's ordinarily applied to alpha channels; in [[SVG Essentials/Filters#svgess-CHP-10-EX-12|Example 10-12]] we erode and dilate a simple line drawing. As you see in [[SVG Essentials/Filters#svgess-CHP-10-FIG-23|Figure 10-23]], erosion can wreak havoc on a drawing that has thin lines to begin with.

<div id="svgess-CHP-10-EX-12">
'''Example 10-12. Thickening and thinning with feMorphology'''

<defs>
<g id="cat" stroke-width="2">

</g>

<filter id="erode1">
<feMorphology operator="erode" radius="1"/>
</filter>

<filter id="dilate2">
<feMorphology operator="dilate" radius="2"/>
</filter>
</defs>

<use xlink:href="#cat"/>
<text x="75" y="170" style="text-anchor: middle;">Normal</text>

<use xlink:href="#cat" transform="translate(150,0)"
style="filter: url(#erode1);"/>
<text x="225" y="170" style="text-anchor: middle;">Erode 1</text>

<use xlink:href="#cat" transform="translate(300,0)"
style="filter: url(#dilate2);"/>
<text x="375" y="170" style="text-anchor: middle;">Dilate 2</text>
</div>

<div id="svgess-CHP-10-FIG-23">
'''Figure 10-23. Result of using feMorphology'''

[[Image:SVG Essentials/I_10_tt227.png|Result of using feMorphology]]
</div>

== The feConvolveMatrix Element ==

The <tt><feConvolveMatrix></tt> element lets you calculate a pixel's new value in terms of the values of its neighboring pixels. This filter lets you do effects such as blurring, sharpening, embossing, and beveling. It works by combining a pixel with its neighboring pixels to produce a resulting pixel value. Imagine a pixel P and its eight neighboring pixels (the usual case that is used with this filter):

A B C
D '''P''' E
F G H

You then specify a list of nine numbers in the <tt>kernelMatrix</tt> attribute. These numbers tell how much to multiply each pixel by. These products will be added up. The sum could well come out to be greater than one (if all the factors are positive, for example), so, to even the intensity, the result is divided by the total of the factors. Let's say you specify these nine numbers:

<feConvolveMatrix kernelMatrix="
0 1 2
3 4 5
6 7 8"/>

The new value of pixel P will then be:

P' = ((0*A) + (1*B) + (2*C) +
(3*D) + (4*P) + (5*E) +
(6*F) + (7*G) + (8*H)) / ( 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8)

[[SVG Essentials/Filters#svgess-CHP-10-EX-13|Example 10-13]] achieves the embossing effect shown in [[SVG Essentials/Filters#svgess-CHP-10-FIG-24|Figure 10-24]] by taking the upper left neighbor minus the lower right neighbor of each pixel.

<div id="svgess-CHP-10-EX-13">
'''Example 10-13. Embossing with feConvolveMatrix'''

<defs>
<filter id="emboss">
<feConvolveMatrix
kernelMatrix="
1 0 0
0 0 0
0 0 -1"/>
</filter>

<g id="flower">

</g>
</defs>

<use xlink:href="#flower" style="filter: url(#emboss);"/>
</div>

<div id="svgess-CHP-10-FIG-24">
'''Figure 10-24. Result of using feConvolveMatrix'''

[[Image:SVG Essentials/I_10_tt231.png|Result of using feConvolveMatrix]]
</div>

Although the default matrix size is three columns by three rows, you can specify any size you want with the <tt>order</tt> attribute. If you specify <tt>order="4"</tt>, then the matrix will require sixteen numbers (4 by 4) in the <tt>kernelMatrix</tt> attribute. A matrix with three columns and two rows would be specified by <tt>order="3 2"</tt> and would require six numbers. The larger your kernel matrix, the more computation is required to produce the result.

For a pixel in the middle of a graphic, the neighbors are easy to identify. What do you do with the pixels on the edges of the graphic? Who are their neighbors? This decision is made by the setting that you give the <tt>edgeMode</tt> attribute. If you set its value to be <tt>duplicate</tt>, then <tt><feConvolveMatrix></tt> duplicates the edge values in the required direction to produce a neighbor. The value <tt>wrap</tt> wraps around to the opposite side to find a neighbor. For example, the neighbor above a pixel at the top is the pixel at the bottom, and the neighbor to the left of a pixel at the left edge is the corresponding pixel at the right edge. The value of <tt>none</tt> will provide a transparent black pixel (red, green, blue, and alpha values of zero) for any missing neighbors.

The default behavior of <tt><feConvolveMatrix></tt> is to apply the calculations to all the channels, including alpha. If you want to apply calculations only to the red, green, and blue values, specify <tt>preserveAlpha</tt> as <tt>true</tt> (the default value is <tt>false</tt>).

You may also add a fixed offset to the result of each calculation by specifying a value for the <tt>bias</tt> attribute, although this particular feature does not work in the current 1.0 release of Batik. Some sample convolve effects (which were not designed specifically for SVG) are available at ''http://www.nebulus.org/tutorials/2d/pictpub/udf/''.

== The feDisplacementMap Element ==

This fascinating filter uses the color values of its second input to decide how far to move the pixels in the first input. You specify which color channel should be used to affect the ''x''-coordinate of a pixel with the <tt>xChannelSelector</tt> attribute; the <tt>yChannelSelector</tt> attribute specifies the color channel used to affect the ''y''-coordinate. The legal values for these selectors are <tt>"R"</tt>, <tt>"G"</tt>, <tt>"B"</tt>, and <tt>"A"</tt> (for the alpha channel). You must specify how far to displace pixels; the <tt>scale</tt> attribute gives the appropriate scaling factor. If you don't specify this attribute, the filter won't do anything.

[[SVG Essentials/Filters#svgess-CHP-10-EX-14|Example 10-14]] creates a gradient rectangle as the second input. The displacement factor will be set to ten, the red channel will be used as an ''x'' offset, and the green channel will be used as a ''y'' offset. [[SVG Essentials/Filters#svgess-CHP-10-FIG-25|Figure 10-25]] shows the result of applying this displacement to the flower.

<div id="svgess-CHP-10-EX-14">
'''Example 10-14. Using a gradient as a displacement map'''

<defs>
<linearGradient id="gradient">
<stop offset="0" style="stop-color: #ff0000;" />
<stop offset="0.5" style="stop-color: #00ff00;"/>
<stop offset="1" style="stop-color: #000000;"/>
</linearGradient>

<rect id="rectangle" x="0" y="0" width="100" height="200"
style="fill: url(#gradient);"/>

<filter id="displace">
<feImage xlink:href="#rectangle" result="grad"/>

<feDisplacementMap
scale="10"
xChannelSelector="R"
yChannelSelector="G"
in="SourceGraphic" in2="grad"/>
</filter>

<g id="flower">

</g>
</defs>

<use xlink:href="#flower" style="filter: url(#displace);"/>
</div>

<div id="svgess-CHP-10-FIG-25">
'''Figure 10-25. Result of using feDisplacementMap'''

[[Image:SVG Essentials/I_10_tt232.png|Result of using feDisplacementMap]]
</div>

It's possible to use the same graphic for both inputs. This means that a graphic's displacement is controlled by its own coloration. This effect, as written in [[SVG Essentials/Filters#svgess-CHP-10-EX-15|Example 10-15]] and displayed in [[SVG Essentials/Filters#svgess-CHP-10-FIG-26|Figure 10-26]], can be quite eccentric.

<div id="svgess-CHP-10-EX-15">
'''Example 10-15. Using a Graphic as Its Own Displacement Map'''

<defs>
<filter id="self-displace">
<feDisplacementMap
scale="10"
xChannelSelector="R"
yChannelSelector="G"
in="SourceGraphic" '''in2="SourceGraphic"'''/>
</filter>

<g id="flower">

</g>
</defs>

<use xlink:href="#flower" style="filter: url(#self-displace);"/>
</div>

<div id="svgess-CHP-10-FIG-26">
'''Figure 10-26. Same graphic used as both inputs to feDisplacementMap'''

[[Image:SVG Essentials/I_10_tt233.png|Same graphic used as both inputs to feDisplacementMap]]
</div>

== The feTurbulence Element ==

The <tt><feTurbulence></tt> elements lets you produce artificial textures for effects like marble, clouds, etc. by using equations developed by Ken Perlin. An excellent summary is available at ''http://freespace.virgin.net/hugo.elias/models/m_perlin.htm''. You specify these attributes:

;
:
;<tt>type</tt>
: One of <tt>turbulence</tt> or <tt>fractalNoise</tt>. Fractal noise is smoother in appearance.
;<tt>baseFrequency</tt>
: The larger the number you give as the value for this attribute, the more quickly colors change in the result. This number must be greater than zero and should be less than one. You may also give two numbers for this attribute; the first will be the frequency in the ''x'' direction and the second will be the frequency in the ''y'' direction.
;<tt>numOctaves</tt>
: This is the number of noise functions that should be added together when generating the final result. The larger this number, the more fine-grained the texture. The default value is one.
;<tt>seed</tt>
: The starting value for the random number generator that this filter uses. The default value is zero; change it to get some variety in the result.

[[SVG Essentials/Filters#svgess-CHP-10-FIG-27|Figure 10-27]] is a screenshot of an SVG file that shows various values of the first three of these attributes.

<div id="svgess-CHP-10-FIG-27">
'''Figure 10-27. Various values of feTurbulence attributes'''

[[Image:SVG Essentials/I_10_tt234.png|Various values of feTurbulence attributes]]
</div>

== Filter Reference Summary ==

The <tt><filter></tt> element contains a series of filter primitives, each of which takes one or more inputs and provides a single result for use with other filters. The result of the last filter in the series is rendered into the final graphic. You specify the dimensions of the canvas to which the filter applies with the <tt>x</tt>, <tt>y</tt>, <tt>width</tt>, and <tt>height</tt> attributes.

[[SVG Essentials/Filters#svgess-CHP-10-TABLE-1|Table 10-1]] presents a filter reference summary. Each of the filter primitive elements has an <tt>in</tt> attribute that gives the source for the primitive, and may also specify an <tt>x</tt>, <tt>y</tt>, <tt>width</tt>, and <tt>height</tt>. Default attributes are in boldface.

<div id="svgess-CHP-10-TABLE-1">
'''Table 10-1. Filter reference summary'''

{| border="1"
|-
! Element !! Attributes
|-
| <tt><feBlend></tt> || <tt>in2="</tt><tt>''second source''</tt><tt>"</tt><tt>mode="</tt><tt>'''normal'''</tt><tt>" | "multiply" | "screen" | "darken" | "lighten"</tt>
|-
| <tt><feColorMatrix></tt> || <tt>type="matrix" | "saturate" | "hueRotate" | "luminanceToAlpha"</tt><tt>values="</tt><tt>''matrix values''</tt><tt>" | "</tt><tt>''saturation value (0-1)''</tt><tt>" | "</tt><tt>''rotate degrees''</tt><tt>"</tt>
|-
| <tt><feComponentTransfer></tt> || container for <tt><feFuncR></tt>, <tt><feFuncG></tt>, <tt><feFuncB></tt>, and <tt><feFuncA></tt> elements.
|-
| <tt><feFunc</tt><tt>''X''</tt><tt>></tt> || <tt>type="identity" | "table" | "discrete" | "linear" | "gamma"</tt><tt>tableValues="</tt><tt>''intervals for table, steps for discrete''</tt><tt>"</tt><tt>slope="</tt><tt>''linear slope''</tt><tt>"</tt><tt>intercept="</tt><tt>''linear intercept''</tt><tt>"</tt><tt>amplitude="</tt><tt>''gamma amplitude''</tt><tt>"</tt><tt>exponent="</tt><tt>''gamma exponent''</tt><tt>"</tt><tt>offset="</tt><tt>''gamma offset''</tt><tt>"</tt>
|-
| <tt><feComposite></tt> || <tt>in2="</tt><tt>''second source''</tt><tt>"</tt><tt>operator="over" | "in" | "out" | "atop" | "xor" | "arithmetic"</tt>
|-
| <tt><feComposite></tt>''(continued)'' || The following attributes are used with <tt>arithmetic</tt>:<tt>k1="</tt><tt>''factor for in1*in2''</tt><tt>"</tt><tt>k2="</tt><tt>''factor for in1''</tt><tt>"</tt><tt>k3="</tt><tt>''factor for in2''</tt><tt>"</tt><tt>k4="</tt><tt>''additive offset''</tt><tt>"</tt>
|-
| <tt><feConvolveMatrix></tt> || <tt>order="</tt><tt>''columns rows''</tt><tt>"</tt> (default 3 by 3)<tt>kernel="</tt><tt>''values''</tt><tt>"</tt><tt>bias="</tt><tt>''offset value''</tt><tt>"</tt>
|-
| <tt><feDiffuseLighting></tt> || Container for a light source element.<tt>surfaceScale="</tt><tt>''height''</tt><tt>"</tt> (default 1)<tt>diffuseConstant="</tt><tt>''factor''</tt><tt>"</tt> (must be non-negative; default 1)
|-
| <tt><feDisplacementMap></tt> || <tt>scale="</tt><tt>''displacement factor''</tt><tt>"</tt> (default 0)<tt>xChannelSelector="R" | "G" | "B" | "A"</tt><tt>yChannelSelector="R" | "G" | "B" | "A"</tt><tt>in2="</tt><tt>''second input''</tt><tt>"</tt>
|-
| <tt><feFlood></tt> || <tt>flood-fill-color="</tt><tt>''color specification''</tt><tt>"</tt><tt>flood-fill-opacity="</tt><tt>''value (0-1)''</tt><tt>"</tt>
|-
| <tt><feGaussianBlur></tt> || <tt>stdDeviation="</tt><tt>''blur spread''</tt><tt>"</tt> (larger is blurrier; default 0)
|-
| <tt><feImage></tt> || <tt>xlink:href="</tt><tt>''image source''</tt><tt>"</tt>
|-
| <tt><feMerge></tt> || container for <tt><feMergeNode></tt> elements
|-
| <tt><feMergeNode></tt> || <tt>in="</tt><tt>''intermediate result''</tt>
|-
| <tt><feMorphology></tt> || <tt>operator="erode" | "dilate"</tt><tt>radius="</tt><tt>''x-radius y-radius''</tt><tt>"</tt><tt>radius="</tt><tt>''radius''</tt><tt>"</tt>
|-
| <tt><feOffset></tt> || <tt>dx="</tt><tt>''x offset''</tt><tt>"</tt> (default 0)<tt>dy="</tt><tt>''y offset''</tt><tt>"</tt> (default 0)
|-
| <tt><feSpecularLighting></tt> || Container for a light source element.<tt>surfaceScale="</tt><tt>''height''</tt><tt>"</tt> (default 1)<tt>specularConstant="</tt><tt>''factor''</tt><tt>"</tt> (must be non-negative; default 1)<tt>specularExponent="</tt><tt>''exponent''</tt><tt>"</tt> (range 1-128; default 1)
|-
| <tt><feTile></tt> || tiles the <tt>''in''</tt> layer
|-
| <tt><feTurbulence></tt> || <tt>type="turbulence" | "fractalNoise"</tt><tt>baseFrequency="</tt><tt>''x-frequency y-frequency''</tt><tt>"</tt><tt>baseFrequency="</tt><tt>''frequency''</tt><tt>"</tt><tt>numOctaves="</tt><tt>''integer''</tt><tt>"</tt><tt>seed="</tt><tt>''number''</tt><tt>"</tt>
|-
| <tt><feDistantLight></tt> || <tt>azimuth="</tt><tt>''degrees''</tt><tt>"</tt> (default 0)<tt>elevation="</tt><tt>''degrees''</tt><tt>"</tt> (default 0)
|-
| <tt><fePointLight></tt> || <tt>x="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>y="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>z="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)
|-
| <tt><feSpotLight></tt> || <tt>x="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>y="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>z="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>pointsAtX="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>pointsAtY="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>pointsAtZ="</tt><tt>''coordinate''</tt><tt>"</tt> (default 0)<tt>specularConstant="</tt><tt>''focus control''</tt><tt>"</tt> (default 1)<tt>limitingConeAngle="</tt><tt>''degrees''</tt><tt>"</tt>
|}
</div>
== Notes ==

<references/>