SVG Essentials/Patterns and Gradients - 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

Evanlenz: 1 revision(s)

2008-03-06T23:40:35Z

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:43Z

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:04Z

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 20:		Line 20:
	'''Figure 7-1. Zoomed-in view of pattern tile'''		'''Figure 7-1. Zoomed-in view of pattern tile'''

-	[[Image:SVG ~~Essentials/I_7_tt145~~.png\|Zoomed-in view of pattern tile]]	+	[[Image:SVG Essentials_I_7_tt145.png\|Zoomed-in view of pattern tile]]
	</div>		</div>

Line 55:		Line 55:
	'''Figure 7-2. Tiles spaced by objectBoundingBox'''		'''Figure 7-2. Tiles spaced by objectBoundingBox'''

-	[[Image:SVG ~~Essentials/I_7_tt146~~.png\|Tiles spaced by objectBoundingBox]]	+	[[Image:SVG Essentials_I_7_tt146.png\|Tiles spaced by objectBoundingBox]]
	</div>		</div>

Line 86:		Line 86:
	'''Figure 7-3. Tiles spaced by userSpaceOnUse'''		'''Figure 7-3. Tiles spaced by userSpaceOnUse'''

-	[[Image:SVG ~~Essentials/I_7_tt147~~.png\|Tiles spaced by userSpaceOnUse]]	+	[[Image:SVG Essentials_I_7_tt147.png\|Tiles spaced by userSpaceOnUse]]
	</div>		</div>

Line 140:		Line 140:
	'''Figure 7-4. patternContentUnits set to objectBoundingBox'''		'''Figure 7-4. patternContentUnits set to objectBoundingBox'''

-	[[Image:SVG ~~Essentials/I_7_tt148~~.png\|patternContentUnits	+	[[Image:SVG Essentials_I_7_tt148.png\|patternContentUnits
	set to objectBoundingBox]]		set to objectBoundingBox]]
	</div>		</div>
Line 166:		Line 166:
	'''Figure 7-5. Pattern scaled with viewBox'''		'''Figure 7-5. Pattern scaled with viewBox'''

-	[[Image:SVG ~~Essentials/I_7_tt149~~.png\|Pattern scaled with	+	[[Image:SVG Essentials_I_7_tt149.png\|Pattern scaled with
	viewBox]]		viewBox]]
	</div>		</div>
Line 200:		Line 200:
	'''Figure 7-6. Patterns within patterns'''		'''Figure 7-6. Patterns within patterns'''

-	[[Image:SVG ~~Essentials/I_7_tt150~~.png\|Patterns within patterns]]	+	[[Image:SVG Essentials_I_7_tt150.png\|Patterns within patterns]]
	</div>		</div>

Line 228:		Line 228:
	'''Figure 7-7. Simple two-color gradient'''		'''Figure 7-7. Simple two-color gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt151~~.png\|Simple two-color gradient]]	+	[[Image:SVG Essentials_I_7_tt151.png\|Simple two-color gradient]]
	</div>		</div>

Line 253:		Line 253:
	'''Figure 7-8. Three-stop gradient'''		'''Figure 7-8. Three-stop gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt152~~.png\|Three-stop gradient]]	+	[[Image:SVG Essentials_I_7_tt152.png\|Three-stop gradient]]
	</div>		</div>

