SVG Essentials/Basic Shapes - Revision history

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Fri, 07 Mar 2008 13:40:50 GMT

Initial conversion from Docbook

←Older revision

Revision as of 13:40, 7 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Fri, 07 Mar 2008 12:51:41 GMT

Initial conversion from Docbook

←Older revision

Revision as of 12:51, 7 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 23:40:31 GMT

1 revision(s)

←Older revision

Revision as of 23:40, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 23:33:32 GMT

Initial conversion from Docbook

←Older revision

Revision as of 23:33, 6 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 22:52:40 GMT

1 revision(s)

←Older revision

Revision as of 22:52, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 22:38:57 GMT

Initial conversion from Docbook

←Older revision

Revision as of 22:38, 6 March 2008

Evanlenz: 1 revision(s)

Evanlenz — Thu, 06 Mar 2008 22:22:00 GMT

1 revision(s)

←Older revision

Revision as of 22:22, 6 March 2008

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Thu, 06 Mar 2008 22:21:01 GMT

Initial conversion from Docbook

←Older revision		Revision as of 22:21, 6 March 2008
Line 25:		Line 25:
	'''Figure 3-1. Basic lines'''		'''Figure 3-1. Basic lines'''

-	[[Image:SVG ~~Essentials/I_3_tt39~~.png\|Basic lines]]	+	[[Image:SVG Essentials_I_3_tt39.png\|Basic lines]]
	</div>		</div>

Line 55:		Line 55:
	'''Figure 3-2. Demonstration of stroke-width'''		'''Figure 3-2. Demonstration of stroke-width'''

-	[[Image:SVG ~~Essentials/I_3_tt40~~.png\|Demonstration of stroke-width]]	+	[[Image:SVG Essentials_I_3_tt40.png\|Demonstration of stroke-width]]
	</div>		</div>

Line 96:		Line 96:
	'''Figure 3-3. Demonstration of stroke color'''		'''Figure 3-3. Demonstration of stroke color'''

-	[[Image:SVG ~~Essentials/I_3_tt41~~.png\|Demonstration of stroke color]]	+	[[Image:SVG Essentials_I_3_tt41.png\|Demonstration of stroke color]]
	</div>		</div>

Line 123:		Line 123:
	'''Figure 3-4. Demonstration of stroke-opacity'''		'''Figure 3-4. Demonstration of stroke-opacity'''

-	[[Image:SVG ~~Essentials/I_3_tt42~~.png\|Demonstration of stroke-opacity]]	+	[[Image:SVG Essentials_I_3_tt42.png\|Demonstration of stroke-opacity]]
	</div>		</div>

Line 158:		Line 158:
	'''Figure 3-5. Demonstration of stroke-dasharray'''		'''Figure 3-5. Demonstration of stroke-dasharray'''

-	[[Image:SVG ~~Essentials/I_3_tt43~~.png\|Demonstration of stroke-dasharray]]	+	[[Image:SVG Essentials_I_3_tt43.png\|Demonstration of stroke-dasharray]]
	</div>		</div>

Line 193:		Line 193:
	'''Figure 3-6. Demonstration of the rect element'''		'''Figure 3-6. Demonstration of the rect element'''

-	[[Image:SVG ~~Essentials/I_3_tt44~~.png\|Demonstration of the rect element]]	+	[[Image:SVG Essentials_I_3_tt44.png\|Demonstration of the rect element]]
	</div>		</div>

Line 205:		Line 205:
	'''Figure 3-7. Closeup of transparent border'''		'''Figure 3-7. Closeup of transparent border'''

-	[[Image:SVG ~~Essentials/I_3_tt45~~.png\|Closeup of transparent border]]	+	[[Image:SVG Essentials_I_3_tt45.png\|Closeup of transparent border]]
	</div>		</div>

Line 242:		Line 242:
	'''Figure 3-8. Demonstration of rounded rectangles'''		'''Figure 3-8. Demonstration of rounded rectangles'''

-	[[Image:SVG ~~Essentials/I_3_tt46~~.png\|Demonstration of rounded rectangles]]	+	[[Image:SVG Essentials_I_3_tt46.png\|Demonstration of rounded rectangles]]
	</div>		</div>

Line 271:		Line 271:
	'''Figure 3-9. Demonstration of circle and ellipse elements'''		'''Figure 3-9. Demonstration of circle and ellipse elements'''

-	[[Image:SVG ~~Essentials/I_3_tt47~~.png\|Demonstration of circle	+	[[Image:SVG Essentials_I_3_tt47.png\|Demonstration of circle
	and ellipse elements]]		and ellipse elements]]
	</div>		</div>
