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

[previous] [next]

SVG: The Art is in the Code

While on the subject of opacity, we can globally define the opacity value for the whole element by using opacity:0.5. The difference here is that the whole element inherits the opacity value, while in the fill-opacity value only the fill is made transparent. Here is some code to demonstrate the concept:

<?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; opacity:0.5" />
</svg>

View example 4 in a new window.

We can also specify the opacity level of a stroke by using stroke-opacity:0.8.

<?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; stroke-opacity:0.8" />
</svg>

View example 5 in a new window.

The opacity property demonstrates a very important facet of SVG, which often is not immediately noticed. It is not only the element itself that can be altered, but its sub-components as well - which makes them ideally suited to dynamic manipulation. Another way of thinking about this is by comparing it to Flash. In Flash you have the ability to alter a symbol's transparency and color values, but in order to achieve the same effect in Flash, each of a rectangle's strokes must be converted to symbols as well as the fill itself, thereby increasing the file size of the movie. In SVG the same effect is achieved with minimal code and consequently does not greatly impact the file size.

Rounded Rectangle Corners

The <rect> shape also brings with it the ability to have rounded corners by using the rx and ry properties. The r in front of the x and y literally denotes radius and allows us to define the shape of the rounded corners. For example:

<?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" rx="20" ry="20" 
        width="289" height="252" 
        style="fill:olive; stroke:purple; stroke-width:5"/>
</svg>

View example 6 in a new window.

produces a rectangle with rounded corners. Decrease the value of rx and ry and the corners are not as marked, increase it and corners appear more rounded.

<line />

The SVG <line> element defines a straight line by defining the starting (x1, y1) and ending points (x2, y2) of a line. Let's look at a simple example to familiarize ourselves:

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. <line x1="127" y1="65" x2="127" y2="200"
      style="stroke:rgb(0,0,0);stroke-width:2"/>
5. </svg>

View example 7 in a new window.

Once again Line 4 contains the code that creates an SVG line. The starting point from the top of a browser is defined by the x1="127" property and the starting point from left is defined with the y1="65" property. Our ending point for the top position is defined with the x2="127" property and the left position ending point is defined with the y2="200" property. Playing with these values produces different line orientations.

As is the case with the <rect> element, CSS properties can also be utilized with the line element. In this example, like our earlier <rect> example, an rgb color is defined, as well as the weight of the line via the stroke-width property. Very thin lines can be produced by specifying a value that is below 1 and above 0, for example, stroke-width:0.5. Other CSS properties such as opacity can also be used to alter the appearance of a line.

[previous] [next]

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

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