Line 306:		Line 306:
	'''Figure 7-9. Defining vectors for a linear gradient'''		'''Figure 7-9. Defining vectors for a linear gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt153~~.png\|Defining vectors for a linear gradient]]	+	[[Image:SVG Essentials_I_7_tt153.png\|Defining vectors for a linear gradient]]
	</div>		</div>

Line 371:		Line 371:
	'''Figure 7-10. spreadMethod values pad, repeat, and reflect for a linear gradient'''		'''Figure 7-10. spreadMethod values pad, repeat, and reflect for a linear gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt154~~.png\|spreadMethod values	+	[[Image:SVG Essentials_I_7_tt154.png\|spreadMethod values
	pad,		pad,
	repeat, and		repeat, and
Line 399:		Line 399:
	'''Figure 7-11. Radial gradient with three stops'''		'''Figure 7-11. Radial gradient with three stops'''

-	[[Image:SVG ~~Essentials/I_7_tt155~~.png\|Radial gradient with three stops]]	+	[[Image:SVG Essentials_I_7_tt155.png\|Radial gradient with three stops]]
	</div>		</div>

Line 425:		Line 425:
	'''Figure 7-12. Setting limits for a radial gradient'''		'''Figure 7-12. Setting limits for a radial gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt156~~.png\|Setting limits for a radial gradient]]	+	[[Image:SVG Essentials_I_7_tt156.png\|Setting limits for a radial gradient]]
	</div>		</div>

Line 451:		Line 451:
	'''Figure 7-13. Setting focal point for a radial gradient'''		'''Figure 7-13. Setting focal point for a radial gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt157~~.png\|Setting focal point for a radial gradient]]	+	[[Image:SVG Essentials_I_7_tt157.png\|Setting focal point for a radial gradient]]
	</div>		</div>