Line 307:		Line 307:
	'''Figure 3-10. Demonstration of the polygon element'''		'''Figure 3-10. Demonstration of the polygon element'''

-	[[Image:SVG ~~Essentials/I_3_tt48~~.png\|Demonstration of the polygon element]]	+	[[Image:SVG Essentials_I_3_tt48.png\|Demonstration of the polygon element]]
	</div>		</div>

Line 328:		Line 328:
	'''Figure 3-11. Unfilled polygon with intersecting lines'''		'''Figure 3-11. Unfilled polygon with intersecting lines'''

-	[[Image:SVG ~~Essentials/I_3_tt49~~.png\|Unfilled polygon with intersecting lines]]	+	[[Image:SVG Essentials_I_3_tt49.png\|Unfilled polygon with intersecting lines]]
	</div>		</div>

Line 350:		Line 350:
	'''Figure 3-12. Effect of different fill-rules'''		'''Figure 3-12. Effect of different fill-rules'''

-	[[Image:SVG ~~Essentials/I_3_tt50~~.png\|Effect of different fill-rules]]	+	[[Image:SVG Essentials_I_3_tt50.png\|Effect of different fill-rules]]
	</div>		</div>

Line 381:		Line 381:
	'''Figure 3-13. Example of the polyline element'''		'''Figure 3-13. Example of the polyline element'''

-	[[Image:SVG ~~Essentials/I_3_tt51~~.png\|Example of the polyline element]]	+	[[Image:SVG Essentials_I_3_tt51.png\|Example of the polyline element]]
	</div>		</div>

Line 393:		Line 393:
	'''Figure 3-14. Example of filled polyline'''		'''Figure 3-14. Example of filled polyline'''

-	[[Image:SVG ~~Essentials/I_3_tt52~~.png\|Example of filled polyline]]	+	[[Image:SVG Essentials_I_3_tt52.png\|Example of filled polyline]]
	</div>		</div>

Line 420:		Line 420:
	'''Figure 3-15. Values of the stroke-linecap attribute'''		'''Figure 3-15. Values of the stroke-linecap attribute'''

-	[[Image:SVG ~~Essentials/I_3_tt53~~.png\|Values of the stroke-linecap attribute]]	+	[[Image:SVG Essentials_I_3_tt53.png\|Values of the stroke-linecap attribute]]
	</div>		</div>

Line 447:		Line 447:
	'''Figure 3-16. Values of the stroke-linejoin attribute'''		'''Figure 3-16. Values of the stroke-linejoin attribute'''

-	[[Image:SVG ~~Essentials/I_3_tt54~~.png\|Values of the stroke-linejoin attribute]]	+	[[Image:SVG Essentials_I_3_tt54.png\|Values of the stroke-linejoin attribute]]
	</div>		</div>

Docbook2Wiki: Initial conversion from Docbook

Docbook2Wiki — Tue, 04 Mar 2008 22:37:00 GMT

Initial conversion from Docbook

New page

{{SVG Essentials/TOC}}
Once a coordinate system is established in the <tt><svg></tt> tag, you are ready to begin drawing. In this chapter, we will show the basic shapes you can use to create the major elements of most drawings: lines, rectangles, polygons, circles, and ellipses.

== Lines ==

SVG lets you draw a straight line with the <tt><line></tt> element. Just specify the ''x''- and ''y''-coordinates of the line's endpoints. Coordinates may be specified without units, in which case they are considered to be user coordinates, or with units such as <tt>em</tt>, <tt>in</tt>, etc. as described in [[SVG Essentials/Coordinates|Chapter 2]], in [[SVG Essentials/Coordinates#The Viewport|Section 2.1]]. The SVG in [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-1|Example 3-1]] draws several lines; the reference grid in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-1|Figure 3-1]] is not part of the SVG that you see here.

<line x1="''start-x''" y1="''start-y''"
x2="''end-x''" y2="''end-y''">

<div id="svgess-CHP-3-EX-1">
'''Example 3-1. Basic lines'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="40" y1="20" x2="80" y2="20" style="stroke: black;"/>

<line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;"/>

<line x1="30" y1="30" x2="85" y2="85" style="stroke: black;"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-1">
'''Figure 3-1. Basic lines'''

[[Image:SVG Essentials/I_3_tt39.png|Basic lines]]
</div>

== Stroke Characteristics ==

Lines are considered to be strokes of a pen that draws on the canvas. The size, color, and style of the pen stroke are part of the line's presentation. Thus, these characteristics will go into the <tt>style</tt> attribute.

=== stroke-width ===

As mentioned in [[SVG Essentials/Coordinates|Chapter 2]], the canvas grid lines are infinitely thin. Where, then, does a line or stroke fall in relation to the grid line? The answer is that the grid line falls in the center of a stroke. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-2|Example 3-2]] draws some lines where the stroke width has been set to ten user coordinates to make the effect obvious. The result, in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-2|Figure 3-2]], has the grid lines drawn in so you can see the effect clearly.

<div id="svgess-CHP-3-EX-2">
'''Example 3-2. Demonstration of stroke-width'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="30" y1="10" x2="80" y2="10"
style="stroke-width: 10; stroke: black;"/>

