WebReference.com - Scalable Vector Graphics: The Art is in the Code (3/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:

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

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" 
     "https://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.

• The fill property (fill:rgb(39,44,231);) defines the fill color of the rectangle; in this particular instance rgb format is used to express the color. SVG also allows for the expression of colors by using named or hexadecimal color formats as such: fill: red or fill: #ffff00.

• The stroke property provides Web developers with a mechanism to create an outline for a rectangle. In SVG it is assumed that an outline does not have any width. In other words the width of an outline is set to 0 by default. This is true of all SVG shapes and as a consequence if an outline is needed it needs to be defined by using the following syntax: stroke:rgb(0,0,128); which defines the color to be used for the stroke. stroke-width:1 defines the width of the outline. Increasing the width value to 5 intuitively would produce a larger outline.

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" 
              "https://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" 
              "https://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.

[previous] [next]

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

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