Line 512:		Line 512:
	'''Figure 7-14. spreadMethod values pad, repeat, and reflect for a radial gradient'''		'''Figure 7-14. spreadMethod values pad, repeat, and reflect for a radial gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt158~~.png\|spreadMethod values	+	[[Image:SVG Essentials_I_7_tt158.png\|spreadMethod values
	pad,		pad,
	repeat, and		repeat, and
Line 575:		Line 575:
	'''Figure 7-15. Transformation of a pattern and gradient'''		'''Figure 7-15. Transformation of a pattern and gradient'''

-	[[Image:SVG ~~Essentials/I_7_tt159~~.png\|Transformation of a pattern and gradient]]	+	[[Image:SVG Essentials_I_7_tt159.png\|Transformation of a pattern and gradient]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

2008-03-04T22:37:00Z

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
To this point, we have used only solid colors to fill and outline graphic objects. You are not restricted to using solid colors; you may also use a pattern or a gradient to fill or outline a graphic. That's what we'll examine in this chapter.

== Patterns ==

To use a pattern, you define a graphic object that is replicated horizontally and vertically to fill another object (or stroke). This graphic object is called a tile, because the act of filling an object with a pattern is very much like covering an area of a floor with tiles. In this section, we will use the quadratic curve drawn by the SVG in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-1|Example 7-1]] as our tile. It's outlined in gray to show its area (20 by 20 user units) clearly.

<div id="svgess-CHP-7-EX-1">
'''Example 7-1. Path for a pattern tile'''

<path d="M 0 0 Q 5 20 10 10 T 20 20"
style="stroke: black; fill: none;"/>
<path d="M 0 0 h20 v20 h-20 z"
style="stroke: gray; fill: none;"/>
</div>

[[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-1|Figure 7-1]] is zoomed in so you can see it in detail.

<div id="svgess-CHP-7-FIG-1">
'''Figure 7-1. Zoomed-in view of pattern tile'''

[[Image:SVG Essentials/I_7_tt145.png|Zoomed-in view of pattern tile]]
</div>

=== patternUnits ===

To create a pattern tile, you must enclose the <tt><path></tt> elements that describe your tile in a <tt><pattern></tt> element, and then make several decisions. The first decision is how you wish to space the tiles, and this is reflected in the <tt>patternUnits</tt> attribute. Do you want the tiles spaced to fill a certain percentage of each object they're applied to, or you do want them spaced at equal intervals, no matter what the size of the object they're filling?

If you want the tile dimensions on an object-by-object basis, you specify the pattern's upper left <tt>x</tt> and <tt>y</tt> coordinates, and its <tt>width</tt> and <tt>height</tt> as percentages or decimals in the range zero to one, and set the <tt>patternUnits</tt> attribute to <tt>objectBoundingBox</tt>. An object's bounding box is the smallest rectangle that completely encloses a particular graphic object. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-2|Example 7-2]] shows the sample tile replicated five times horizontally and five times vertically in any object that it fills.

<div id="svgess-CHP-7-EX-2">
'''Example 7-2. Tiles spaced with patternUnits set to objectBoundingBox'''

<defs>
<pattern id="tile" x="0" y="0" width="20%" height="20%"
patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
style="stroke: gray; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="20" width="70" height="80"
style="fill: url(#tile); stroke: black;"/>
<rect x="220" y="20" width="150" height="130"
style="fill: url(#tile); stroke: black;"/>
</div>

In [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-2|Figure 7-2]], the leftmost rectangle, which is 100 user units wide and tall, provides an exact fit for five tiles that are each 20 user units wide and tall. In the middle rectangle, the width and height aren't great enough to show any one pattern tile completely, so they are truncated. In the rightmost rectangle, extra space is added since the rectangle's width and height exceeds five times the space required for a single tile. In all cases, since we set <tt>x</tt> and <tt>y</tt>, the upper left corner of the tile coincides with the upper left corner of the rectangle.

<div id="svgess-CHP-7-FIG-2">
'''Figure 7-2. Tiles spaced by objectBoundingBox'''

[[Image:SVG Essentials/I_7_tt146.png|Tiles spaced by objectBoundingBox]]
</div>

If you're used to most graphics programs, this behavior comes as somewhat of a shock. Typical graphic editing programs put tiles directly next to one another to fill the area, no matter what its size. There is never extra padding between tiles, and tiles are cut off only by the edge of the object they're filling. If this is the behavior that you want, you must set the <tt>patternUnits</tt> attribute to <tt>userSpaceOnUse</tt>, and specify the <tt>x</tt> and <tt>y</tt> coordinates, and the <tt>width</tt> and <tt>height</tt> of the tile in user units. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-3|Example 7-3]] uses the sample tile, set to its exact width and height of twenty user units.

<div id="svgess-CHP-7-EX-3">
'''Example 7-3. Tiles spaced with patternUnits set to userSpaceOnUse'''

<defs>
<pattern id="tile" x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
style="stroke: gray; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="20" width="70" height="80"
style="fill: url(#tile); stroke: black;"/>
<rect x="220" y="20" width="150" height="130"
style="fill: url(#tile); stroke: black;"/>
</div>

In [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-3|Figure 7-3]], the tiles have constant size in all three rectangles. Their alignment is, however, dependent upon the underlying coordinate system. The middle rectangle, for example, has an ''x''-coordinate that is not a multiple of twenty, so the rectangle's upper left corner doesn't coincide with a tile's upper left corner. (The top edges do align, since the upper ''y''-coordinate of all three rectangles was carefully chosen to be a multiple of twenty.)

<div id="svgess-CHP-7-FIG-3">
'''Figure 7-3. Tiles spaced by userSpaceOnUse'''

[[Image:SVG Essentials/I_7_tt147.png|Tiles spaced by userSpaceOnUse]]
</div>

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

If you do not specify a value for <tt>patternUnits</tt>, the default is <tt>objectBoundingBox</tt>.
</div>

=== patternContentUnits ===

You must next decide what units are to be used to express the pattern data itself. By default, the <tt>patternContentUnits</tt> attribute is set to <tt>userSpaceOnUse</tt>. If you set the attributes to <tt>objectBoundingBox</tt>, the path data points are expressed in terms of the object being filled. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-4|Example 7-4]] shows the SVG that produces [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-4|Figure 7-4]].

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

If you use the <tt>objectBoundingBox</tt> for your <tt>patternContentUnits</tt>, you should draw any objects to be filled with the upper left corner of their bounding boxes at the origin (0, 0). Also, you will have to reduce the <tt>stroke-width</tt> of the pattern data to 0.01, since these units are percentages, not user units.
</div>

<div id="svgess-CHP-7-EX-4">
'''Example 7-4. patternContentUnits set to objectBoundingBox'''

<defs>
<pattern id="tile"
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" width=".2" height=".2">
<path d="M 0 0 Q .05 .20 .10 .10 T .20 .20"
style="stroke: black; fill: none; stroke-width: 0.01;"/>
<path d="M 0 0 h 0.2 v 0.2 h-0.2z"
style="stroke: black; fill: none; stroke-width: 0.01;"/>
</pattern>

</defs>

<g transform="translate(20,20)">
<rect x="0" y="0" width="100" height="100"
style="fill: url(#tile); stroke: black;"/>
</g>

<g transform="translate(135,20)">
<rect x="0" y="0" width="70" height="80"
style="fill: url(#tile); stroke: black;"/>
</g>

<g transform="translate(220,20)">
<rect x="0" y="0" width="150" height="130"
style="fill: url(#tile); stroke: black;"/>
</g>
</div>

<div id="svgess-CHP-7-FIG-4">
'''Figure 7-4. patternContentUnits set to objectBoundingBox'''

[[Image:SVG Essentials/I_7_tt148.png|patternContentUnits
set to objectBoundingBox]]
</div>

If you want to reduce an existing graphic object for use as a tile, it's easier to use the <tt>viewBox</tt> attribute to scale it. Specifying <tt>viewBox</tt> will override any <tt>patternContentUnits</tt> information. Another possible option is to use the <tt>preserveAspectRatio</tt> attribute, as described in [[SVG Essentials/Coordinates|Chapter 2]], in [[SVG Essentials/Coordinates#Preserving Aspect Ratio|Section 2.4]]. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-5|Example 7-5]] uses a scaled-down version of the cubic polybézier curve from [[SVG Essentials/Paths#svgess-CHP-6-FIG-12|Figure 6-12]] as a tile. The <tt>stroke-width</tt> is set to 5; otherwise, when scaled down, the pattern you see in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-5|Figure 7-5]] would not be visible.

<div id="svgess-CHP-7-EX-5">
'''Example 7-5. Using viewBox to scale a pattern'''

<defs>
<pattern id="tile"
patternUnits="userSpaceOnUse"
x="0" y="0" width="20" height="20"
viewBox="0 0 150 150">
<path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100"
style="stroke: black; stroke-width: 5; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#tile); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-5">
'''Figure 7-5. Pattern scaled with viewBox'''

[[Image:SVG Essentials/I_7_tt149.png|Pattern scaled with
viewBox]]
</div>

=== Nested Patterns ===

Again, this may have occurred to you: "If an object can be filled with a pattern, can ''that'' pattern be filled with a pattern as well?" The answer is yes. As opposed to nested markers, which are rarely necessary, there are some effects you can't easily achieve without nested patterns. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-6|Example 7-6]] creates a rectangle filled with circles, all filled with horizontal stripes. This produces the unusual, but valid, polka-dot effect shown in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-6|Figure 7-6]].

<div id="svgess-CHP-7-EX-6">
'''Example 7-6. Nested patterns'''

<defs>
<pattern id="stripe"
patternUnits="userSpaceOnUse"
x="0" y="0" width="6" height="6">
<path d="M 0 0 6 0"
style="stroke: black; fill: none;"/>
</pattern>

<pattern id="polkadot"
patternUnits="userSpaceOnUse"
x="0" y="0" width="36" height="36">
<circle cx="12" cy="12" r="12"
style="'''fill: url(#stripe);''' stroke: black;"/>
</pattern>
</defs>

<rect x="36" y="36" width="100" height="100"
style="fill: url(#polkadot); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-6">
'''Figure 7-6. Patterns within patterns'''

[[Image:SVG Essentials/I_7_tt150.png|Patterns within patterns]]
</div>

== Gradients ==

Rather than filling an object with a solid color, you can fill it with a gradient, a smooth color transition from one shade to another. Gradients can be linear, where the color transition occurs along a straight line, or radial, where the transition occurs along a circular path.

=== linearGradient ===

A linear gradient is a transition through a series of colors along a straight line. You specify the colors you want at specific locations, called gradient stops. The stops are part of the structure of the gradient; the colors are part of the presentation. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-7|Example 7-7]] shows the SVG for a gradient that fills a rectangle with a smooth transition from gold to cyan, which you can see in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-7|Figure 7-7]].

