SVG Essentials/Getting Started - 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:30 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:38 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:21:58 GMT

1 revision(s)

←Older revision

Revision as of 22:21, 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 13:		Line 13:
	'''Figure 1-1. Raster graphic rectangle'''		'''Figure 1-1. Raster graphic rectangle'''

-	[[Image:~~I_1_tt8~~.png\|Raster graphic rectangle]]	+	[[Image:SVG Essentials_I_1_tt8.png\|Raster graphic rectangle]]
	</div>		</div>

Line 23:		Line 23:
	'''Figure 1-2. Vector graphic rectangle'''		'''Figure 1-2. Vector graphic rectangle'''

-	[[Image:SVG ~~Essentials/I_1_tt9~~.png\|Vector graphic rectangle]]	+	[[Image:SVG Essentials_I_1_tt9.png\|Vector graphic rectangle]]
	</div>		</div>

Line 54:		Line 54:
	'''Figure 1-3. Raster image of cat'''		'''Figure 1-3. Raster image of cat'''

-	[[Image:SVG ~~Essentials/I_1_tt10~~.png\|Raster image of cat]]	+	[[Image:SVG Essentials_I_1_tt10.png\|Raster image of cat]]
	</div>		</div>

Line 60:		Line 60:
	'''Figure 1-4. Vector image of cat'''		'''Figure 1-4. Vector image of cat'''

-	[[Image:SVG ~~Essentials/I_1_tt11~~.png\|Vector image of cat]]	+	[[Image:SVG Essentials_I_1_tt11.png\|Vector image of cat]]
	</div>		</div>

Line 68:		Line 68:
	'''Figure 1-5. Expanded raster image'''		'''Figure 1-5. Expanded raster image'''

-	[[Image:SVG ~~Essentials/I_1_tt12~~.png\|Expanded raster image]]	+	[[Image:SVG Essentials_I_1_tt12.png\|Expanded raster image]]
	</div>		</div>

Line 76:		Line 76:
	'''Figure 1-6. Expanded anti-aliased raster image'''		'''Figure 1-6. Expanded anti-aliased raster image'''

-	[[Image:SVG ~~Essentials/I_1_tt13~~.png\|Expanded anti-aliased raster image]]	+	[[Image:SVG Essentials_I_1_tt13.png\|Expanded anti-aliased raster image]]
	</div>		</div>

Line 84:		Line 84:
	'''Figure 1-7. Expanded vector image'''		'''Figure 1-7. Expanded vector image'''

-	[[Image:SVG ~~Essentials/I_1_tt14~~.png\|Expanded vector image]]	+	[[Image:SVG Essentials_I_1_tt14.png\|Expanded vector image]]
	</div>		</div>

Line 147:		Line 147:
	'''Figure 1-8. Stage one -- circle'''		'''Figure 1-8. Stage one -- circle'''

-	[[Image:SVG ~~Essentials/I_1_tt15~~.png\|Stage one -- circle]]	+	[[Image:SVG Essentials_I_1_tt15.png\|Stage one -- circle]]
	</div>		</div>

Line 173:		Line 173:
	'''Figure 1-9. Stage two -- face and eyes'''		'''Figure 1-9. Stage two -- face and eyes'''

-	[[Image:SVG ~~Essentials/I_1_tt16~~.png\|Stage two -- face and eyes]]	+	[[Image:SVG Essentials_I_1_tt16.png\|Stage two -- face and eyes]]
	</div>		</div>

Line 200:		Line 200:
	'''Figure 1-10. Stage three -- right whiskers'''		'''Figure 1-10. Stage three -- right whiskers'''

-	[[Image:SVG ~~Essentials/I_1_tt17~~.png\|Stage three -- right whiskers]]	+	[[Image:SVG Essentials_I_1_tt17.png\|Stage three -- right whiskers]]
	</div>		</div>

Line 229:		Line 229:
	'''Figure 1-11. Stage four -- left whiskers'''		'''Figure 1-11. Stage four -- left whiskers'''

-	[[Image:SVG ~~Essentials/I_1_tt18~~.png\|Stage four -- left whiskers]]	+	[[Image:SVG Essentials_I_1_tt18.png\|Stage four -- left whiskers]]
	</div>		</div>

Line 265:		Line 265:
	'''Figure 1-12. Stage five -- ears and mouth'''		'''Figure 1-12. Stage five -- ears and mouth'''

