WebReference.com - Scalable Vector Graphics: The Art is in the Code (3/8)
SVG: The Art is in the Code
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> 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>
Line 4 of the above code is the code that defines a rectangle. The tag begins by first
<rect> tag and then declaring all the properties of the rectangle.
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="0" places the rectangle 0 pixels from the left of the browser
height properties, as the names suggest, define the
height and the width of the rectangle. For example changing the width and height to
height="252" increases the size of the rectangle.
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.
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:
strokeproperty 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:1defines 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" "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>
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>
Created: November 21, 2001
Revised: November 21, 2001