![](https://csdnimg.cn/release/download_crawler_static/3485320/bg12.jpg)
18
1.4.1 Document Structure
We start Example 1-1 with the standard XML processing instruction and DOCTYPE
declaration. The root
<svg> element defines the width and height of the finished
graphic in pixels. The <title> element's content is available to a viewing program for
use in a title bar or as a tooltip pointer, and the <desc> element lets you give a full
description of the image.
Example 1-1. Basic structure of an SVG document
<?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>
1.4.2 Basic Shapes
We draw the cat's face by adding a <circle> 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 style attribute. Its value will be a series of presentation properties and
values, as described in Appendix B, in Section B.1. We'll use a stroke color of black for
the outline, and a fill color of
none to make the face transparent. The SVG is shown in
Example 1-2
, and its result in Figure 1-8.
Example 1-2. Basic shapes -- circle
<?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>
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
</svg>
Figure 1-8. Stage one -- circle
TEAM FLY PRESENTS