<line x1="10" y1="30" x2="10" y2="80"
style="stroke-width: 10; stroke: black;"/>

<line x1="25" y1="25" x2="75" y2="75"
style="stroke-width: 10; stroke: black;"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-2">
'''Figure 3-2. Demonstration of stroke-width'''

[[Image:SVG Essentials/I_3_tt40.png|Demonstration of stroke-width]]
</div>

=== stroke Color ===

You can specify the stroke color in a variety of ways:

* One of the color keyword names: <tt>aqua</tt>, <tt>black</tt>, <tt>blue</tt>, <tt>fuchsia</tt>, <tt>gray</tt>, <tt>green</tt>, <tt>lime</tt>, <tt>maroon</tt>, <tt>navy</tt>, <tt>olive</tt>, <tt>purple</tt>, <tt>red</tt>, <tt>silver</tt>, <tt>teal</tt>, <tt>white</tt>, and <tt>yellow</tt>.
* A six-digit hexadecimal specifier in the form <tt>#</tt> <tt>''rr''</tt> <tt>''gg''</tt> <tt>''bb''</tt>, where <tt>''rr''</tt> is the red component, <tt>''gg''</tt> is the green component, and <tt>''bb''</tt> is the blue component in the range <tt>0</tt>-<tt>ff</tt>.
* A three-digit hexadecimal specifier in the form <tt>#</tt> <tt>''r''</tt> <tt>''g''</tt> <tt>''b''</tt>, where <tt>''r''</tt> is the red component, <tt>''g''</tt> is the green component, and <tt>''b''</tt> is the blue component in the range <tt>0</tt>-<tt>f</tt>. This is a shorthand form of the previous method of specifying color. To produce the six-digit equivalent, each digit of the short form is duplicated; thus <tt>#d6e</tt> is the same as <tt>#dd66ee</tt>.
* An <tt>rgb</tt> specifier in the form <tt>rgb(</tt> <tt>''red-value''</tt> <tt>,</tt> <tt>''green-value''</tt> <tt>,</tt> <tt>''blue-value''</tt> <tt>)</tt>, where each value is in the range <tt>0</tt>-<tt>255</tt> or a percentage in the range <tt>0%</tt> to <tt>100%</tt>. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-3|Example 3-3]] uses all of these methods, with the colorful results of [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-3|Figure 3-3]].

<div id="svgess-CHP-3-EX-3">
'''Example 3-3. Demonstration of stroke color'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="10" y1="10" x2="50" y2="10"
style="stroke: red; stroke-width: 5;"/>


<line x1="10" y1="20" x2="50" y2="20"
style="stroke: #9f9; stroke-width: 5;"/>


<line x1="10" y1="30" x2="50" y2="30"
style="stroke: #9999ff; stroke-width: 5;"/>


<line x1="10" y1="40" x2="50" y2="40"
style="stroke: rgb(255, 128, 64); stroke-width: 5;"/>


<line x1="10" y1="50" x2="50" y2="50"
style="stroke: rgb(60%, 20%, 60%); stroke-width: 5;"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-3">
'''Figure 3-3. Demonstration of stroke color'''

[[Image:SVG Essentials/I_3_tt41.png|Demonstration of stroke color]]
</div>

=== stroke-opacity ===

Up to this point, all the lines in the example have been solid, obscuring anything beneath them. You control the opacity (which is the opposite of transparency) of a line by giving the <tt>stroke-opacity</tt> a value from <tt>0.0</tt> to <tt>1.0</tt>, where zero is completely transparent and one is completely opaque. A value less than zero will be changed to zero; a value greater than one will be changed to one. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-4|Example 3-4]] varies the opacity from 0.2 to 1 in steps of 0.2, with the result in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-4|Figure 3-4]].

<div id="svgess-CHP-3-EX-4">
'''Example 3-4. Demonstration of stroke-opacity'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<line x1="10" y1="10" x2="50" y2="10"
style="stroke-opacity: 0.2; stroke: black; stroke-width: 5;"/>
<line x1="10" y1="20" x2="50" y2="20"
style="stroke-opacity: 0.4; stroke: black; stroke-width: 5;"/>
<line x1="10" y1="30" x2="50" y2="30"
style="stroke-opacity: 0.6; stroke: black; stroke-width: 5;"/>
<line x1="10" y1="40" x2="50" y2="40"
style="stroke-opacity: 0.8; stroke: black; stroke-width: 5;"/>
<line x1="10" y1="50" x2="50" y2="50"
style="stroke-opacity: 1.0; stroke: black; stroke-width: 5;"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-4">
'''Figure 3-4. Demonstration of stroke-opacity'''

