SVG Essentials/Paths - Revision history

Newacct at 07:42, 15 April 2010

2010-04-15T07:42:45Z

←Older revision		Revision as of 07:42, 15 April 2010
Line 273:		Line 273:

	#!/usr/bin/perl		#!/usr/bin/perl
		+	use Math::Trig;

	#		#
Line 301:		Line 302:
	{		{
	my ($cx, $cy, $rx, $ry, $theta1, $delta, $phi) = @_;		my ($cx, $cy, $rx, $ry, $theta1, $delta, $phi) = @_;
-	my ($theta2, $pi);
-	my ($x0, $y0, $x1, $y1, $large_arc, $sweep);

-	#	+	my $theta2 = $delta + $theta1;
-	~~# Convert angles to radians~~	+	$theta1 = deg2rad($theta1);
-	#	+	$theta2 = deg2rad($theta2);
-	~~$pi = atan2(1,1) * 4; # approximation of pi~~	+	my $phi_r = deg2rad($phi);
-		+
-	$theta2 = $delta + $theta1;	+
-	$theta1 = $theta1 * $pi / 180.0;	+
-	$theta2 = $theta2 * $pi / 180.0;	+
-	$phi_r = $phi * $pi / 180.0;	+

	#		#
Line 318:		Line 312:
	# ending points		# ending points
	#		#
-	$x0 = $cx + cos($phi_r) * $rx * cos($theta1) +	+	my $x0 = $cx + cos($phi_r) * $rx * cos($theta1) +
	sin(-$phi_r) * $ry * sin($theta1);		sin(-$phi_r) * $ry * sin($theta1);
-	$y0 = $cy + sin($phi_r) * $rx * cos($theta1) +	+	my $y0 = $cy + sin($phi_r) * $rx * cos($theta1) +
	cos($phi_r) * $ry * sin($theta1);		cos($phi_r) * $ry * sin($theta1);

-	$x1 = $cx + cos($phi_r) * $rx * cos($theta2) +	+	my $x1 = $cx + cos($phi_r) * $rx * cos($theta2) +
	sin(-$phi_r) * $ry * sin($theta2);		sin(-$phi_r) * $ry * sin($theta2);
-	$y1 = $cy + sin($phi_r) * $rx * cos($theta2) +	+	my $y1 = $cy + sin($phi_r) * $rx * cos($theta2) +
	cos($phi_r) * $ry * sin($theta2);		cos($phi_r) * $ry * sin($theta2);

-	$large_arc = ($delta > 180) ? 1 : 0;	+	my $large_arc = ($delta > 180) ? 1 : 0;
-	$sweep = ($delta > 0) ? 1 : 0;	+	my $sweep = ($delta > 0) ? 1 : 0;

	return ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x1, $y1);		return ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x1, $y1);
Line 382:		Line 376:

	#!/usr/bin/perl		#!/usr/bin/perl
-		+	use Math::Trig;
-	~~sub acos~~	+
-	{	+
-	~~atan2( sqrt(1 - $_[0] * $_[0]), $_[0] )~~;	+
-	}	+

	#		#
Line 416:		Line 406:
	{		{
	my ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y) = @_;		my ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y) = @_;
-	my ($cx, $cy, $theta, $delta, $phi);

-	# a plethora of temporary variables
-	my (
-	$dx2, $dy2, $phi_r, $x1, $y1,
-	$rx_sq, $ry_sq,
-	$x1_sq, $y1_sq,
-	$sign, $sq, $coef,
-	$cx1, $cy1, $sx2, $sy2,
-	$p, $n,
-	$ux, $uy, $vx, $vy
-	);
-
	# Compute 1/2 distance between current and final point		# Compute 1/2 distance between current and final point
-	$dx2 = ($x0 - $x) / 2.0;	+	my $dx2 = ($x0 - $x) / 2.0;
-	$dy2 = ($y0 - $y) / 2.0;	+	my $dy2 = ($y0 - $y) / 2.0;

	# Convert from degrees to radians		# Convert from degrees to radians
-	$pi = atan2(1, 1) * 4.0;
	$phi %= 360;		$phi %= 360;
-	$phi_r = $phi * $pi / 180.0;	+	my $phi_r = deg2rad($phi);

	# Compute (x1, y1)		# Compute (x1, y1)
-	$x1 = cos($phi_r) * $dx2 + sin($phi_r) * $dy2;	+	my $x1 = cos($phi_r) * $dx2 + sin($phi_r) * $dy2;
-	$y1 = -sin($phi_r) * $dx2 + cos($phi_r) * $dy2;	+	my $y1 = -sin($phi_r) * $dx2 + cos($phi_r) * $dy2;

	# Make sure radii are large enough		# Make sure radii are large enough
	$rx = abs($rx); $ry = abs($ry);		$rx = abs($rx); $ry = abs($ry);
-	$rx_sq = $rx * $rx;	+	my $rx_sq = $rx * $rx;
-	$ry_sq = $ry * $ry;	+	my $ry_sq = $ry * $ry;
-	$x1_sq = $x1 * $x1;	+	my $x1_sq = $x1 * $x1;
-	$y1_sq = $y1 * $y1;	+	my $y1_sq = $y1 * $y1;

	$radius_check = ($x1_sq / $rx_sq) + ($y1_sq / $ry_sq);		$radius_check = ($x1_sq / $rx_sq) + ($y1_sq / $ry_sq);
Line 460:		Line 437:
	# Step 2: Compute (cx1, cy1)		# Step 2: Compute (cx1, cy1)

-	$sign = ($large_arc == $sweep) ? -1 : 1;	+	my $sign = ($large_arc == $sweep) ? -1 : 1;
-	$sq = (($rx_sq * $ry_sq) - ($rx_sq * $y1_sq) - ($ry_sq * $x1_sq)) /	+	my $sq = (($rx_sq * $ry_sq) - ($rx_sq * $y1_sq) - ($ry_sq * $x1_sq)) /
	(($rx_sq * $y1_sq) + ($ry_sq * $x1_sq));		(($rx_sq * $y1_sq) + ($ry_sq * $x1_sq));
	$sq = ($sq < 0) ? 0 : $sq;		$sq = ($sq < 0) ? 0 : $sq;
-	$coef = ($sign * sqrt($sq));	+	my $coef = $sign * sqrt($sq);
-	$cx1 = $coef * (($rx * $y1) / $ry);	+	my $cx1 = $coef * (($rx * $y1) / $ry);
-	$cy1 = $coef * -(($ry * $x1) / $rx);	+	my $cy1 = $coef * -(($ry * $x1) / $rx);

	# Step 3: Compute (cx, cy) from (cx1, cy1)		# Step 3: Compute (cx, cy) from (cx1, cy1)

-	$sx2 = ($x0 + $x) / 2.0;	+	my $sx2 = ($x0 + $x) / 2.0;
-	$sy2 = ($y0 + $y) / 2.0;	+	my $sy2 = ($y0 + $y) / 2.0;

-	$cx = $sx2 + (cos($phi_r) * $cx1 - sin($phi_r) * $cy1);	+	my $cx = $sx2 + (cos($phi_r) * $cx1 - sin($phi_r) * $cy1);
-	$cy = $sy2 + (sin($phi_r) * $cx1 + cos($phi_r) * $cy1);	+	my $cy = $sy2 + (sin($phi_r) * $cx1 + cos($phi_r) * $cy1);

	# Step 4: Compute angle start and angle extent		# Step 4: Compute angle start and angle extent

-	$ux = ($x1 - $cx1) / $rx;	+	my $ux = ($x1 - $cx1) / $rx;
-	$uy = ($y1 - $cy1) / $ry;	+	my $uy = ($y1 - $cy1) / $ry;
-	$vx = (-$x1 - $cx1) / $rx;	+	my $vx = (-$x1 - $cx1) / $rx;
-	$vy = (-$y1 - $cy1) / $ry;	+	my $vy = (-$y1 - $cy1) / $ry;
-	$n = sqrt( ($ux * $ux) + ($uy * $uy) );	+	my $n = sqrt( ($ux * $ux) + ($uy * $uy) );
-	$p = $ux; # 1 * ux + 0 * uy	+	my $p = $ux; # 1 * ux + 0 * uy
	$sign = ($uy < 0) ? -1 : 1;		$sign = ($uy < 0) ? -1 : 1;