-	[[Image:SVG ~~Essentials/I_1_tt19~~.png\|Stage five -- ears and mouth]]	+	[[Image:SVG Essentials_I_1_tt19.png\|Stage five -- ears and mouth]]
	</div>		</div>

Line 302:		Line 302:
	'''Figure 1-13. Stage six -- nose'''		'''Figure 1-13. Stage six -- nose'''

-	[[Image:SVG ~~Essentials/I_1_tt20~~.png\|Stage six -- nose]]	+	[[Image:SVG Essentials_I_1_tt20.png\|Stage six -- nose]]
	</div>		</div>

Line 312:		Line 312:
	'''Figure 1-14. Stage seven -- text and finished image'''		'''Figure 1-14. Stage seven -- text and finished image'''

-	[[Image:SVG ~~Essentials/I_1_tt21~~.png\|Stage seven -- text and finished image]]	+	[[Image:SVG Essentials_I_1_tt21.png\|Stage seven -- text and finished image]]
	</div>		</div>

Tallwine at 22:24, 5 March 2008

Tallwine — Wed, 05 Mar 2008 22:24:32 GMT

←Older revision		Revision as of 22:24, 5 March 2008
Line 13:		Line 13:
	'''Figure 1-1. Raster graphic rectangle'''		'''Figure 1-1. Raster graphic rectangle'''

-	[[Image:~~SVG Essentials/~~I_1_tt8.png\|Raster graphic rectangle]]	+	[[Image:I_1_tt8.png\|Raster graphic rectangle]]
	</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}}
SVG, which stands for ''S''calable ''V''ector ''G''raphics, is an application of XML that makes it possible to represent graphic information in a compact, portable form. Interest in SVG is growing rapidly, and tools to create and view SVG files are already available from major companies. This chapter begins with a description of the two major systems of computer graphics, and describes where SVG fits into the graphics world. The chapter concludes with a brief example that uses many of the concepts that we will explore in detail in the following chapters.

== Graphics Systems ==

The two major systems for representing graphic information on computers are raster and vector graphics.

=== Raster Graphics ===

In raster graphics, an image is represented as a rectangular array of picture elements or pixels (see [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-1|Figure 1-1]]). Each pixel is represented either by its RGB color values or as an index into a list of colors. This series of pixels, also called a bitmap, is often stored in a compressed format. Since most modern display devices are also raster devices, displaying an image requires a viewer program to do little more than uncompress the bitmap and transfer it to the screen.

<div id="svgess-CHP-1-FIG-1">
'''Figure 1-1. Raster graphic rectangle'''

[[Image:SVG Essentials/I_1_tt8.png|Raster graphic rectangle]]
</div>

=== Vector Graphics ===

In a vector graphic system, an image is described as a series of geometric shapes (see [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-2|Figure 1-2]]). Rather than receiving a finished set of pixels, a vector viewing program receives commands to draw shapes at specified sets of coordinates.

<div id="svgess-CHP-1-FIG-2">
'''Figure 1-2. Vector graphic rectangle'''

[[Image:SVG Essentials/I_1_tt9.png|Vector graphic rectangle]]
</div>

If you think of producing an image on graph paper, raster graphics work by describing which squares should be filled in with which colors. Vector graphics work by describing the grid points at which lines or curves are to be drawn. Some people describe vector graphics as a set of instructions for a drawing, while bitmap graphics (rasters) are points of color in specific places. Vector graphics "understand" what they are — a square "knows" it's a square and text "knows" that it's text. Because they are objects rather than a series of pixels, vector objects can change their shape and color, whereas bitmap graphics cannot. Also, all text is searchable because it really is text, no matter how it looks or how it is rotated or transformed.

Another way to think of raster graphics is as paint on canvas, while vector graphics are lines and shapes made of a stretchable material which can be moved around on a background.

=== Uses of Raster Graphics ===

Raster graphics are most appropriate for use with photographs, which are rarely composed of distinct lines and curves. Scanned images are often stored as bitmaps; even though the original may be "line art," we want to store the image as a whole and don't care about its individual components. A fax machine, for example, doesn't care what you've drawn; it simply transmits pixels from one place to another in raster form.

Tools for creating images in raster format are widespread and generally easier to use than many vector-based tools. There are many different ways to compress and store a raster image, and the internal representation of these formats is public. Program libraries to read and write images in compressed formats such as JPEG, GIF, and PNG are widely available. These are some of the reasons that web browsers have, until the arrival of SVG, supported only raster images.