[[Image:SVG Essentials/I_3_tt42.png|Demonstration of stroke-opacity]]
</div>

=== stroke-dasharray attribute ===

If you need dotted or dashed lines, use the <tt>stroke-dasharray</tt> attribute, whose value consists of a list of numbers, separated by commas or white- space, specifying dash length and gaps. The list should have an even number of entries, but if you give an odd number of entries, SVG will repeat the list so the total number of entries is even. (See the last instance in [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-5|Example 3-5]].)

<div id="svgess-CHP-3-EX-5">
'''Example 3-5. Demonstration of stroke-dasharray'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<line x1="10" y1="10" x2="100" y2="10"
style="stroke-dasharray: 9, 5;
stroke: black; stroke-width: 2;"/>


<line x1="10" y1="20" x2="100" y2="20"
style="stroke-dasharray: 5, 3, 9, 2;
stroke: black; stroke-width: 2;"/>


<line x1="10" y1="30" x2="100" y2="30"
style="stroke-dasharray: 9, 3, 5;
stroke: black; stroke-width: 2;"/>
</svg>
</div>

[[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-5|Figure 3-5]] shows the results, zoomed in for clarity.

<div id="svgess-CHP-3-FIG-5">
'''Figure 3-5. Demonstration of stroke-dasharray'''

[[Image:SVG Essentials/I_3_tt43.png|Demonstration of stroke-dasharray]]
</div>

== Rectangles ==

The rectangle is the simplest of the basic shapes. You specify the ''x''- and ''y''-coordinates of the upper left corner of the rectangle,<ref>Technically, the <tt>x</tt> value is the smaller of the ''x''-coordinate values and the <tt>y</tt> is the smaller of the ''y''-coordinate values of the rectangle's sides in the current user coordinate system. Since we are not yet using transformations, which we will cover in [[SVG Essentials/Transforming the Coordinate System|Chapter 5]], this is the moral equivalent of the upper left corner.</ref> its <tt>width</tt>, and its <tt>height</tt>. The interior of the rectangle is filled with the <tt>fill</tt> color you specify. If you do not specify a fill color, the interior of the shape is filled with black. The fill color may be specified in any of the ways described in [[SVG Essentials/Basic Shapes#stroke Color|Section 3.2.2]], or it may take the value <tt>none</tt> to leave the interior unfilled and thus transparent. You may also specify a <tt>fill-opacity</tt> in the same format as you did in [[SVG Essentials/Basic Shapes#stroke-opacity|Section 3.2.3]]. Both <tt>fill</tt> and <tt>fill-opacity</tt> are presentation properties, and belong in the <tt>style</tt> attribute.

After the interior is filled (if necessary), the outline of the rectangle is drawn with strokes, whose characteristics you may specify as you did for lines. If you do not specify a stroke, the value <tt>none</tt> is presumed, and no outline is drawn. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-6|Example 3-6]] draws several variations of the <tt><rect></tt> element. [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-6|Figure 3-6]] shows the result, with a grid for reference.

<div id="svgess-CHP-3-EX-6">
'''Example 3-6. Demonstration of the rectangle element'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<rect x="10" y="10" width="30" height="50"/>


<rect x="50" y="10" width="20" height="40"
style="fill: none; stroke: black;"/>


<rect x="10" y="70" width="25" height="30"
style="fill: #0000ff;
stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/>


<rect x="50" y="70" width="35" height="20"
style="fill: yellow; fill-opacity: 0.5;
stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-6">
'''Figure 3-6. Demonstration of the rect element'''

[[Image:SVG Essentials/I_3_tt44.png|Demonstration of the rect element]]
</div>

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

Since the strokes that form the outline "straddle" the abstract grid lines, the strokes will be half inside the shape and half outside the shape. [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-7|Figure 3-7]], a closeup of the semi-transparent red outline drawn in [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-6|Example 3-6]], shows this clearly.
</div>

<div id="svgess-CHP-3-FIG-7">
'''Figure 3-7. Closeup of transparent border'''