<div id="svgess-CHP-7-EX-7">
'''Example 7-7. Simple two-color gradient'''

<defs>
<linearGradient id="two_hues">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="100%" style="stop-color: #0099cc;"/>
</linearGradient>
</defs>

<rect x="20" y="20" width="200" height="100"
style="fill: url(#two_hues); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-7">
'''Figure 7-7. Simple two-color gradient'''

[[Image:SVG Essentials/I_7_tt151.png|Simple two-color gradient]]
</div>

==== The stop element ====

Let's examine the <tt><stop></tt> element more closely. It has two required attributes; the <tt>offset</tt> tells the point along the line at which the color should be equal to the <tt>stop-color</tt>. The <tt>offset</tt> is expressed as a percentage from 0 to 100% or as a decimal value from 0 to 1.0. While you don't need to place stops at 0% and 100%, you usually will. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-8|Example 7-8]] is a slightly more complex linear gradient, with stops for gold at 0%, reddish-purple at 33.3%, and light green at 100%; it is shown in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-8|Figure 7-8]].

<div id="svgess-CHP-7-EX-8">
'''Example 7-8. Three-color gradient'''

<defs>
<linearGradient id="three_stops">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
</defs>

<rect x="20" y="20" width="200" height="100"
style="fill: url(#three_stops); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-8">
'''Figure 7-8. Three-stop gradient'''

