Downloading and Installing an SVG Viewer

   



A Minimal SVG Document

Every SVG document requires the SVG <svg> element as its outermost element. All other SVG elements are included inside this element. A minimal SVG document contains the following two lines:

<svg> </svg>

The preceding SVG document is valid and well defined, but is trivial because it does absolutely nothing of interest. Now look at Listing 1.1, which contains an example of an SVG document that specifies a red rectangle whose width is 150 pixels and whose height is 50 pixels. Don't worry if you don't understand everything in the document, especially the first two lines (they do look daunting, don't they?). These details will be explained later in the chapter.

Listing 1.1 rect1.svg

start example
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <!-- draw rectangle --> <g transform="translate(50,50)"> <rect    x="0" y="0" width="150" height="50"    style="fill:red;"/> </g> </svg>
end example

Let's examine the contents of Listing 1.1 line-by-line in a more detailed fashion. The first line is an optional line that specifies the version of xml and the character-encoding of the document:

<?xml version="1.0" encoding="iso-8859-1"?>

The second line is also an optional line:

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">

The first two lines appear in all the SVG documents in this book, even though they are optional. The DOCTYPE refers to an URL that specifies the location of a file that describes the 'legal' format of a document. At this juncture, you won't need to delve any further into the reasons for doing so; suffice it to say that the inclusion of these two lines is a good programming practice and will save you the trouble of having to add them at a later point in time.

The third line specifies the SVG svg element:

 <svg width="100%" height="100%">

The SVG svg element contains two attributes that specify the width and the height of the background canvas that will be used for rendering components. The attributes width and height have values that are specified as a percentage, which means that the background rectangle will resize accordingly whenever you resize your browser display. If you want to specify a rectangle with absolute dimensions that do not change when you resize your browser, you can use something like the following:

 <svg width="800" height="500">

You can specify the values of the width and height attributes using units such as cm, mm, and in, which represent centimeters, millimeters, and inches, respectively. The SVG fragment specifying the values of the width and height attributes in terms of centimeters is as follows:

<svg width="800cm" height="500cm">

The SVG fragment specifying the values of the width and height attributes in terms of millimeters is as follows:

<svg width="800mm" height="500mm">

The SVG fragment specifying the values of the width and height attributes in terms of inches is as follows:

<svg width="800in" height="500in">

In case you're wondering, the complete set of allowable units in SVG consists of em, ex, px, pt, pc, cm, mm, in, and percentage values. The default unit of measure is px.

The fourth line contains a comment:

 <!-- draw rectangle -->

You can also include multi-line comments like the one below:

 <!--  this comment  spans multiple  lines of text  -->

Develop a style for adding comments that provides useful information about the purpose of the code without interrupting the flow of the code. Comments are obviously useful, especially in SVG documents that contain many SVG elements. A set of well-placed succinct comments can simplify the maintenance and enhancement of SVG documents.

The fifth line contains the SVG g element:

 <g transform="translate(50,50)">

The SVG translate function will be discussed in more detail in Chapter 6, which is devoted to SVG functions. In this example, the translate part of the SVG g element specifies the coordinates of the origin as (50,50) instead of the default point (0,0). This functionality is extremely useful because it allows you to move a complex graphics image anywhere you want simply by altering the coordinates of the origin. You can use the SVG g element to enclose a 'group' of components that are logically related and need to be treated as a single 'unit.' The advantage of specifying such a grouping this way will become apparent later in the book when you need to apply additional transformations to all the components within a specific SVG g element.

The sixth line contains the SVG rect element, split over three lines:

 <rect    x="0" y="0" width="150" height="50"    style="fill:red;"/>

White space is not significant, which means that you could also write the preceding SVG rect element using tabs, a mixture of indentation styles, or as a single line. The format is a matter of personal preference; however, the format should be as clear and consistent as possible.

The style attribute specifies the value of the fill attribute as red. In general, the style attribute can contain multiple attributes that are 'strung together' using a semi-colon as a delimiter. Each 'sub-attribute' consists of a name/value pair that is separated by a colon. More examples of the style attribute will be given later in this chapter.

The seventh and eighth lines contain two closing tags: the first is for the SVG g element, and the second is for the SVG svg element:

 </g>  </svg>

Note that the nested order of these closing tags is required in order to make the SVG document well formed.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net