[[Image:SVG Essentials/I_3_tt45.png|Closeup of transparent border]]
</div>

If you do not specify a starting <tt>x</tt> or <tt>y</tt> value, it is presumed to be zero. If you specify a <tt>width</tt> or <tt>height</tt> of zero, then the rectangle is not displayed. It is an error to provide negative values for either <tt>width</tt> or <tt>height</tt>.

=== Rounded Rectangles ===

If you wish to have rectangles with rounded corners, specify the ''x''- and ''y''-radius of the corner curvature. The maximum number you may specify for <tt>rx</tt> (the ''x''-radius) is one-half the width of the rectangle; the maximum value of <tt>ry</tt> (the ''y''-radius) is one-half the height of the rectangle. If you specify only one of <tt>rx</tt> or <tt>ry</tt>, they are presumed to be equal. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-7|Example 3-7]] shows various combinations of <tt>rx</tt> and <tt>ry</tt>.

<div id="svgess-CHP-3-EX-7">
'''Example 3-7. Demonstration of rounded rectangles'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<rect x="10" y="10" width="20" height="40" rx="2" ry="2"
style="stroke: black; fill: none;"/>

<rect x="40" y="10" width="20" height="40" rx="5"
style="stroke: black; fill: none;"/>

<rect x="70" y="10" width="20" height="40" ry="10"
style="stroke: black; fill: none;"/>


<rect x="10" y="60" width="20" height="40" rx="10" ry="5"
style="stroke: black; fill: none;"/>

<rect x="40" y="60" width="20" height="40" rx="5" ry="10"
style="stroke: black; fill: none;"/>
</svg>
</div>

[[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-8|Figure 3-8]] shows the result, with a grid in the background for reference.

<div id="svgess-CHP-3-FIG-8">
'''Figure 3-8. Demonstration of rounded rectangles'''

[[Image:SVG Essentials/I_3_tt46.png|Demonstration of rounded rectangles]]
</div>

== Circles and Ellipses ==

To draw a circle, use the <tt><circle></tt> element and specify the center ''x''-coordinate, center ''y''-coordinate, and radius with the <tt>cx</tt>, <tt>cy</tt>, and <tt>r</tt> attributes. As with a rectangle, the default is to fill the circle with black and draw no outline unless you specify some other combination of <tt>fill</tt> and <tt>stroke</tt>.

An ellipse also needs an ''x''-radius and a ''y''-radius in addition to a center ''x''- and ''y''-coordinate. The attributes for these radii are named <tt>rx</tt> and <tt>ry</tt>.

In both circles and ellipses, if the <tt>cx</tt> or <tt>cy</tt> is omitted, it is presumed to be zero. If the radius is zero, no shape will be displayed; it is an error to provide a negative radius. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-8|Example 3-8]] draws some circles and ellipses which are shown in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-9|Figure 3-9]].

<div id="svgess-CHP-3-EX-8">
'''Example 3-8. Demonstration of circles and ellipses'''

<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle cx="30" cy="30" r="20" style="stroke: black; fill: none;"/>
<circle cx="80" cy="30" r="20"
style="stroke-width: 5; stroke: black; fill: none;"/>

<ellipse cx="30" cy="80" rx="10" ry="20"
style="stroke: black; fill: none;"/>
<ellipse cx="80" cy="80" rx="20" ry="10"
style="stroke: black; fill: none;"/>
</svg>
</div>

<div id="svgess-CHP-3-FIG-9">
'''Figure 3-9. Demonstration of circle and ellipse elements'''

[[Image:SVG Essentials/I_3_tt47.png|Demonstration of circle
and ellipse elements]]
</div>

== The polygon Element ==

In addition to rectangles, circles, and ellipses, you may want to draw hexagons, octagons, stars, or arbitrary closed shapes. The <tt><polygon></tt> element lets you specify a series of <tt>points</tt> that describe a geometric area to be filled and outlined as described earlier. The <tt>points</tt> attribute consists of a series of ''x''- and ''y''-coordinate pairs separated by commas or whitespace. You must give an even number of entries in the series of numbers. You don't have to return to the starting point; the shape will automatically be closed. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-9|Example 3-9]] uses the <tt><polygon></tt> element to draw a parallelogram, a star, and an irregular shape.

<div id="svgess-CHP-3-EX-9">
'''Example 3-9. Demonstration of the polygon element'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon points="15,10 55, 10 45, 20 5, 20"
style="fill: red; stroke: black;"/>


<polygon
points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
42.3,60.1 35,55 27.7,60.1 30.3,51.5
23.1,46.1 32.1,46.1"
style="fill: #ccffcc; stroke: green;"/>