[[Image:SVG Essentials/I_7_tt152.png|Three-stop gradient]]
</div>

==== Establishing a transition line for a linear gradient ====

The default behavior of a linear gradient is to transition along a horizontal line from the left side of an object to its right side. If you want the transition of colors to occur across a vertical line or a line at an angle, you must specify the line's starting point with the <tt>x1</tt> and <tt>y1</tt> attributes and its ending points with the <tt>x2</tt> and <tt>y2</tt> attributes. By default, these are also expressed as percentages from 0% to 100% or decimals from 0 to 1. In [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-9|Example 7-9]], we'll use the same color stops in a horizontal, vertical, and diagonal gradient. Rather than duplicate the stops into each <tt><linearGradient></tt> element, we'll use the <tt>xlink:href</tt> attribute to refer to the original left-to-right gradient. The stops will be inherited, but the ''x''- and ''y''-coordinates will be overriden by each individual gradient. The arrows in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-9|Figure 7-9]] do not appear in the SVG of [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-9|Example 7-9]].

<div id="svgess-CHP-7-EX-9">
'''Example 7-9. Defining vectors for a linear gradient'''

<defs>
<linearGradient id="three_stops">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="right_to_left"
xlink:href="#three_stops"
x1="100%" y1="0%" x2="0%" y2="0%"/>

<linearGradient id="down"
xlink:href="#three_stops"
x1="0%" y1="0%" x2="0%" y2="100%"/>

<linearGradient id="up"
xlink:href="#three_stops"
x1="0%" y1="100%" x2="0%" y2="0%"/>

<linearGradient id="diagonal"
xlink:href="#three_stops"
x1="0%" y1="0%" x2="100%" y2="100%"/>
</defs>

<rect x="40" y="20" width="200" height="40"
style="fill: url(#three_stops); stroke: black;"/>

<rect x="40" y="70" width="200" height="40"
style="fill: url(#right_to_left); stroke: black;"/>

<rect x="250" y="20" width="40" height="200"
style="fill: url(#down); stroke: black;"/>

<rect x="300" y="20" width="40" height="200"
style="fill: url(#up); stroke: black;"/>