=== Uses of Vector Graphics ===

Vector graphics are used in:

* Computer Assisted Drafting (CAD) programs, where accurate measurement and the ability to zoom in on a drawing to see details are essential
* Programs such as Adobe Illustrator, which are used to design graphics that will be printed on high-resolution printers
* The Adobe PostScript printing and imaging language; every character that you print is described in terms of lines and curves
* The vector-based Macromedia Flash system for designing animations, presentations, and web sites

Because most of these files are encoded in binary format or as tightly packed bitstreams, it is difficult for a browser or other user agent to parse out embedded text, or for a server to dynamically create vector graphic files from external data. Most of the internal representations of vector graphics are proprietary, and code to view or create them is not generally available.

== Scalability ==

Although they are not as popular as raster graphics, vector graphics have one feature that makes them invaluable in many applications — they can be scaled without loss of image quality. As an example, here are two drawings of a cat. [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-3|Figure 1-3]] was made with raster graphics; [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-4|Figure 1-4]] is a vector image. Both are shown as they appear on a screen that displays 72 pixels per inch.

<div id="svgess-CHP-1-FIG-3">
'''Figure 1-3. Raster image of cat'''

[[Image:SVG Essentials/I_1_tt10.png|Raster image of cat]]
</div>

<div id="svgess-CHP-1-FIG-4">
'''Figure 1-4. Vector image of cat'''

[[Image:SVG Essentials/I_1_tt11.png|Vector image of cat]]
</div>

When a display program zooms in on the raster graphic, it must find some way to expand each pixel. The simplest approach to zooming in by a factor of four is to make each pixel four times as large. The results, shown in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-5|Figure 1-5]], are not particularly pleasing.

<div id="svgess-CHP-1-FIG-5">
'''Figure 1-5. Expanded raster image'''

[[Image:SVG Essentials/I_1_tt12.png|Expanded raster image]]
</div>

Although it is possible to use techniques such as edge-detection and anti-aliasing to make the expanded image more pleasing, these techniques are time-consuming. Furthermore, since all the pixels in a raster graphic are equally anonymous, there's no guarantee that an algorithm can correctly detect edges of shapes. Anti-aliasing results in something like [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-6|Figure 1-6]].

<div id="svgess-CHP-1-FIG-6">
'''Figure 1-6. Expanded anti-aliased raster image'''

[[Image:SVG Essentials/I_1_tt13.png|Expanded anti-aliased raster image]]
</div>

Expanding a vector image by a factor of four, on the other hand, merely requires the display program to multiply all the coordinates of the shapes by four and redraw them at the full resolution of the display device. Thus, [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-7|Figure 1-7]], which is also a screenshot from a 72 dot per inch screen, shows crisp, clear edges on the lines with significantly less of the stair-step effects of the expanded raster image.

<div id="svgess-CHP-1-FIG-7">
'''Figure 1-7. Expanded vector image'''

[[Image:SVG Essentials/I_1_tt14.png|Expanded vector image]]
</div>

== SVG's Role ==

In 1998, the World Wide Web Consortium formed a working group to develop a representation of vector graphics as an XML application. Because SVG is an XML application, the information about an image is stored as plain text, and it brings the advantages of XML's openness, transportability, and interoperability.

CAD and graphic design programs often store drawings in a proprietary binary format. By adding the ability to import and export drawings in SVG format, applications gain a common, standard format for interchanging information.

Since it is an XML application, SVG cooperates with other XML applications. A mathematics textbook, for example, could use XSL Formatting Objects for explanatory text, MathML to describe equations, and SVG to generate the graphs for the equations.

The SVG working group's specification is an official World Wide Web Consortium Recommendation. Some applications such as Adobe Illustrator and Jasc WebDraw export drawings in SVG format. On the Web, SVG viewer plug-ins let users view presentations with many of the same scripting and animation capabilities that Flash has. Since the SVG files are XML, text in the SVG display is available to any user agent that can parse XML.

== Creating an SVG Graphic ==

In this section, we will write an SVG file that produces the image of the cat that we showed earlier in the chapter. This example introduces many of the concepts that we will explain in further detail in subsequent chapters. This file will be a good example of how to write an example file, which is not necessarily the way you should write an SVG file that will be part of a finished project.

=== Document Structure ===