-	$theta = $sign * acos( $p / $n );	+	my $theta = $sign * acos( $p / $n );
-	$theta = $theta * 180 / $pi;	+	$theta = rad2deg($theta);

	$n = sqrt(($ux * $ux + $uy * $uy) * ($vx * $vx + $vy * $vy));		$n = sqrt(($ux * $ux + $uy * $uy) * ($vx * $vx + $vy * $vy));
	$p = $ux * $vx + $uy * $vy;		$p = $ux * $vx + $uy * $vy;
	$sign = (($ux * $vy - $uy * $vx) < 0) ? -1 : 1;		$sign = (($ux * $vy - $uy * $vx) < 0) ? -1 : 1;
-	$delta = $sign * acos( $p / $n );	+	my $delta = $sign * acos( $p / $n );
-	$delta = $delta * 180 / $pi;	+	$delta = rad2deg($delta);

	if ($sweep == 0 && $delta > 0)		if ($sweep == 0 && $delta > 0)

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

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

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 49:		Line 49:
	'''Figure 6-1. Result of using moveto and lineto'''		'''Figure 6-1. Result of using moveto and lineto'''

-	[[Image:SVG ~~Essentials/I_6_tt98~~.png\|Result of using moveto	+	[[Image:SVG Essentials_I_6_tt98.png\|Result of using moveto
	and lineto]]		and lineto]]
	</div>		</div>
Line 104:		Line 104:
	'''Figure 6-2. Result of using closepath'''		'''Figure 6-2. Result of using closepath'''

-	[[Image:SVG ~~Essentials/I_6_tt99~~.png\|Result of using closepath]]	+	[[Image:SVG Essentials_I_6_tt99.png\|Result of using closepath]]
	</div>		</div>

Line 161:		Line 161:
	'''Figure 6-3. Result of drawing a diamond with a path'''		'''Figure 6-3. Result of drawing a diamond with a path'''

-	[[Image:SVG ~~Essentials/I_6_tt103~~.png\|Result of drawing a diamond with a	+	[[Image:SVG Essentials_I_6_tt103.png\|Result of drawing a diamond with a
	path]]		path]]
	</div>		</div>
Line 191:		Line 191:
	'''Figure 6-4. Variations of the elliptical arc command'''		'''Figure 6-4. Variations of the elliptical arc command'''

-	[[Image:SVG ~~Essentials/I_6_tt106~~.png\|Variations of the elliptical arc	+	[[Image:SVG Essentials_I_6_tt106.png\|Variations of the elliptical arc
	command]]		command]]
	</div>		</div>
Line 236:		Line 236:
	'''Figure 6-5. Result of using elliptical arc'''		'''Figure 6-5. Result of using elliptical arc'''

-	[[Image:SVG ~~Essentials/I_6_tt108~~.png\|Result of using elliptical arc]]	+	[[Image:SVG Essentials_I_6_tt108.png\|Result of using elliptical arc]]
	</div>		</div>

Line 562:		Line 562:
	'''Figure 6-6. How graphics programs draw Bézier curves'''		'''Figure 6-6. How graphics programs draw Bézier curves'''

-	[[Image:SVG ~~Essentials/I_6_tt113~~.png\|How graphics programs draw Bézier curves]]	+	[[Image:SVG Essentials_I_6_tt113.png\|How graphics programs draw Bézier curves]]
	</div>		</div>

Line 574:		Line 574:
	'''Figure 6-7. Visualizing a quadratic Bézier curve'''		'''Figure 6-7. Visualizing a quadratic Bézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt114~~.png\|Visualizing a quadratic Bézier curve]]	+	[[Image:SVG Essentials_I_6_tt114.png\|Visualizing a quadratic Bézier curve]]
	</div>		</div>

Line 590:		Line 590:
	'''Figure 6-8. Quadratic polybézier curve'''		'''Figure 6-8. Quadratic polybézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt117~~.png\|Quadratic polybézier curve]]	+	[[Image:SVG Essentials_I_6_tt117.png\|Quadratic polybézier curve]]
	</div>		</div>

Line 611:		Line 611:
	'''Figure 6-9. Smooth quadratic polybézier curve'''		'''Figure 6-9. Smooth quadratic polybézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt120~~.png\|Smooth quadratic polybézier curve]]	+	[[Image:SVG Essentials_I_6_tt120.png\|Smooth quadratic polybézier curve]]
	</div>		</div>

Line 623:		Line 623:
	'''Figure 6-10. Visualizing a cubic Bézier curve'''		'''Figure 6-10. Visualizing a cubic Bézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt121~~.png\|Visualizing a cubic Bézier curve]]	+	[[Image:SVG Essentials_I_6_tt121.png\|Visualizing a cubic Bézier curve]]
	</div>		</div>

Line 636:		Line 636:
	'''Figure 6-11. Result of cubic Bézier control point combinations'''		'''Figure 6-11. Result of cubic Bézier control point combinations'''

-	[[Image:SVG ~~Essentials/I_6_tt123~~.png\|Result of cubic Bézier control point combinations]]	+	[[Image:SVG Essentials_I_6_tt123.png\|Result of cubic Bézier control point combinations]]
	</div>		</div>