<rect x="40" y="120" width="200" height="100"
style="fill: url(#diagonal); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-9">
'''Figure 7-9. Defining vectors for a linear gradient'''

[[Image:SVG Essentials/I_7_tt153.png|Defining vectors for a linear gradient]]
</div>

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

If you wish to establish the transition line using user space coordinates instead of percentages, set the <tt>gradientUnits</tt> to <tt>userSpaceOnUse</tt> instead of the default value, which is <tt>objectBoundingBox</tt>.
</div>

==== The spreadMethod attribute ====

The transition line does not have to go from one corner of an object to another. What happens if you say that the transition line goes from (20%, 30%) to (40%, 80%)? What happens to the part of the object outside that line? You can set the <tt>spreadMethod</tt> attribute to one of these values:

;<tt>pad</tt>
: The beginning and ending stop colors will be extended to the edges of the object.
;<tt>repeat</tt>
: The gradient will be repeated start-to-end until it reaches the edges of the object being filled.
;<tt>reflect</tt>
: The gradient will be reflected end-to-start, start-to-end until it reaches the edges of the object being filled.

[[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-10|Figure 7-10]] shows the leftmost square's gradient padded, the middle square's gradient repeated, and the right square's gradient reflected. The original transition line has been added to the SVG for each square in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-10|Example 7-10]] to make the effect easier to detect.

<div id="svgess-CHP-7-EX-10">
'''Example 7-10. Effects of spreadMethod values on a linear gradient'''

<defs>
<linearGradient id="partial"
'''x1="20%" y1="30%" x2="40%" y2="80%"'''>
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="padded"
xlink:href="#partial"
spreadMethod="pad"/>

<linearGradient id="repeated"
xlink:href="#partial"
spreadMethod="repeat"/>

<linearGradient id="reflected"
xlink:href="#partial"
spreadMethod="reflect"/>

<line id="show-line" x1="20" y1="30" x2="40" y2="80"
style="stroke: white;"/>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#padded); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (20,20)"/>

<rect x="130" y="20" width="100" height="100"
style="fill: url(#repeated); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (130,20)"/>

<rect x="240" y="20" width="100" height="100"
style="fill: url(#reflected); stroke: black;"/>
<use xlink:href="#show-line" transform="translate (240,20)"/>
</div>

<div id="svgess-CHP-7-FIG-10">
'''Figure 7-10. spreadMethod values pad, repeat, and reflect for a linear gradient'''

[[Image:SVG Essentials/I_7_tt154.png|spreadMethod values
pad,
repeat, and
reflect for a linear gradient]]
</div>

=== radialGradient ===

The other type of gradient you can use is the radial gradient, where the color transition occurs along a circular path.<ref>If the bounding box of the object being filled is not square, the transition path will become elliptical to match the aspect ratio of the bounding box.</ref> It's set up in much the same way as a linear gradient. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-11|Example 7-11]] sets three stops, which, as you see in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-11|Figure 7-11]], are orange, green, and purple.

<div id="svgess-CHP-7-EX-11">
'''Example 7-11. Radial gradient with three stops'''

<defs>
<radialGradient id="three_stops">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#three_stops); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-11">
'''Figure 7-11. Radial gradient with three stops'''

[[Image:SVG Essentials/I_7_tt155.png|Radial gradient with three stops]]
</div>

==== Establishing transition limits for a radial gradient ====

Instead of using a line to determine where the 0% and 100% stop points should be, a radial gradient's limits are determined by a circle; the center is the 0% stop point, and the outer circumference defines the 100% stop point. You define the outer circle with the <tt>cx</tt> (center ''x''), <tt>cy</tt> (center ''y''), and <tt>r</tt> (radius) attributes. All of these are in terms of percentages of the object's bounding box. The default values for all these attributes is 50%. [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-12|Example 7-12]] draws a square with a radial gradient with the zero point centered at the upper left of the square and the outer edge at the lower right. The result is shown in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-12|Figure 7-12]].

