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

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

To page 1To page 2current pageTo page 4To page 5To page 6To page 7To page 8
[previous] [next]

SVG: The Art is in the Code

Basic Shapes

Similar to most vector drawing packages, SVG has some predefined basic shapes that can be utilized by developers. These shapes are elements, much like a table can be an element of a HTML document. The following shape elements are defined by the SVG specifications:

While these shapes are basic in nature and the examples presented here aren't exactly going to blow you away, they are very important to learn as the concepts presented here form the basis of more complex vector drawings and animations. With this in mind, lets us look at each basic shape element in depth.

<rect>

The <rect> tag allows for the drawing of a rectangle and variations of a rectangle shape, for example squares and rectangles or squares with rounded corners. To understand how this works, let's first take a look at some code that creates a basic rectangle shape and then build on that shape to produce some variations:

1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300">
4. <rect x="80" y="53" width="189" height="52"
     style="fill:rgb(39,44,231); 
            stroke:rgb(0,0,128); 
            stroke-width:1"/>
5. </svg>

View example 1 in a new window.

Line 4 of the above code is the code that defines a rectangle. The tag begins by first declaring the <rect> tag and then declaring all the properties of the rectangle.

The x property allows for the placement of the rectangle on the browser's screen left axis, while the y property allows for the placement of the rectangle on its y axis. Another way to think about the placement coordinates is to think of the x property as equating to the left positioning of the element and the y property equating to the top positioning of the element. For example, changing x="80" to x="0" places the rectangle 0 pixels from the left of the browser window.

The width and height properties, as the names suggest, define the height and the width of the rectangle. For example changing the width and height to width="289" and height="252" increases the size of the rectangle.

The style declaration allows developers to define CSS properties that are supported by the SVG recommendations. There are quite a number of CSS properties specific to SVG. Let's first take a look at the CSS properties used in the above example.

Let us put together what we have learned thus far and produce a rectangle that is larger than the previous one and has some different properties associated with it.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
	<rect x="0" y="0" width="289" height="252" style="fill:olive; stroke:purple; stroke-width:5"/>
</svg>

View example 2 in a new window.

As the above example demonstrates playing around with the values can produce quite different results from the first rectangle that we created. Other CSS properties can also be used. For example let us assume that we wanted to alter the opacity of the fill color; we would use fill-opacity: 0.1. The legal range of the opacity values in SVG is from 0 to 1. A value of 0.5 produces a fill with 50% opacity. The following example demonstrates the correct syntax for a rounded rectangle with its fill opacity set to 10%.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
	<rect x="0" y="0" width="189" height="152" style="fill:olive; stroke:purple; stroke-width:5; fill-opacity:0.1"/>
</svg>

View example 3 in a new window.


To page 1To page 2current pageTo page 4To page 5To page 6To page 7To page 8
[previous] [next]

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


URL: http://webreference.com/authoring/languages/svg/intro/3.html