<polygon
points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95"
style="fill: yellow; fill-opacity: 0.5; stroke: black;
stroke-width: 2;"/>
</svg>
</div>

The results, with a grid in the background for reference, are displayed in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-10|Figure 3-10]].

<div id="svgess-CHP-3-FIG-10">
'''Figure 3-10. Demonstration of the polygon element'''

[[Image:SVG Essentials/I_3_tt48.png|Demonstration of the polygon element]]
</div>

=== Filling Polygons That Have Intersecting Lines ===

For the polygons shown so far, it's been easy to fill the shape. Since none of the lines forming the polygon cross over one another, the interior is easily distinguished from the exterior of the shape. However, when lines cross over one another, the determination of what is inside the polygon is not as easy. The SVG in [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-10|Example 3-10]] draws such a polygon. In [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-11|Figure 3-11]], is the middle section of the star considered to be inside or outside?

<div id="svgess-CHP-3-EX-10">
'''Example 3-10. Unfilled polygon with intersecting lines'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon points="48,16 16,96 96,48 0,48 80,96"
style="stroke: black; fill: none;"/>

</svg>
</div>

<div id="svgess-CHP-3-FIG-11">
'''Figure 3-11. Unfilled polygon with intersecting lines'''

[[Image:SVG Essentials/I_3_tt49.png|Unfilled polygon with intersecting lines]]
</div>

SVG has two different rules for determining whether a point is inside a polygon or outside it. The <tt>fill-rule</tt> (which is part of presentation) has a value of either <tt>nonzero</tt> or <tt>evenodd</tt>. Depending on the rule you choose, you get a different effect. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-11|Example 3-11]] uses the rules to fill two diagrams of the star, as shown in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-12|Figure 3-12]].

<div id="svgess-CHP-3-EX-11">
'''Example 3-11. Effect of different fill-rules'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;"
points="48,16 16,96 96,48 0,48 80,96" />

<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;"
points="148,16 116,96 196,48 100,48 180,96" />

</svg>
</div>

<div id="svgess-CHP-3-FIG-12">
'''Figure 3-12. Effect of different fill-rules'''

[[Image:SVG Essentials/I_3_tt50.png|Effect of different fill-rules]]
</div>

<div class="sidebar">
'''Explanation of the Fill Rules'''

For the sake of completeness, we are describing how these <tt>fill-rules</tt> work, but you don't need to know the details in order to use them. The <tt>nonzero</tt> rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon's lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name) the point is inside the polygon.

The <tt>evenodd</tt> rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon's lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.
</div>

== The polyline Element ==

Finally, to round out our discussion of basic shapes, we'll return to straight lines. Sometimes you want a series of lines that does not make a closed shape. You can use multiple <tt><line></tt> elements, but if there are many lines it might be easier to use the <tt><polyline></tt> element. It has the same attributes as <tt><polygon></tt>, except that the shape is not closed. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-12|Example 3-12]] draws the symbol for an electrical resistor, shown in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-13|Figure 3-13]].

<div id="svgess-CHP-3-EX-12">
'''Example 3-12. Example of the polyline element'''

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polyline
points="5 20, 20 20, 25 10, 35 30, 45 10,
55 30, 65 10, 75 30, 80 20, 95 20"
style="stroke: black; stroke-width: 3; fill: none;"/>

</svg>
</div>

<div id="svgess-CHP-3-FIG-13">
'''Figure 3-13. Example of the polyline element'''

[[Image:SVG Essentials/I_3_tt51.png|Example of the polyline element]]
</div>

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

It's best to set the <tt>fill</tt> property to <tt>none</tt> when using <tt><polyline></tt>; otherwise, the SVG viewer attempts to fill the shape, sometimes with startling results like those in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-14|Figure 3-14]].
</div>

<div id="svgess-CHP-3-FIG-14">
'''Figure 3-14. Example of filled polyline'''

[[Image:SVG Essentials/I_3_tt52.png|Example of filled polyline]]
</div>

== Line Caps and Joins ==

When drawing a <tt><line></tt> or <tt><polyline></tt>, you may specify the shape of the endpoints of the lines by setting the <tt>stroke-linecap</tt> style property to one of the values <tt>butt</tt>, <tt>round</tt>, or <tt>square</tt>. [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-13|Example 3-13]] shows these three values, with gray guide lines showing the actual endpoints of the lines. You can see in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-15|Figure 3-15]] that <tt>round</tt> and <tt>square</tt> extend beyond the end coordinates; <tt>butt</tt>, the default, ends exactly at the specified endpoint.