<div id="svgess-CHP-7-EX-12">
'''Example 7-12. Setting limits for a radial gradient'''

<defs>
<radialGradient id="center_origin"
'''cx="0" cy="0" r="100%"'''>
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#center_origin); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-12">
'''Figure 7-12. Setting limits for a radial gradient'''

[[Image:SVG Essentials/I_7_tt156.png|Setting limits for a radial gradient]]
</div>

The 0% stop point, also called the focal point, is by default placed at the center of the circle that defines the 100% stop point. If you wish to have the 0% stop point at some point other than the center of the limit circle, you must change the <tt>fx</tt> and <tt>fy</tt> attributes. The focal point should be within the circle established for the 100% stop point. If it's not, the SVG viewer program will automatically move the focal point to the outer circumference of the end circle.

In [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-13|Example 7-13]], the circle is centered at the origin with a radius of 100%, but the focal point is at (30%, 30%). As you see in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-13|Figure 7-13]], this has the visual effect of moving the "center."

<div id="svgess-CHP-7-EX-13">
'''Example 7-13. Setting focal point for a radial gradient'''

<defs>
<radialGradient id="focal_set"
'''cx="0" cy="0" fx="30%" fy="30%" r="100%"'''>
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#focal_set); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-13">
'''Figure 7-13. Setting focal point for a radial gradient'''

[[Image:SVG Essentials/I_7_tt157.png|Setting focal point for a radial gradient]]
</div>

The default values for the limit-setting attributes of a <tt><radialGradient></tt> are as follows:

{| border="1"
|-
! Attribute !! Default value
|-
| <tt>cx</tt> || 50% (horizontal center of object bounding box)
|-
| <tt>cy</tt> || 50% (vertical center of object bounding box)
|-
| <tt>r</tt> || 50% (half the width/height of object bounding box)
|-
| <tt>fx</tt> || same as <tt>cx</tt>
|-
| <tt>fy</tt> || same as <tt>cy</tt>
|}

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

If you wish to establish the circle limits using user space coordinates instead of percentages, set the <tt>gradientUnits</tt> to <tt>userSpaceOnUse</tt> instead of the default value, which is <tt>objectBoundingBox</tt>.
</div>

==== The spreadMethod attribute for radial gradients ====