Line 646:		Line 646:
	'''Figure 6-12. Cubic polybézier curve'''		'''Figure 6-12. Cubic polybézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt125~~.png\|Cubic polybézier curve]]	+	[[Image:SVG Essentials_I_6_tt125.png\|Cubic polybézier curve]]
	</div>		</div>

Line 658:		Line 658:
	'''Figure 6-13. Smooth cubic polybézier curve'''		'''Figure 6-13. Smooth cubic polybézier curve'''

-	[[Image:SVG ~~Essentials/I_6_tt127~~.png\|Smooth cubic polybézier curve]]	+	[[Image:SVG Essentials_I_6_tt127.png\|Smooth cubic polybézier curve]]
	</div>		</div>

Line 749:		Line 749:
	'''Figure 6-14. Result of using different fill-rule values'''		'''Figure 6-14. Result of using different fill-rule values'''

-	[[Image:SVG ~~Essentials/I_6_tt137~~.png\|Result of using different	+	[[Image:SVG Essentials_I_6_tt137.png\|Result of using different
	fill-rule values]]		fill-rule values]]
	</div>		</div>
Line 763:		Line 763:
	'''Figure 6-15. Lines and arc'''		'''Figure 6-15. Lines and arc'''

-	[[Image:SVG ~~Essentials/I_6_tt139~~.png\|Lines and arc]]	+	[[Image:SVG Essentials_I_6_tt139.png\|Lines and arc]]
	</div>		</div>

Line 771:		Line 771:
	'''Figure 6-16. Lines and arc with markers'''		'''Figure 6-16. Lines and arc with markers'''

-	[[Image:SVG ~~Essentials/I_6_tt140~~.png\|Lines and arc with markers]]	+	[[Image:SVG Essentials_I_6_tt140.png\|Lines and arc with markers]]
	</div>		</div>

Line 797:		Line 797:
	'''Figure 6-17. Misplaced circular marker'''		'''Figure 6-17. Misplaced circular marker'''

-	[[Image:SVG ~~Essentials/I_6_tt141~~.png\|Misplaced circular marker]]	+	[[Image:SVG Essentials_I_6_tt141.png\|Misplaced circular marker]]
	</div>		</div>

Line 813:		Line 813:
	'''Figure 6-18. Correctly placed circular marker'''		'''Figure 6-18. Correctly placed circular marker'''

-	[[Image:SVG ~~Essentials/I_6_tt142~~.png\|Correctly placed circular marker]]	+	[[Image:SVG Essentials_I_6_tt142.png\|Correctly placed circular marker]]
	</div>		</div>

Line 848:		Line 848:
	'''Figure 6-19. Incorrectly oriented markers'''		'''Figure 6-19. Incorrectly oriented markers'''

-	[[Image:SVG ~~Essentials/I_6_tt143~~.png\|Incorrectly oriented markers]]	+	[[Image:SVG Essentials_I_6_tt143.png\|Incorrectly oriented markers]]
	</div>		</div>

Line 903:		Line 903:
	'''Figure 6-20. Using a single marker for all vertices'''		'''Figure 6-20. Using a single marker for all vertices'''

-	[[Image:SVG ~~Essentials/I_6_tt144~~.png\|Using a single marker for all vertices]]	+	[[Image:SVG Essentials_I_6_tt144.png\|Using a single marker for all vertices]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

2008-03-04T22:37:00Z

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
All of the basic shapes described in [[SVG Essentials/Basic Shapes|Chapter 3]] are really shorthand forms for the more general <tt><path></tt> element. You are well advised to use these shortcuts; they help make your SVG more readable and more structured. The <tt><path></tt> element is more general; it draws the outline of any arbitrary shape by specifying a series of connected lines, arcs, and curves. This outline can be filled and drawn with a stroke, just as the basic shapes are. Additionally, these paths (as well as the shorthand basic shapes) may be used to define the outline of a clipping area or a transparency mask, as you will see in [[SVG Essentials/Clipping and Masking|Chapter 9]].

All of the data describing an outline is in the <tt><path></tt> element's <tt>d</tt> attribute (the <tt>d</tt> stands for ''data''). The path data consists of one-letter commands, such as <tt>M</tt> for ''moveto'' or <tt>L</tt> for ''lineto'', followed by the coordinate information for that particular command.

== moveto, lineto, and closepath ==

Every path must begin with a ''moveto'' command. The command letter is a capital <tt>M</tt> followed by an ''x-'' and ''y-''coordinate, separated by commas or whitespace. This command sets the current location of the "pen" that's drawing the outline.

This is followed by one or more ''lineto'' commands, denoted by a capital <tt>L</tt>, also followed by ''x-'' and ''y-''coordinates, and separated by commas or whitespace. [[SVG Essentials/Paths#svgess-CHP-6-EX-1|Example 6-1]] has three paths. The first draws a single line, the second draws a right angle, and the third draws two thirty-degree angles. When you "pick up" the pen with another ''moveto'', you are starting a new subpath. Notice that the use of commas and whitespace as separators is different, but perfectly legal, in all three paths. The result is [[SVG Essentials/Paths#svgess-CHP-6-FIG-1|Figure 6-1]].

<div id="svgess-CHP-6-EX-1">
'''Example 6-1. Using moveto and lineto'''

<g style="stroke: black; fill: none;">

<path d="M 10 10 L 100 10"/>


<path d="M 10, 20 L 100, 20 L 100,50"/>


<path d="M 40 60, L 10 60, L 40 42.68,
M 60 60, L 90 60, L 60 42.68"/>
</g>
</div>

Examining the last path more closely:

{| border="1"
|-
! Value !! Action
|-
| <tt>M 40 60</tt> || Move pen to (40, 60)
|-
| <tt>L 10 60</tt> || Draw a line to (10, 60)
|-
| <tt>L 40 42.68</tt> || Draw a line to (40, 42.68)
|-
| <tt>M 60 60</tt> || Start a new subpath; move pen to (60, 60) — no line is drawn
|-
| <tt>L 90 60</tt> || Draw a line to (90, 60)
|-
| <tt>L 60 42.68</tt> || Draw a line to (60, 42.68)
|}

<div id="svgess-CHP-6-FIG-1">
'''Figure 6-1. Result of using moveto and lineto'''

[[Image:SVG Essentials/I_6_tt98.png|Result of using moveto
and lineto]]
</div>

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

You may have noticed that the path data doesn't look very much like the typical values for XML attributes. Because the entire path data is contained in one attribute rather than an individual element for each point or line segment, a path takes up less memory when read into a Document Object Model structure by an XML parser. Additionally, a path's compact notation allows a complex graphic to be transmitted without requiring a great deal of bandwidth.
</div>

If you want to use a <tt><path></tt> to draw a rectangle, you can draw all four lines, or you can draw the first three lines and then use the ''closepath'' command, denoted by a capital <tt>Z</tt>, to draw a straight line back to the beginning point of the current subpath. [[SVG Essentials/Paths#svgess-CHP-6-EX-2|Example 6-2]] is the SVG for [[SVG Essentials/Paths#svgess-CHP-6-FIG-2|Figure 6-2]], which shows a rectangle drawn the hard way, a rectangle drawn with ''closepath'', and a path that draws two triangles by opening and closing two subpaths.

<div id="svgess-CHP-6-EX-2">
'''Example 6-2. Using closepath'''

<g style="stroke: black; fill: none;">

<path d="M 10 10, L 40 10, L 40 30, L 10 30, L 10 10"/>


<path d="M 60 10, L 90 10, L 90 30, L 60 30, Z"/>


<path d="M 40 60, L 10 60, L 40 42.68, Z
M 60 60, L 90 60, L 60 42.68, Z"/>
</g>
</div>

Examining the last path more closely:

{| border="1"
|-
! Value !! Action
|-
| <tt>M 40 60</tt> || Move pen to (40, 50)
|-
| <tt>L 10 60</tt> || Draw a line to (10, 60)
|-
| <tt>L 40 42.68</tt> || Draw a line to (40, 42.68)
|-
| <tt>Z</tt> || Close path by drawing a straight line to (40, 60), where this subpath began
|-
| <tt>M 60 60</tt> || Start a new subpath; move pen to (60, 60) — no line is drawn
|-
| <tt>L 90 60</tt> || Draw a line to (90, 60)
|-
| <tt>L 60 42.68</tt> || Draw a line to (60, 42.68)
|-
| <tt>Z</tt> || Close path by drawing a straight line to (60, 60), where this subpath began
|}

<div id="svgess-CHP-6-FIG-2">
'''Figure 6-2. Result of using closepath'''

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

== Relative moveto and lineto ==

The preceding commands are all represented by uppercase letters, and the coordinates are presumed to be ''absolute'' coordinates. If you use a lowercase command letter, the coordinates are interpreted as being ''relative'' to the current pen position. Thus, the following two paths are equivalent:

<path d="M 10 10 L 20 10 L 20 30 M 40 40 L 55 35"
style="stroke: black;"/>
<path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5"
style="stroke: black;"/>

If you start a path with a lowercase <tt>m</tt> (''moveto''), its coordinates will be interpreted as an absolute position since there's no previous pen position from which to calculate a relative position. All the other commands in this chapter also have the same upper- and lowercase distinction. An uppercase command's coordinates are absolute and a lowercase command's coordinates are relative. The ''closepath'' command, which has no coordinates, has the same effect in both upper- and lowercase.

== Path Shortcuts ==

If content is king and design is queen, then bandwidth efficiency is the royal courtier who keeps the palace running smoothly. Since any non-trivial drawing will have paths with many tens of coordinate pairs, the <tt><path></tt> element has shortcuts that allow you to represent a path in as few bytes as possible.

=== The Horizontal lineto and Vertical lineto Commands ===

Since horizontal and vertical lines are so common, a path may specify a horizontal line with an <tt>H</tt> command followed by an absolute ''x''-coordinate or an <tt>h</tt> command followed by a relative ''x''-coordinate. Similarly, a vertical line is specified with a <tt>V</tt> command followed by an absolute ''y''-coordinate or a <tt>v</tt> command followed by a relative ''y''-coordinate.

{| border="1"
|-
! Shortcut !! Equivalent to !! Effect
|-
| <tt>H 20</tt> || <tt>L 20 ''current_y''</tt> || Draws a line to absolute location (20, <tt>''current_y''</tt>)
|-
| <tt>h 20</tt> || <tt>l 20 0</tt> || Draws a line to (<tt>''current_x''</tt>+20, <tt>''current_y''</tt>)
|-
| <tt>V 20</tt> || <tt>L ''current_x'' 20</tt> || Draws a line to absolute location (<tt>''current_x''</tt>, 20)
|-
| <tt>v 20</tt> || <tt>l ''current_x'' 20</tt> || Draws a line to location (<tt>''current_x''</tt>, <tt>''current_y''</tt>+20)
|}

Thus, the following path draws a rectangle 15 units in width and 25 units in height, with the upper left corner at coordinates (12, 24).

<path d="M 12 24 h 15 v 25 h -15 z"/>

=== Notational Shortcuts for a Path ===

Paths can also be made shorter by applying the following two rules:

<ol>
<li><div>You may place multiple sets of coordinates after an <tt>L</tt> or <tt>l</tt>, just as you do in the <tt><polyline></tt> element. The following six paths all draw the same diamond that is shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-3|Figure 6-3]]; the first three are in absolute coordinates and the last three in relative coordinates. The third and sixth paths have an interesting twist — if you place multiple pairs of coordinates after a ''moveto'', all the pairs after the first are presumed to be preceded by a ''lineto''.<ref>You can also put multiple single coordinates after an ''horizontal lineto'' or ''vertical lineto'', although it's rather pointless to do so. <tt>H 25 35 45</tt> is the same as <tt>H 45</tt>, and <tt>v 11 13 15</tt> is the same as <tt>v 39</tt>.</ref>

<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z"/>
<path d="M 30 30 L 55 5 80 30 55 55 Z"/>
<path d="M 30 30 55 5 80 30 55 55 Z"/>
<path d="m 30 30 l 25 -25 l 25 25 l -25 25 z"/>
<path d="m 30 30 l 25 -25 25 25 -25 25 z"/>
<path d="m 30 30 25 -25 25 25 -25 25 z"/>

<div id="svgess-CHP-6-FIG-3">
'''Figure 6-3. Result of drawing a diamond with a path'''

[[Image:SVG Essentials/I_6_tt103.png|Result of drawing a diamond with a
path]]
</div>
</div></li>

<li><div>Any whitespace that is not necessary may be eliminated. You don't need a blank after a command letter since all commands are one letter only. You don't need a blank between a number and a command since the command letter can't be part of the number. You don't need a blank between a positive and a negative number since the leading minus sign of the negative number can't be a part of the positive number. This lets you reduce the third and sixth paths in the preceding listing even further:

<path d="M30 30 55 5 80 30 55 55Z"/>
<path d="m30 30 25-25 25 25-25 25z"/>

Another example of the whitespace elimination rule in action is shown by the example that drew a rectangle 15 units in width and 25 units in height, with the upper left corner at coordinates (12, 24):

<path d="M 12 24 h 15 v 25 h -15 z"/> 
<path d="M12 24h15v25h-15z"/> 
</div></li>

</ol>

== Elliptical Arc ==

Lines are simple; two points on a path uniquely determine the line segment between them. Since an infinite number of curves can be drawn between two points, you must give additional information to draw a curved path between them. The simplest of the curves we will examine is the elliptical arc — that is, drawing a section of an ellipse that connects two points.

Although arcs are visually the simplest curves, specifying a unique arc requires the ''most'' information. The first pieces of information you need to specify are the ''x''- and ''y''-radii of the ellipse on which the points lie. This narrows it down to two possible ellipses, as you can see in section (a) of [[SVG Essentials/Paths#svgess-CHP-6-FIG-4|Figure 6-4]]. The two points divide the two ellipses into four arcs. Two of them, (b) and (c), are arcs that measure less than 180 degrees. The other two, (d) and (e) are greater than 180 degrees. If you look at (b) and (c), you will notice that they are differentiated by their direction; (b) is drawn in the direction of increasing negative angle, and (c) in the direction of increasing positive angle. The same relationship holds true between (d) and (e).

But wait — we still haven't uniquely specified the potential arcs! There's no law that says that the ellipse has to have its ''x''-radius parallel to the ''x''-axis. Part (f) of [[SVG Essentials/Paths#svgess-CHP-6-FIG-4|Figure 6-4]] shows the two points with their candidate ellipses rotated thirty degrees with respect to the ''x''-axis.

<div id="svgess-CHP-6-FIG-4">
'''Figure 6-4. Variations of the elliptical arc command'''

[[Image:SVG Essentials/I_6_tt106.png|Variations of the elliptical arc
command]]
</div>

([[SVG Essentials/Paths#svgess-CHP-6-FIG-4|Figure 6-4]] is adapted from the one found in section 8.3.8 of the World Wide Web Consortium's SVG specification.)

Thus, an arc command begins with the <tt>A</tt> abbreviation for absolute coordinates or <tt>a</tt> for relative coordinates, and is followed by seven parameters:

* The ''x''- and ''y''-radius of the ellipse on which the points lie.
* The <tt>''x-axis-rotation''</tt> of the ellipse.
* The <tt>''large-arc-flag''</tt>, which is zero if the arc's measure is less than 180 degrees, or one if the arc's measure is greater than or equal to 180 degrees.
* The <tt>''sweep-flag''</tt>, which is zero if the arc is to be drawn in the negative angle direction, or one if the arc is to be drawn in the positive angle direction.
* The ending ''x''- and ''y''- coordinates of the ending point. (The starting point is determined by the last point drawn or the last ''moveto'' command.)

Here are the paths used to draw the elliptical arcs in sections (b) through (e) of [[SVG Essentials/Paths#svgess-CHP-6-FIG-4|Figure 6-4]]:

<path d="M 125,75 A100,50 0 0,0 225,125"/> 
<path d="M 125,75 A100,50 0 0,1 225,125"/> 
<path d="M 125,75 A100,50 0 1,0 225,125"/> 
<path d="M 125,75 A100,50 0 1,1 225,125"/> 

As a further example, let's enhance the background that we started in [[SVG Essentials/Document Structure#svgess-CHP-4-EX-8|Example 4-8]] to complete the yin/yang symbol that is part of the Korean flag. [[SVG Essentials/Paths#svgess-CHP-6-EX-3|Example 6-3]] keeps the full ellipses as <tt><ellipse></tt> elements, but creates the semicircles that it needs with paths. The result is shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-5|Figure 6-5]].

<div id="svgess-CHP-6-EX-3">
'''Example 6-3. Using elliptical arc'''


<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/>


<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/>


<path d="M 302 152 A 150 120, 0, 1, 0, 2 152
A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/>


<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/>
</div>

<div id="svgess-CHP-6-FIG-5">
'''Figure 6-5. Result of using elliptical arc'''

[[Image:SVG Essentials/I_6_tt108.png|Result of using elliptical arc]]
</div>

== Technique: Converting from Other Arc Formats ==

Some other vector graphics systems let you specify an arc by defining a center point for the ellipse, its ''x''- and ''y''-radius, the starting angle, and the extent of the angle's arc. This is a straightforward method of specification, and is excellent for drawing arcs as single objects. This, paradoxically, is exactly why SVG instead chooses such a seemingly eccentric method to specify arcs. In SVG, an arc is not presumed to be living in lonely splendor; it is intended to be part of a connected path of lines and curves. (For example, a rounded rectangle is precisely that — a series of lines and elliptical arcs.) Thus, it makes sense to specify an arc by its endpoints.

Sometimes, though, you do want an isolated semicircle (or, more accurately, semi-ellipse). Presume that you have an ellipse specified as:

<ellipse cx="''cx''" cy="''cy''" rx="''rx''" ry="''ry''"/>

Here are the paths to draw the four possible semi-ellipses:


<path d="M ''cx''-''rx''
''cy'' A ''rx''
''ry'' 0 1 1 ''cx''+''rx''
''cy''"/>

<path d="M ''cx''-''rx''
''cy'' A ''rx''
''ry'' 0 1 0 ''cx''+''rx''
''cy''"/>

<path d="M ''cx''
''cy''-''ry'' A ''rx''
''ry'' 0 1 1 ''cx''
''cy''+''ry''"/>

<path d="M ''cx''
''cy''-''ry'' A ''rx''
''ry'' 0 1 0 ''cx''
''cy''+''ry''"/>

For the more general case, when you wish to draw an arbitrary arc that has been specified in "center-and-angles" notation and wish to convert it to SVG's "endpoint-and-sweep" format, use the following Perl script. It prompts you for center coordinates, radii, starting angle, and angle extent. The output is a <tt><path></tt> tag that you can insert into your SVG files.

#!/usr/bin/perl

#
# Convert an elliptical arc based around a central point
# to an elliptical arc parameterized for SVG.
#
# Input is a list containing:
# center x coordinate
# center y coordinate
# x-radius of ellipse
# y-radius of ellipse
# beginning angle of arc in degrees
# arc extent in degrees
# x-axis rotation angle in degrees
#
# Output is a list containing:
#
# x-coordinate of beginning of arc
# y-coordinate of beginning of arc
# x-radius of ellipse
# y-radius of ellipse
# large-arc-flag as defined in SVG specification
# sweep-flag as defined in SVG specification
# x-coordinate of endpoint of arc
# y-coordinate of endpoint of arc
#
sub convert_to_svg
{
my ($cx, $cy, $rx, $ry, $theta1, $delta, $phi) = @_;
my ($theta2, $pi);
my ($x0, $y0, $x1, $y1, $large_arc, $sweep);

#
# Convert angles to radians
#
$pi = atan2(1,1) * 4; # approximation of pi

$theta2 = $delta + $theta1;
$theta1 = $theta1 * $pi / 180.0;
$theta2 = $theta2 * $pi / 180.0;
$phi_r = $phi * $pi / 180.0;

#
# Figure out the coordinates of the beginning and
# ending points
#
$x0 = $cx + cos($phi_r) * $rx * cos($theta1) +
sin(-$phi_r) * $ry * sin($theta1);
$y0 = $cy + sin($phi_r) * $rx * cos($theta1) +
cos($phi_r) * $ry * sin($theta1);

$x1 = $cx + cos($phi_r) * $rx * cos($theta2) +
sin(-$phi_r) * $ry * sin($theta2);
$y1 = $cy + sin($phi_r) * $rx * cos($theta2) +
cos($phi_r) * $ry * sin($theta2);

$large_arc = ($delta > 180) ? 1 : 0;
$sweep = ($delta > 0) ? 1 : 0;

return ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x1, $y1);
}

#
# Request input
#
print "Enter center x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($cx, $cy) = split /\s+/, $data;

print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;

print "Enter starting angle in degrees > ";
$theta = <>;
chomp $theta;

print "Enter angle extent in degrees > ";
$delta = <>;
chomp $delta;

print "Enter angle of rotation in degrees > ";
$phi = <>;
chomp $phi;

#
# Echo original data
#
print "(cx,cy)=($cx,$cy) rx=$rx ry=$ry ",
"start angle=$theta extent=$delta rotate=$phi\n";

($x0, $y0, $rx, $ry, $phi, $large_arc_flag, $sweep_flag, $x1, $y1) =
convert_to_svg( $cx, $cy, $rx, $ry, $theta, $delta, $phi);

#
# Produce a <path> element that fits the
# specifications
#
print "<path d=\"M $x0 $y0 ", # Moveto initial point
"A $rx $ry ", # Arc command and radii,
"$phi ", # angle of rotation,
"$large_arc_flag ", # the "large-arc" flag,
"$sweep_flag ", # the "sweep" flag,
"$x1 $y1\"/>\n"; # and the endpoint

If you wish to convert from the SVG format to a "center-and-angles" format, the mathematics is considerably more complex. You can see the formulas in detail in the SVG specification. This Perl script was adapted from the code in the Apache XML Batik project.

#!/usr/bin/perl

sub acos
{
atan2( sqrt(1 - $_[0] * $_[0]), $_[0] );
}

#
# Convert an elliptical arc based around a central point
# to an elliptical arc parameterized for SVG.
#
# Input is a list containing:
#
# x-coordinate of beginning of arc
# y-coordinate of beginning of arc
# x-radius of ellipse
# y-radius of ellipse
# large-arc-flag as defined in SVG specification
# sweep-flag as defined in SVG specification
# x-coordinate of endpoint of arc
# y-coordinate of endpoint of arc
#
# Output is a list containing:
# center x coordinate
# center y coordinate
# x-radius of ellipse
# y-radius of ellipse
# beginning angle of arc in degrees
# arc extent in degrees
# x-axis rotation angle in degrees
#

sub convert_from_svg
{
my ($x0, $y0, $rx, $ry, $phi, $large_arc, $sweep, $x, $y) = @_;
my ($cx, $cy, $theta, $delta, $phi);

# a plethora of temporary variables
my (
$dx2, $dy2, $phi_r, $x1, $y1,
$rx_sq, $ry_sq,
$x1_sq, $y1_sq,
$sign, $sq, $coef,
$cx1, $cy1, $sx2, $sy2,
$p, $n,
$ux, $uy, $vx, $vy
);

# Compute 1/2 distance between current and final point
$dx2 = ($x0 - $x) / 2.0;
$dy2 = ($y0 - $y) / 2.0;

# Convert from degrees to radians
$pi = atan2(1, 1) * 4.0;
$phi %= 360;
$phi_r = $phi * $pi / 180.0;

# Compute (x1, y1)
$x1 = cos($phi_r) * $dx2 + sin($phi_r) * $dy2;
$y1 = -sin($phi_r) * $dx2 + cos($phi_r) * $dy2;

# Make sure radii are large enough
$rx = abs($rx); $ry = abs($ry);
$rx_sq = $rx * $rx;
$ry_sq = $ry * $ry;
$x1_sq = $x1 * $x1;
$y1_sq = $y1 * $y1;

$radius_check = ($x1_sq / $rx_sq) + ($y1_sq / $ry_sq);
if ($radius_check > 1)
{
$rx *= sqrt($radius_check);
$ry *= sqrt($adius_check);
$rx_sq = $rx * $rx;
$ry_sq = $ry * $ry;
}

# Step 2: Compute (cx1, cy1)

$sign = ($large_arc == $sweep) ? -1 : 1;
$sq = (($rx_sq * $ry_sq) - ($rx_sq * $y1_sq) - ($ry_sq * $x1_sq)) /
(($rx_sq * $y1_sq) + ($ry_sq * $x1_sq));
$sq = ($sq < 0) ? 0 : $sq;
$coef = ($sign * sqrt($sq));
$cx1 = $coef * (($rx * $y1) / $ry);
$cy1 = $coef * -(($ry * $x1) / $rx);

# Step 3: Compute (cx, cy) from (cx1, cy1)

$sx2 = ($x0 + $x) / 2.0;
$sy2 = ($y0 + $y) / 2.0;

$cx = $sx2 + (cos($phi_r) * $cx1 - sin($phi_r) * $cy1);
$cy = $sy2 + (sin($phi_r) * $cx1 + cos($phi_r) * $cy1);

# Step 4: Compute angle start and angle extent

$ux = ($x1 - $cx1) / $rx;
$uy = ($y1 - $cy1) / $ry;
$vx = (-$x1 - $cx1) / $rx;
$vy = (-$y1 - $cy1) / $ry;
$n = sqrt( ($ux * $ux) + ($uy * $uy) );
$p = $ux; # 1 * ux + 0 * uy
$sign = ($uy < 0) ? -1 : 1;

$theta = $sign * acos( $p / $n );
$theta = $theta * 180 / $pi;

$n = sqrt(($ux * $ux + $uy * $uy) * ($vx * $vx + $vy * $vy));
$p = $ux * $vx + $uy * $vy;
$sign = (($ux * $vy - $uy * $vx) < 0) ? -1 : 1;
$delta = $sign * acos( $p / $n );
$delta = $delta * 180 / $pi;

if ($sweep == 0 && $delta > 0)
{
$delta -= 360;
}
elsif ($sweep == 1 && $delta < 0)
{
$delta += 360;
}

$delta %= 360;
$theta %= 360;

return ($cx, $cy, $rx, $ry, $theta, $delta, $phi);
}

#
# Request input
#
print "Enter starting x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x0, $y0) = split /\s+/, $data;

print "Enter ending x,y coordinates > ";
$data = <>;
$data =~ s/,/ /g;
($x, $y) = split /\s+/, $data;

print "Enter x and y radii > ";
$data = <>;
$data =~ s/,/ /g;
($rx, $ry) = split/\s+/, $data;

print "Enter rotation angle in degrees ";
$phi = <>;
chomp $phi;

print "Large arc flag (0=no, 1=yes) > ";
$large_arc = <>;
chomp $large_arc;

print "Sweep flag (0=negative, 1=positive) > ";
$sweep = <>;
chomp $sweep;

print "From ($x0,$y0) to ($x,$y) rotate $phi",
" large arc=$large_arc sweep=$sweep\n";

($cx, $cy, $rx, $ry, $theta, $delta, $phi) =
convert_from_svg( $x0, $y0, $rx, $ry, $phi, $large_arc, $sweep,
$x, $y );

print "Ellipse center = ($cx, $cy)\n";
print "Start angle = $theta\n";
print "Angle extent = $delta\n";

== Bézier Curves ==

Arcs can be characterized as clean and functional, but one would rarely use the word "graceful" to describe them. If you want graceful, you need to use curves which are produced by graphing quadratic and cubic equations. Mathematicians have known about these curves for literally hundreds of years, but drawing them was always a computationally demanding task. This changed when Pierre Bézier, working for French car manufacturer Rénault and Paul de Casteljau, an engineer for Citroën, independently discovered a computationally convenient way to generate these curves.

If you have used graphics programs like Adobe Illustrator, you draw these Bézier curves by specifying two points and then moving a "handle" as shown in the following diagram. The end of this handle is called the control point, because it controls the shape of the curve. As you move the handle, the curve changes in a way that, to the uninitiated, is completely mystifying. Mike Woodburn, a graphic designer at Key Point Software, suggests [[SVG Essentials/Paths#svgess-CHP-6-FIG-6|Figure 6-6]] as a way to visualize how the control point and the curve interact: imagine that the line is made of flexible metal. Inside the control point is a magnet; the closer a point is to the control point, the more strongly it is attracted.

<div id="svgess-CHP-6-FIG-6">
'''Figure 6-6. How graphics programs draw Bézier curves'''

[[Image:SVG Essentials/I_6_tt113.png|How graphics programs draw Bézier curves]]
</div>

Another way to visualize the role of the control point is based on the de Casteljau method of constructing the curves. We will use this approach in the following sections. For further details on the underlying mathematics, presented in a remarkably lucid fashion, see this web site: ''http://graphics.cs.ucdavis.edu/GraphicsNotes/Bezier-Curves/Bezier-Curves.html''.

=== Quadratic Bézier Curves ===

The simplest of the Bézier curves is the quadratic curve. You specify a beginning point, an ending point, and a control point. Imagine two tent poles placed at the endpoints of the line. These tent poles meet at the control point. Stretched between the centers of the tent poles is a rubber band. The place where the curve bends is tied to the exact center of that rubber band. This situation is shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-7|Figure 6-7]].

<div id="svgess-CHP-6-FIG-7">
'''Figure 6-7. Visualizing a quadratic Bézier curve'''

[[Image:SVG Essentials/I_6_tt114.png|Visualizing a quadratic Bézier curve]]
</div>

Programs like Adobe Illustrator show you only one of the "tent poles." The next time you're using such a program, mentally add in the second pole and the resulting curves will be far less mysterious.

That's the concept; now for the practical matter of actually producing such a curve in SVG. You specify a quadratic curve in a <tt><path></tt> data with the <tt>Q</tt> or <tt>q</tt> command. The command is followed by two sets of coordinates that specify a control point and an endpoint. The uppercase command implies absolute coordinates; lowercase implies relative coordinates. The curve in [[SVG Essentials/Paths#svgess-CHP-6-FIG-7|Figure 6-7]] was drawn from (30, 75) to (300, 120) with the control point at (240, 30), and was specified in SVG as follows:

<path d="M30 75 Q 240 30, 300 120" style="stroke: black; fill: none;"/>

You may specify several sets of coordinates after a quadratic curve command. This will generate a polybézier curve. Presume you want a <tt><path></tt> that draws a curve from (30, 100) to (100, 100) with a control point at (80, 30) and then continues with a curve to (200, 80) with a control point at (130, 65). Here is the SVG for this path, with control point coordinates in bold. The result is shown in the left half of [[SVG Essentials/Paths#svgess-CHP-6-FIG-8|Figure 6-8]]; the control points and lines are shown in the right half of the figure.

<path d="M30 100 Q '''80 30''', 100 100, '''130 65''', 200 80"/>

<div id="svgess-CHP-6-FIG-8">
'''Figure 6-8. Quadratic polybézier curve'''

[[Image:SVG Essentials/I_6_tt117.png|Quadratic polybézier curve]]
</div>

You are probably wondering, "What happened to `graceful?' That curve is just lumpy." This is an accurate assessment. Just because curves are connected doesn't mean that they will look good together. That's why SVG provides the ''smooth quadratic curve'' command, which is denoted by the letter <tt>T</tt> (or <tt>t</tt> if you want to use relative coordinates). The command is followed by the next endpoint of the curve; the control point is calculated automatically, as the specification says, by "reflection of the control point on the previous command relative to the current point."

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

For the mathematically inclined, the new control point <tt>''x2''</tt>, <tt>''y2''</tt> is calculated from the curve's starting point <tt>''x''</tt>, <tt>''y''</tt> and the previous control point <tt>''x1''</tt>, <tt>''y1''</tt> with these formulas:

x2 = 2 * x - x1
y2 = 2 * y - y1
</div>

Here is a quadratic Bézier curve drawn from (30, 100) to (100, 100) with a control point at (80, 30) and then smoothly continued to (200, 80). The left half of [[SVG Essentials/Paths#svgess-CHP-6-FIG-9|Figure 6-9]] shows the curve; the right half shows the control points. The reflected control point is shown with a dashed line. Gracefulness has returned!

<path d="M30 100 Q 80 30, 100 100 T 200 80"/>

<div id="svgess-CHP-6-FIG-9">
'''Figure 6-9. Smooth quadratic polybézier curve'''

[[Image:SVG Essentials/I_6_tt120.png|Smooth quadratic polybézier curve]]
</div>

=== Cubic Bézier Curves ===

A single quadratic Bézier curve has exactly one inflection point (the point where the curve changes direction). While these curves are more versatile than simple arcs, we can do even better by using cubic Bézier curves, which can have one or two inflection points.

The difference between the quadratic and cubic curves is that the cubic curve has two control points, one for each endpoint. The technique for generating the cubic curve is similar to that for generating the quadratic curve. You draw three lines that connect the endpoints and control points (a), and connect their midpoints. That produces two lines (b). You connect ''their'' midpoints, and that produces one line (c), whose midpoint determines one of the points on the final curve.<ref>We're dispensing with the tent analogy; it gets too unwieldy. Curves based on yurts and geodesic domes are left as exercises for the reader.</ref> See [[SVG Essentials/Paths#svgess-CHP-6-FIG-10|Figure 6-10]].

<div id="svgess-CHP-6-FIG-10">
'''Figure 6-10. Visualizing a cubic Bézier curve'''

[[Image:SVG Essentials/I_6_tt121.png|Visualizing a cubic Bézier curve]]
</div>

To specify such a cubic curve, use the <tt>C</tt> or <tt>c</tt> command. The command is followed by three sets of coordinates that specify the control point for the start point, the control point for the end point, and the end point. As with all the other path commands, an uppercase command implies absolute coordinates; lowercase implies relative coordinates. The curve in the preceding diagram was drawn from (20, 80) to (200, 120) with control points at (50, 20) and (150, 60). The SVG for the path was as follows:

<path d="M20 80 C 50 20, 150 60, 200 120"
style="stroke: black; fill: none;"/>

There are many interesting curves you can draw, depending upon the relationship of the control points (see [[SVG Essentials/Paths#svgess-CHP-6-FIG-11|Figure 6-11]]). To make the graphic cleaner, we show only the lines from each endpoint to its control point.

<div id="svgess-CHP-6-FIG-11">
'''Figure 6-11. Result of cubic Bézier control point combinations'''

[[Image:SVG Essentials/I_6_tt123.png|Result of cubic Bézier control point combinations]]
</div>

As with quadratic curves, you can construct a cubic polybézier by specifying several sets of coordinates after a cubic curve command. The last point of the first curve becomes the first point of the next curve, and so on. Here is a <tt><path></tt> that draws a cubic curve from (30, 100) to (100, 100) with control points at (50, 50) and (70, 20); it is immediately followed by a curve that doubles back to (65, 100) with control points at (110, 130) and (45, 150). Here is the SVG for this path, with control point coordinates in bold. The result is shown in the left half of [[SVG Essentials/Paths#svgess-CHP-6-FIG-12|Figure 6-12]]; the control points and lines are shown in the right half of the diagram.

<path d="M30 100 C '''50 50, 70 20''', 100 100, '''110, 130, 45, 150''', 65, 100"/>

<div id="svgess-CHP-6-FIG-12">
'''Figure 6-12. Cubic polybézier curve'''

[[Image:SVG Essentials/I_6_tt125.png|Cubic polybézier curve]]
</div>

If you want to guarantee a smooth join between curves, you can use the <tt>S</tt> command (or <tt>s</tt> if you want to use relative coordinates). In a manner analogous to that of the <tt>T</tt> command for quadratic curves, the new curve will take the previous curve's endpoint as its starting point, and the first control point will be the reflection of the previous ending control point. All you need to supply will be the control point for the next endpoint on the curve, followed by the next endpoint itself.

Here is a cubic Bézier curve drawn from (30, 100) to (100, 100) with control points at (50, 30) and (70, 50). It continues smoothly to (200, 80), using (150, 40) as its ending control point. The upper half shows the curve; the lower half shows the control points. The reflected control point is shown with a dashed line in [[SVG Essentials/Paths#svgess-CHP-6-FIG-13|Figure 6-13]].

<path d="M30 100 C 50 30, 70 50, 100 100 S 150 40, 200 80"/>

<div id="svgess-CHP-6-FIG-13">
'''Figure 6-13. Smooth cubic polybézier curve'''

[[Image:SVG Essentials/I_6_tt127.png|Smooth cubic polybézier curve]]
</div>

== Path Reference Summary ==

In [[SVG Essentials/Paths#svgess-CHP-6-TABLE-1|Table 6-1]], uppercase commands use absolute coordinates and lowercase commands use relative coordinates.

<div id="svgess-CHP-6-TABLE-1">
'''Table 6-1. Path commands'''

{| border="1"
|-
! Command !! Arguments !! Effect
|-
|

M
m
| <tt>''x y''</tt> || Move to given coordinates.
|-
|

L
l
| <tt>''x y''</tt> || Draw a line to the given coordinates. You may supply multiple sets of coordinates to draw a polyline.
|-
|

H
h
| <tt>''x''</tt> || Draw a horizontal line to the given ''x''-coordinate.
|-
|

V
v
| <tt>''y''</tt> || Draw a vertical line to the given ''x''-coordinate.
|-
|

A
a
| <tt>''rx ry x-axis-rotation large-arc sweep x y''</tt> || Draw an elliptical arc from the current point to (<tt>''x''</tt>, <tt>''y''</tt>). The points are on an ellipse with ''x''-radius <tt>''rx''</tt> and ''y''-radius <tt>''ry''</tt>. The ellipse is rotated <tt>''x-axis-rotation''</tt> degrees. If the arc is less than 180 degrees, <tt>''large-arc''</tt> is zero; if greater than 180 degrees, <tt>''large-arc''</tt> is one. If the arc is to be drawn in the positive direction, <tt>''sweep''</tt> is one; otherwise it is zero.
|-
|

Q
q
| <tt>''x1 y1 x y''</tt> || Draw a quadratic Bézier curve from the current point to (<tt>''x''</tt>, <tt>''y''</tt>) using control point (<tt>''x1''</tt>, <tt>''y1''</tt>).
|-
|

T
t
| <tt>''x y''</tt> || Draw a quadratic Bézier curve from the current point to (<tt>''x''</tt>, <tt>''y''</tt>). The control point will be the reflection of the previous <tt>Q</tt> command's control point. If there is no previous curve, the current point will be used as the control point.
|-
|

C
c
| <tt>''x1 y1 x2 y2 x y''</tt> || Draw a cubic Bézier curve from the current point to (<tt>''x''</tt>, <tt>''y''</tt>) using control point (<tt>''x1''</tt>, <tt>''y1''</tt>) as the control point for the beginning of the curve and (<tt>''x2''</tt>, <tt>''y2''</tt>) as the control point for the endpoint of the curve.
|-
|

S
s
| <tt>''x2 y2 x y''</tt> || Draw a cubic Bézier curve from the current point to (<tt>''x''</tt>, <tt>''y''</tt>), using (<tt>''x2''</tt>, <tt>''y2''</tt>) as the control point for this new endpoint. The first control point will be the reflection of the previous <tt>C</tt> command's ending control point. If there is no previous curve, the current point will be used as the first control point.
|}
</div>

== Paths and Filling ==

The information described in [[SVG Essentials/Basic Shapes|Chapter 3]] in [[SVG Essentials/Basic Shapes#Filling Polygons That Have Intersecting Lines|Section 3.5.1]] is also applicable to paths, which can not only have intersecting lines, but can also have "holes" in them. Consider the paths in [[SVG Essentials/Paths#svgess-CHP-6-EX-4|Example 6-4]], both of which draw nested squares. In the first path, both squares are drawn clockwise; in the second path, the outer square is drawn clockwise and the inner square is drawn counterclockwise.

<div id="svgess-CHP-6-EX-4">
'''Example 6-4. Using different fill-rule values on paths'''


<path d="M 0 0, 60 0, 60 60, 0 60 Z
M 15 15, 45 15, 45 45, 15 45Z"/>


<path d="M 0 0, 60 0, 60 60, 0 60 Z
M 15 15, 15 45, 45 45, 45 15Z"/>
</div>

[[SVG Essentials/Paths#svgess-CHP-6-FIG-14|Figure 6-14]] shows that there is a difference when you use a <tt>fill-rule</tt> of <tt>nonzero</tt>, which takes into account the direction of the lines when determining whether a point is inside or outside a path. Using a <tt>fill-rule</tt> of <tt>evenodd</tt> produces the same result for both paths; it uses total number of lines crossed and ignores their direction.

<div id="svgess-CHP-6-FIG-14">
'''Figure 6-14. Result of using different fill-rule values'''

[[Image:SVG Essentials/I_6_tt137.png|Result of using different
fill-rule values]]
</div>

== The marker element ==

Let us presume the following path, which uses a line, an elliptical arc, and another line to draw the rounded corner in [[SVG Essentials/Paths#svgess-CHP-6-FIG-15|Figure 6-15]]:

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="fill: none; stroke: black;"/>

<div id="svgess-CHP-6-FIG-15">
'''Figure 6-15. Lines and arc'''

[[Image:SVG Essentials/I_6_tt139.png|Lines and arc]]
</div>

We'd like to mark the direction of the path by putting a circle at the beginning, a solid triangle at the end, and arrowheads at the other vertices, as shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-16|Figure 6-16]]. To achieve this effect, we will construct three <tt><marker></tt> elements and tell the <tt><path></tt> to reference them.

<div id="svgess-CHP-6-FIG-16">
'''Figure 6-16. Lines and arc with markers'''

[[Image:SVG Essentials/I_6_tt140.png|Lines and arc with markers]]
</div>

Let's start with [[SVG Essentials/Paths#svgess-CHP-6-EX-5|Example 6-5]], which adds the circular marker. A marker is a "self-contained" graphic with its own private set of coordinates, so you have to specify its <tt>markerWidth</tt> and <tt>markerHeight</tt> height in the starting <tt><marker></tt> tag. That is followed by the SVG elements required to draw the marker, and ends with a closing <tt></marker></tt>. A <tt><marker></tt> element does not display by itself, but we are putting it in a <tt><defs></tt> element because that's where reusable elements belong.

Since we want the circle to be at the beginning of the path, we add a <tt>marker-start</tt> to the <tt>style</tt> in the <tt><path></tt>.<ref>Yes, markers are considered to be part of presentation rather than structure. This is one of those gray areas where you could argue either case.</ref> The value of this property is a URL reference to the <tt><marker></tt> element we've just created.

<div id="svgess-CHP-6-EX-5">
'''Example 6-5. First attempt at circular marker'''

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="'''marker-start: url(#mCircle);'''
fill: none; stroke: black;"/>
</div>

The result in [[SVG Essentials/Paths#svgess-CHP-6-FIG-17|Figure 6-17]] is not quite what we planned...

<div id="svgess-CHP-6-FIG-17">
'''Figure 6-17. Misplaced circular marker'''

[[Image:SVG Essentials/I_6_tt141.png|Misplaced circular marker]]
</div>

The reason the circle appears in the wrong place is that, by default, the start marker's (0, 0) point is aligned with the beginning coordinate of the path. [[SVG Essentials/Paths#svgess-CHP-6-EX-6|Example 6-6]] adds <tt>refX</tt> and <tt>refY</tt> attributes that tell which coordinates (in the marker's system) are to align with the beginning coordinate. Once these are added, the circular marker appears exactly where it is desired in [[SVG Essentials/Paths#svgess-CHP-6-FIG-18|Figure 6-18]].

<div id="svgess-CHP-6-EX-6">
'''Example 6-6. Correctly placed circular marker'''

<marker id="mCircle" markerWidth="10" markerHeight="10" '''refX="5" refY="5"'''>
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</div>

<div id="svgess-CHP-6-FIG-18">
'''Figure 6-18. Correctly placed circular marker'''

[[Image:SVG Essentials/I_6_tt142.png|Correctly placed circular marker]]
</div>

Given this information, we can now write [[SVG Essentials/Paths#svgess-CHP-6-EX-7|Example 6-7]], which adds the triangular marker and references it as the <tt>marker-end</tt> for the path. Then we can add the arrowhead marker and reference it as the <tt>marker-mid</tt>. The <tt>marker-mid</tt> will be attached to every vertex except the beginning and end of the path. Notice that the <tt>refX</tt> and <tt>refY</tt> attributes have been set so the wide end of the arrowhead aligns with the intermediate vertices while the tip of the solid triangle aligns with the ending vertex. [[SVG Essentials/Paths#svgess-CHP-6-FIG-19|Figure 6-19]] shows the result, which draws the first marker correctly but not the others.

<div id="svgess-CHP-6-EX-7">
'''Example 6-7. Attempt to use three markers'''

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10"
'''refX="5" refY="5"'''>
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>

<marker id="mArrow" markerWidth="6" markerHeight="10"
'''refX="0" refY="4"'''>
<path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/>
</marker>

<marker id="mTriangle" markerWidth="5" markerHeight="10"
'''refX="5" refY="5"'''>
<path d="M 0 0 5 5 0 10 Z" style="fill: black;"/>
</marker>
</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="marker-start: url(#mCircle);
marker-mid: url(#mArrow);
marker-end: url(#mTriangle);
fill: none; stroke: black;"/>
</div>

<div id="svgess-CHP-6-FIG-19">
'''Figure 6-19. Incorrectly oriented markers'''

[[Image:SVG Essentials/I_6_tt143.png|Incorrectly oriented markers]]
</div>

To get the effect you want, you must explicitly set a marker's <tt>orient</tt> attribute to <tt>auto</tt>. This makes it automatically rotate to match the direction of the path.<ref>To be exact, the rotation is the average of the angle of the direction of the line going into the vertex and the direction of the line going out of the vertex.</ref> (You may also specify a number of degrees, in which case the marker will always be rotated by that amount.) Here in [[SVG Essentials/Paths#svgess-CHP-6-EX-8|Example 6-8]] are the markers, set to produce the effect shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-16|Figure 6-16]]. We don't need to orient the circle; it looks the same no matter how it's rotated.

<div id="svgess-CHP-6-EX-8">
'''Example 6-8. Correctly oriented markers'''

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10"
refX="5" refY="5">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>

<marker id="mArrow" markerWidth="6" markerHeight="10"
refX="0" refY="4" '''orient="auto"'''>
<path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/>
</marker>

<marker id="mTriangle" markerWidth="5" markerHeight="10"
refX="5" refY="5" '''orient="auto"'''>
<path d="M 0 0 5 5 0 10 Z" style="fill: black;"/>
</marker>
</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="marker-start: url(#mCircle);
marker-mid: url(#mArrow);
marker-end: url(#mTriangle);
fill: none; stroke: black;"/>
</div>

Another useful attribute is the <tt>markerUnits</tt> attribute. If set to <tt>strokeWidth</tt>, the marker's coordinate system is set so that one unit equals the stroke width. This makes your marker grow in proportion to the stroke width; it's the default behavior and it's usually what you want. If you set the attribute to <tt>userSpaceOnUse</tt>, the marker's coordinates are presumed to be the same as the coordinate system of the object that references the marker. The marker will remain the same size irrespective of the stroke width.

== Marker Miscellanea ==

If you want the same marker at the beginning, middle, and end of a path, you don't need to specify all of the <tt>marker-start</tt>, <tt>marker-mid</tt>, and <tt>marker-end</tt> properties. Just use the <tt>marker</tt> property and have it reference the marker you want. Thus, if we wanted all the vertices to have a circular marker, as shown in [[SVG Essentials/Paths#svgess-CHP-6-FIG-20|Figure 6-20]], we'd write the SVG in [[SVG Essentials/Paths#svgess-CHP-6-EX-9|Example 6-9]].

<div id="svgess-CHP-6-EX-9">
'''Example 6-9. Using a single marker for all vertices'''

<defs>
<marker id="mCircle" markerWidth="10" markerHeight="10"
refX="5" refY="5">
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/>
</marker>
</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="marker: url(#mCircle); fill: none; stroke: black;"/>
</div>

<div id="svgess-CHP-6-FIG-20">
'''Figure 6-20. Using a single marker for all vertices'''

[[Image:SVG Essentials/I_6_tt144.png|Using a single marker for all vertices]]
</div>

It is also possible to set the <tt>viewBox</tt> and <tt>preserveAspectRatio</tt> attributes on a <tt><marker></tt> element to gain even more control over its display. These work exactly as described in [[SVG Essentials/Coordinates|Chapter 2]], in [[SVG Essentials/Coordinates#Specifying User Coordinates for a Viewport|Section 2.3]] and in [[SVG Essentials/Coordinates#Preserving Aspect Ratio|Section 2.4]].

You may reference a <tt><marker></tt> in a <tt><polygon></tt>, <tt><polyline></tt>, or <tt><line></tt> element as well as in a <tt><path></tt>.

The following thought may have occurred to you: "If a marker can have a path in it, can ''that'' path have a marker attached to it as well?" The answer is yes, it can, but the second marker must fit into the rectangle established by the first marker's <tt>markerWidth</tt> and <tt>markerHeight</tt>. Please remember that just because a thing can be done does not mean that it should be done. If you need such an effect, you are probably better off to draw the secondary marker as a part of the primary marker rather than attempting to nest markers.
== Notes ==

<references/>