WebReference.com - Scalable Vector Graphics: The Art is in the Code (5/8)

[previous] [next]

SVG: The Art is in the Code

<circle />

So far we have focused on the basic straight elements available to SVG. There is, however, the ability to do far more than create basic lines in the SVG specifications. Let us take a look at a basic circle shape.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
   <circle cx="143" cy="163" r="84"
      style="fill:rgb(192,192,255); 
             stroke:rgb(0,0,128);
             stroke-width:1"/>
</svg>

View example 8 in a new window.

In SVG a circle is defined by its radius and the coordinates of its center. The cx and cy attributes define the x and y position of the circle, respectively. The r attribute is used to define the radius of the circle. As with lines and rectangles, style properties can also be used to define the appearance of circles.

<ellipse />

Ellipses are closely related to circles, but they differ in that the x radius direction and the y radius direction are different to each other. For example, if the radii are the same the curved graphic element is a circle; if they differ it is an ellipse. A basic ellipse shape would have source code that is similar to this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
   <ellipse cx="160" cy="163" rx="101" ry="81"
      style="fill:rgb(192,192,255);
             stroke:rgb(0,0,128);
             stroke-width:1"/>
</svg>

View example 9 in a new window.

An SVG ellipse begins with the <ellipse /> tag. The cx and cy attributes, as is the case with circles, define the positioning of the ellipse. The rx attribute defines the radius in a horizontal direction, while the ry attribute defines the radius in a vertical direction. The important concept to note with regards to ellipses is that there are two radius points (radii) to be defined, where as with circles there is only one.

With SVG we can also create pseudo 3D elements as shown in the following example that utilizes two ellipses:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
   <ellipse cx="240" cy="174" rx="220" ry="30"
      style="fill:rgb(0,0,153);stroke:none"/>
   <ellipse cx="221" cy="174" rx="192" ry="22"
      style="fill:rgb(255,255,255);stroke:none"/>
</svg>

View example 10 in a new window.

<polygon />

The polygon element is used for a SVG shape that contains at least three sides. It is useful for creating basic triangles, hexagons and star shapes, among other things.

In the following example a polygon's shape is defined by a series of dual points. For example, one side of a triangle may be represented with the values 179,33 the 179 stands for the x position of this line of the triangle and the 33 the y position of the same line. Another of the lines that make up a side of the triangle may be represented by 214.218,94. The the 218 part of the 214.218 value represents decimal places, thereby affording developers precise control over the appearance of elements.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
   <polygon points="223.5,123.034 276,213.966 171,213.966"
      style="fill:rgb(126,14,83);
             stroke:rgb(0,0,128);
             stroke-width:1"/>
</svg>

View example 11 in a new window.

<polyline />

A polyline element can create any shape that consists of straight lines drawn successively. This element uses the same pair value system as the polygon element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
	<polyline points="100,200 100,20 10,200 100,20"
		 style="stroke:rgb(64,64,64);stroke-width:1"/>
</svg>

View example 12 in a new window.

<path />

The path element, while being the most complex shape in SVG is also the most versatile and ultimately the most useful. The following is some code that creates a path element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"https://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
	<path d="M10 20 L110 20 L110 120 L10 120"
		 style="fill:rgb(0,0,153);fill-opacity:0.5;stroke:rgb(0,0,153);stroke-width:4"/>
</svg>

View example 13 in a new window.

The d attribute of the path element tag allows for the description of several types of drawings. The M10 20 means to move to coordinates 10,20. The L110 20 means draw a line from the preceding point to coordinates 110,20 on the canvas. As you can tell, the path element uses a more cryptic form of syntax, but the reason for the cryptic syntax is to allow tremendously complex shapes to be created with a single element. For example, here is the code for creating a spiral with SVG:

<path d="M156 334 C153.239 334 151 334 151 334 C151 
         339.523 153.239 344 156 344 C164.284 344 171 339.523 171 334 C171 322.954 
         164.284 314 156 314 C142.193 314 131 322.954 131 334 C131 350.568 142.193 
         364 156 364 C175.33 364 191 350.568 191 334 C191 311.909 175.33 294 156 
         294 C131.147 294 111 311.909 111 334 C111 361.614 131.147 384 156 384 
         C186.375 384 211 361.614 211 334 C211 300.863 186.375 274 156 274"
         style="fill:none;stroke:url(#red-darkgreen);stroke-width:2"/>

And that would be considered something simple in terms of SVG drawings! Imagine the complexity of the code when creating fully animated creatures such as the dinosaurs on Jurassic Park (Some of these were done with vector graphics). Below is a summary list highlighting the possible values for the d attribute, please note that capital letters are absolutely positioned (eg. M), and lower cases are relative positioned (eg. m):

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic bezier curve
• T = smooth quadratic bezier curveto
• A = elliptical arc
• Z = closepath

Because of the complexity involved in drawing paths it is highly recommended to use a drawing package like Jasc's WebDraw. This will save typing out hundreds and in some cases thousands of coordinates. Nevertheless, it is important to understand what is happening within your code, particularly when creating animations with SVG, as in these instances you want and need the best possible control. The best way of gaining control over your Web development practices is to know your code and what it does.

[previous] [next]

Created: November 21, 2001
Revised: November 21, 2001

URL: https://webreference.com/authoring/languages/svg/intro/5.html