In the event that the limits you've described don't reach to the edges of the object, you can set the <tt>spreadMethod</tt> attribute to one of the values <tt>pad</tt>, <tt>repeat</tt>, or <tt>reflect</tt> as described earlier in [[SVG Essentials/Patterns and Gradients#The spreadMethod attribute|Section 7.2.1.3]] to fill up the remaining space as you wish. We've written all three effects in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-14|Example 7-14]]; [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-14|Figure 7-14]] shows the leftmost square's gradient padded, the middle square's gradient repeated, and the right square's gradient reflected.

<div id="svgess-CHP-7-EX-14">
'''Example 7-14. Effects of spreadMethod values on a radial gradient'''

<defs>
<radialGradient id="three_stops"
cx="0%" cy="0%" r="70%">
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>

<radialGradient id="padded" xlink:href="#three_stops"
spreadMethod="pad"/>
<radialGradient id="repeated" xlink:href="#three_stops"
spreadMethod="repeat"/>
<radialGradient id="reflected" xlink:href="#three_stops"
spreadMethod="reflect"/>
</defs>

<rect x="20" y="20" width="100" height="100"
style="fill: url(#padded); stroke: black;"/>
<rect x="130" y="20" width="100" height="100"
style="fill: url(#repeated); stroke: black;"/>
<rect x="240" y="20" width="100" height="100"
style="fill: url(#reflected); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-14">
'''Figure 7-14. spreadMethod values pad, repeat, and reflect for a radial gradient'''

[[Image:SVG Essentials/I_7_tt158.png|spreadMethod values
pad,
repeat, and
reflect for a radial gradient]]
</div>

=== Gradient Reference Summary ===

Linear and radial gradients describe a smooth transition of colors used to fill an object. The object in question has a bounding box, defined as the smallest rectangle that entirely contains the object. The <tt><linearGradient></tt> and <tt><radialGradient></tt> elements are both containers for a series of <tt><stop></tt> elements. Each of these <tt><stop></tt> elements specifies a <tt>stop-color</tt> and an <tt>offset</tt>. For linear gradients, the offset is a percentage of the distance along the gradient's linear vector. For radial gradients, it is a percentage of the distance along the gradient's radius.

For a linear gradient, the starting point of the vector (which has the 0% stop color) is defined by the attributes <tt>x1</tt> and <tt>y1</tt>; the ending point (which has the 100% stop color) by the attributes <tt>x2</tt> and <tt>y2</tt>.

For a radial gradient, the focal point (which has the 0% stop color) is defined by the attributes <tt>fx</tt> and <tt>fy</tt>; the circle that has the 100% stop color is defined by its center coordinates <tt>cx</tt> and <tt>cy</tt> and its radius <tt>r</tt>.

If the <tt>gradientUnits</tt> attribute has the value <tt>objectBoundingBox</tt>, the coordinates are taken as a percentage of bounding box's dimensions (this is the default). If the value is set to <tt>userSpaceOnuse</tt>, the coordinates are taken to be in the coordinate system used by the object that is being filled.

If the vector for a linear gradient or the circle for a radial gradient does not reach to the boundaries of the object being filled, the remaining space will be colored as determined by the value of the <tt>spreadMethod</tt> attribute: <tt>pad</tt>, the default, extends the start and end colors to the boundaries; <tt>repeat</tt> repeats the gradient start-to-end until it reaches the boundaries; and <tt>reflect</tt> replicates the gradient end-to-start and start-to-end until it reaches the object boundaries.

== Transforming Gradients and Patterns ==

Sometimes you may need to skew, stretch, or rotate a pattern or gradient. You're not transforming the object being filled; you're transforming the pattern or the color spectrum used to fill the object. The <tt>gradientTransform</tt> and <tt>patternTransform</tt> attributes let you do just that, as written in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-EX-15|Example 7-15]] and shown in [[SVG Essentials/Patterns and Gradients#svgess-CHP-7-FIG-15|Figure 7-15]]:

<div id="svgess-CHP-7-EX-15">
'''Example 7-15. Transforming patterns and gradients'''

<defs>
<linearGradient id="plain">
<stop offset="0%" style="stop-color: #ffcc00;"/>
<stop offset="33.3%" style="stop-color: #cc6699"/>
<stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="skewed-gradient"
gradientTransform="skewX(10)"
xlink:href="#plain"/>

<pattern id="tile" x="0" y="0" width="20%" height="20%"
patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
style="stroke: gray; fill: none;"/>
</pattern>

<pattern id="skewed-tile"
patternTransform="skewY(15)"
xlink:href="#tile"/>
</defs>

<rect x="20" y="10" width="100" height="100"
style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="10" width="100" height="100"
style="fill: url(#skewed-tile); stroke: black;"/>

<rect x="20" y="120" width="200" height="50"
style="fill: url(#plain); stroke: black;"/>
<rect x="20" y="190" width="200" height="50"
style="fill: url(#skewed-gradient); stroke: black;"/>
</div>

<div id="svgess-CHP-7-FIG-15">
'''Figure 7-15. Transformation of a pattern and gradient'''

[[Image:SVG Essentials/I_7_tt159.png|Transformation of a pattern and gradient]]
</div>

One final note about gradients and patterns — although we've only applied them to the filled area of a shape, you may also apply them to the <tt>stroke</tt>. This lets you produce a multicolored or patterned outline for an object. You'll usually set the <tt>stroke-width</tt> to a number greater than one so that the effect is more clearly visible.
== Notes ==

<references/>