We start [[SVG Essentials/Getting Started#svgess-CHP-1-EX-1|Example 1-1]] with the standard XML processing instruction and <tt>DOCTYPE</tt> declaration. The root <tt><svg></tt> element defines the <tt>width</tt> and <tt>height</tt> of the finished graphic in pixels. The <tt><title></tt> element's content is available to a viewing program for use in a title bar or as a tooltip pointer, and the <tt><desc></tt> element lets you give a full description of the image.

<div id="svgess-CHP-1-EX-1">
'''Example 1-1. Basic structure of an SVG document'''

<nowiki>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!— the drawing will go here —>
</svg></nowiki>
</div>

=== Basic Shapes ===

We draw the cat's face by adding a <tt><circle></tt> element. The element's attributes specify the center ''x''-coordinate, center ''y''-coordinate, and radius. The (0,0) point is the upper left corner of the picture. ''x'' coordinates increase as you move horizontally to the right; ''y'' coordinates increase as you move vertically downwards.

The circle's location and size are part of the drawing's ''structure''. The color in which it is drawn is part of its ''presentation''. As is customary with XML applications, we want to separate structure and presentation for maximum flexibility. Presentation information is contained in the <tt>style</tt> attribute. Its value will be a series of presentation properties and values, as described in [[SVG Essentials/Introduction to Stylesheets|Appendix B]], in [[SVG Essentials/Introduction to Stylesheets#Anatomy of a Style|Section B.1]]. We'll use a stroke color of black for the outline, and a fill color of <tt>none</tt> to make the face transparent. The SVG is shown in [[SVG Essentials/Getting Started#svgess-CHP-1-EX-2|Example 1-2]], and its result in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-8|Figure 1-8]].

<div id="svgess-CHP-1-EX-2">
'''Example 1-2. Basic shapes -- circle'''

<nowiki>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

</nowiki>'''<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>''';

</svg>

</div>

<div id="svgess-CHP-1-FIG-8">
'''Figure 1-8. Stage one -- circle'''

[[Image:SVG Essentials/I_1_tt15.png|Stage one -- circle]]
</div>

=== Specifying Styles as Attributes ===

Now we add two more circles for the eyes in [[SVG Essentials/Getting Started#svgess-CHP-1-EX-3|Example 1-3]]. Although their fill and stroke colors are really part of the presentation, SVG does allow you to specify them as individual attributes. In this example we specify the <tt>fill</tt> and <tt>stroke</tt> colors as two separate attributes rather than inside a <tt>style</tt> attribute. You probably won't use this method often; we'll discuss it further in [[SVG Essentials/Document Structure|Chapter 4]], in [[SVG Essentials/Document Structure#Presentation Attributes|Section 4.2.4]]. We've put it here just to prove that it can be done. The results are shown in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-9|Figure 1-9]].

The <tt><?xml ...?></tt> and <tt><?DOCTYPE?></tt> have been omitted to save space in the listing.

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

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
'''<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>'''
'''<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>'''

</svg>
</div>

<div id="svgess-CHP-1-FIG-9">
'''Figure 1-9. Stage two -- face and eyes'''

[[Image:SVG Essentials/I_1_tt16.png|Stage two -- face and eyes]]
</div>

=== Grouping Graphic Objects ===

[[SVG Essentials/Getting Started#svgess-CHP-1-EX-4|Example 1-4]] adds the whiskers on the right side of the cat's face with two <tt><line></tt> elements. We want to treat these whiskers as a unit (you'll see why in a moment), so we enclose them in the <tt><g></tt> grouping element, and give it an <tt>id</tt>. A line is specified by giving the ''x-'' and ''y-''coordinates for its starting point (<tt>x1</tt> and <tt>y1</tt>) and ending point (<tt>x2</tt> and <tt>y2</tt>). The result is displayed in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-10|Figure 1-10]].

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

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
'''<g id="whiskers">'''
''' <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>'''
''' <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>'''
'''</g>'''
</svg>
</div>

<div id="svgess-CHP-1-FIG-10">
'''Figure 1-10. Stage three -- right whiskers'''

[[Image:SVG Essentials/I_1_tt17.png|Stage three -- right whiskers]]
</div>

=== Transforming the Coordinate System ===

Now we will <tt><use></tt> the whiskers group, and <tt>transform</tt> them into the left whiskers. [[SVG Essentials/Getting Started#svgess-CHP-1-EX-5|Example 1-5]] first flips the coordinate system by multiplying the ''x''-coordinates by negative one in a <tt>scale</tt> transformation. This means that the point (75, 95) is now located at at the place which would have been (-75, 95) in the original coordinate system. In the new scaled system, coordinates increase as you move ''left''. This means we have to <tt>translate</tt> (move) the coordinate system 140 pixels right, the negative direction, to get them where we want them as shown in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-11|Figure 1-11]].

<div id="svgess-CHP-1-EX-5">
'''Example 1-5. Transforming the coordinate system'''

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
'''<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>'''

</svg>
</div>

<div id="svgess-CHP-1-FIG-11">
'''Figure 1-11. Stage four -- left whiskers'''

[[Image:SVG Essentials/I_1_tt18.png|Stage four -- left whiskers]]
</div>

The <tt>transform</tt> attribute's value lists the transformations, one after another, separated by whitespace.

=== Other Basic Shapes ===

[[SVG Essentials/Getting Started#svgess-CHP-1-EX-6|Example 1-6]] constructs the ears and mouth with the <tt><polyline></tt> element, which takes pairs of ''x''- and ''y''-coordinates as the <tt>points</tt> attribute. You separate the numbers with either blanks or commas as you please. The result is in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-12|Figure 1-12]].

<div id="svgess-CHP-1-EX-6">
'''Example 1-6. Basic shapes -- polylines'''

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
'''<!— ears -->'''
'''<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"'''
''' style="stroke: black; fill: none;" />'''
''''''
'''<polyline points="35 110, 45 120, 95 120, 105, 110"'''
''' style="stroke: black; fill: none;" />'''
</svg>
</div>

<div id="svgess-CHP-1-FIG-12">
'''Figure 1-12. Stage five -- ears and mouth'''

[[Image:SVG Essentials/I_1_tt19.png|Stage five -- ears and mouth]]
</div>

=== Paths ===

All of the basic shapes are actually shortcuts for the more general <tt><path></tt> element, which [[SVG Essentials/Getting Started#svgess-CHP-1-EX-7|Example 1-7]] uses to add the cat's nose. The result is in [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-13|Figure 1-13]]. This element has been designed to make specifying a path, or sequence of lines and curves, as compact as possible. The path in [[SVG Essentials/Getting Started#svgess-CHP-1-EX-7|Example 1-7]] translates, in words, to: "Move to coordinate (75,90). Draw a line to coordinate (65,90). Draw an elliptical arc with an ''x''-radius of 5 and a ''y''-radius of 10, ending back at coordinate (75,90)."

<div id="svgess-CHP-1-EX-7">
'''Example 1-7. Paths'''

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>

<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
style="stroke: black; fill: none;" />

<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />

'''<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"'''
''' style="stroke: black; fill: #ffcccc"/>'''
</svg>
</div>

<div id="svgess-CHP-1-FIG-13">
'''Figure 1-13. Stage six -- nose'''

[[Image:SVG Essentials/I_1_tt20.png|Stage six -- nose]]
</div>

=== Text ===

Finally, since this picture is so crudely drawn, there's a good chance that people will not know it is a cat. Hence, [[SVG Essentials/Getting Started#svgess-CHP-1-EX-8|Example 1-8]] adds text to the picture as a label. In the <tt><text></tt> element, the <tt>x</tt> and <tt>y</tt> attributes which specify the text's location are part of the structure. The font family and font size are part of the presentation, and thus part of the <tt>style</tt> attribute. Unlike the other elements we've seen, <tt><text></tt> is a container element, and its content is the text we want to display. [[SVG Essentials/Getting Started#svgess-CHP-1-FIG-14|Figure 1-14]] shows the final result.

<div id="svgess-CHP-1-FIG-14">
'''Figure 1-14. Stage seven -- text and finished image'''

[[Image:SVG Essentials/I_1_tt21.png|Stage seven -- text and finished image]]
</div>

<div id="svgess-CHP-1-EX-8">
'''Example 1-8. Text'''

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>

<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62"
style="stroke: black; fill: none;" />

<polyline points="35 110, 45 120, 95 120, 105, 110"
style="stroke: black; fill: none;" />


<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90"
style="stroke: black; fill: #ffcccc"/>
'''<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt;'''
''' stroke: none; fill: black;">Cat</text>'''
</svg>
</div>

That concludes our brief overview of SVG; in the following chapters we'll examine these concepts in depth.