<div id="svgess-CHP-3-EX-13">
'''Example 3-13. Values of the stroke-linecap property'''

<line x1="10" y1="15" x2="50" y2="15"
style="stroke-linecap: butt; stroke-width: 15;"/>

<line x1="10" y1="45" x2="50" y2="45"
style="stroke-linecap: round; stroke-width: 15;"/>

<line x1="10" y1="75" x2="50" y2="75"
style="stroke-linecap: square; stroke-width: 15;"/>


<line x1="10" y1="0" x2="10" y2="100" style="stroke: #999;"/>
<line x1="50" y1="0" x2="50" y2="100" style="stroke: #999;"/>
</div>

<div id="svgess-CHP-3-FIG-15">
'''Figure 3-15. Values of the stroke-linecap attribute'''

[[Image:SVG Essentials/I_3_tt53.png|Values of the stroke-linecap attribute]]
</div>

You may specify the way lines connect at the corners of a shape with the <tt>stroke-linejoin</tt> style property, which may have the values <tt>miter</tt> (pointed), <tt>round</tt> (round -- what did you expect?), or <tt>bevel</tt> (flat). [[SVG Essentials/Basic Shapes#svgess-CHP-3-EX-14|Example 3-14]] produces the result shown in [[SVG Essentials/Basic Shapes#svgess-CHP-3-FIG-16|Figure 3-16]].

<div id="svgess-CHP-3-EX-14">
'''Example 3-14. Values of the stroke-linejoin attribute'''

<polyline
style="stroke-linejoin: miter; stroke: black; stroke-width: 12;
fill: none;"
points="30 30, 45 15, 60 30"/>

<polyline
style="stroke-linejoin: round; stroke: black; stroke-width: 12;
fill: none;"
points="90 30, 105 15, 120 30"/>

<polyline
style="stroke-linejoin: bevel; stroke-width: 12; stroke: black;
fill: none;"
points="150 30, 165 15, 180 30"/>
</div>

<div id="svgess-CHP-3-FIG-16">
'''Figure 3-16. Values of the stroke-linejoin attribute'''

[[Image:SVG Essentials/I_3_tt54.png|Values of the stroke-linejoin attribute]]
</div>

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

If your lines meet at a sharp angle and have a mitered join, it's possible for the pointed part to extend beyond the lines' thickness. You may set the ratio of the miter to the thickness of the lines being joined with the <tt>stroke-miterlimit</tt> style property; its default value is 4.
</div>

== Basic Shapes Reference Summary ==

The following tables summarize the basic shapes and presentation styles in SVG.

=== Shape Elements ===

[[SVG Essentials/Basic Shapes#svgess-CHP-3-TABLE-1|Table 3-1]] summarizes the basic shapes available in SVG.

<div id="svgess-CHP-3-TABLE-1">
'''Table 3-1. Table of shape elements'''

{| border="1"
|-
! Shape !! Description
|-
| <tt><line x1="''start-x''" y1="''start-y''" x2="''end-x''" y2="''end-y''"/></tt> || Draws a line from the starting point at coordinates (<tt>''start-x''</tt>, <tt>''start-y''</tt>) to the ending point at coordinates (<tt>''end-x''</tt>, <tt>''end-y''</tt>).
|-
| <tt><rect x="''left-x''" y="''top-y''" width="''width''" height="''height''"/></tt> || Draws a rectangle whose upper left corner is at (<tt>''left-x''</tt>, <tt>''top-y''</tt>) with the given <tt>''width''</tt> and <tt>''height''</tt>.
|-
| <tt><circle cx="''center-x''" cy="''center-y''" r="''radius''"/></tt> || Draws a circle with the given <tt>''radius''</tt>, centered at (<tt>''center-x''</tt>, <tt>''center-y''</tt>).
|-
| <tt><ellipse cx="''center-x''" cy="''center-y''" rx="''x-radius''" ry="''y-radius''"/></tt> || Draws an ellipse with the given <tt>''x-radius''</tt> and <tt>''y-radius''</tt> centered at (<tt>''center-x''</tt>, <tt>''center-y''</tt>).
|-
| <tt><polygon points="''points-specifications''"/></tt> || Draws an arbitrary closed polygon whose outline is described by the <tt>''points-specification''</tt>. The points are specified as pairs of ''x''- and ''y''-coordinates. These are user coordinates only; you may not add a length unit specifier.
|-
| <tt><polyline points="''points-specifications''"/></tt> || Draws an arbitrary series of connected lines as described by the <tt>''points-specification''</tt>. The points are specified as pairs of ''x''- and ''y''-coordinates. These are user coordinates only; you may not add a length unit specifier.
|}
</div>

In all but the last two elements of [[SVG Essentials/Basic Shapes#svgess-CHP-3-TABLE-1|Table 3-1]], you may specify the attributes as simple numbers, in which case they will be presumed to be measured in user coordinates, or you may add a length unit specifier such as <tt>mm</tt>, <tt>pt</tt>, etc. For example:

<line x1="1cm" y1="30" width="50" height="10pt"/>

=== Specifying Colors ===

You may specify the color for filling or outlining a shape in one of the following ways:

* <tt>none</tt>, indicating that no outline is to be drawn or that the shape is not to be filled.
* A color name, which is one of <tt>aqua</tt>, <tt>black</tt>, <tt>blue</tt>, <tt>fuchsia</tt>, <tt>gray</tt>, <tt>green</tt>, <tt>lime</tt>, <tt>maroon</tt>, <tt>navy</tt>, <tt>olive</tt>, <tt>purple</tt>, <tt>red</tt>, <tt>silver</tt>, <tt>teal</tt>, <tt>white</tt>, or <tt>yellow</tt>.
* Six hexadecimal digits <tt>#</tt> <tt>''rrggbb''</tt>, each pair describing red, green, and blue values.
* Three hexadecimal digits <tt>#</tt> <tt>''rgb''</tt>, describing the red, green, and blue values. This is a shorthand for the previous method; digits are replicated so that <tt>#</tt> <tt>''rgb''</tt> is equivalent to <tt>#</tt> <tt>''rrggbb''</tt>.
* <tt>rgb(</tt> <tt>''r''</tt> <tt>,</tt> <tt>''g''</tt> <tt>,</tt> <tt>''b''</tt> <tt>)</tt>, each value ranging from 0-255 or from 0% to 100%.

=== Stroke and Fill Characteristics ===

In order to see a line or the outline of a shape, you must specify the stroke characteristics, using the following attributes. A shape's outline is drawn after its interior is filled. All of these characteristics, summarized in [[SVG Essentials/Basic Shapes#svgess-CHP-3-TABLE-2|Table 3-2]], are presentation properties, and go in a <tt>style</tt> attribute.

<div id="svgess-CHP-3-TABLE-2">
'''Table 3-2. Stroke characteristics'''

{| border="1"
|-
! Attribute !! Values
|-
| <tt>stroke</tt> || The stroke color, as described in [[SVG Essentials/Basic Shapes#Specifying Colors|Section 3.8.2]].
|-
| <tt>stroke-width</tt> || Width of stroke; may be given as user coordinates or with a length specifier. The stroke width is centered along the abstract grid lines.
|-
| <tt>stroke-opacity</tt> || A number ranging from 0.0 to 1.0; 0.0 is entirely transparent, 1.0 is entirely opaque.
|-
| <tt>stroke-dasharray</tt> || A series of numbers that tell the length of dashes and gaps with which a line is to be drawn. These numbers are in user coordinates only.
|-
| <tt>stroke-linecap</tt> || Shape of the ends of a line; has one of the values <tt>butt</tt> (the default), <tt>round</tt>, or <tt>square</tt>.
|-
| <tt>stroke-linejoin</tt> || The shape of the corners of a polygon or series of lines; has one of the values <tt>miter</tt> (pointed; the default), <tt>round</tt>, or <tt>bevel</tt> (flat).
|-
| <tt>stroke-miterlimit</tt> || Maximum ratio of length of the miter point to the width of the lines being drawn; the default value is 4.
|}
</div>

You can control the way in which the interior of a shape is to be filled by using one of the fill attributes shown in [[SVG Essentials/Basic Shapes#svgess-CHP-3-TABLE-3|Table 3-3]]. A shape is filled before its outline is drawn.

<div id="svgess-CHP-3-TABLE-3">
'''Table 3-3. Fill characteristics'''

{| border="1"
|-
! Attribute !! Values
|-
| <tt>fill</tt> || The fill color, as described in [[SVG Essentials/Basic Shapes#Specifying Colors|Section 3.8.2]].
|-
| <tt>fill-opacity</tt> || A number ranging from 0.0 to 1.0; 0.0 is entirely transparent, 1.0 is entirely opaque.
|-
| <tt>fill-rule</tt> || This attribute can have the values <tt>nonzero</tt> or <tt>evenodd</tt>, which apply different rules for determining whether a point is inside or outside a shape. These rules generate different effects only when a shape has intersecting lines or "holes" in it. Details are in [[SVG Essentials/Basic Shapes#Filling Polygons That Have Intersecting Lines|Section 3.5.1]] earlier in this chapter.
|}
</div>
== Notes ==

<references/>