How To Use Presentation Attributes In SVG

Along with the command attributes that define a shape’s position, radius, width, and height as given on previous post for creating basic shapes, SVG also has many SVG-specific styling properties that define a shape’s style are called presentation attributes in SVG. SVG presentation attributes can help us quickly set the paint and geometrical values of SVG elements. With presentation attributes in SVG ,instead of using style attribute to style SVG graphic element, you can write each of the properties as an attribute.

For example instead of writing:

<svg xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”20″ r=”15″ style=”fill: green; stroke:red; stroke-width: 3;”>
</circle>
</svg>

You can write each of the properties as an attribute:

<svg xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”20″ r=”15″ fill=”green” stroke=”red” stroke-width=”3″>
</circle>
</svg>

Presentation attributes are at the very bottom of the priority list. Any style specification coming from an inline, internal, or external style-sheet will override a presentation attribute. For example, in the following SVG document, the rectangle will be filled in pink, not red.

<svg xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<defs>
<style type=”text/css”>
<![CDATA[
#inner{ fill: pink; }
]]></style>
</defs>
<rect id=”inner” x=”50″ y=”25″ width=”200″ height=”100″ fill=”red”></rect>
</svg>

Table of Contents

SVG Presentation Attributes

Following are the presentation attributes used in SVG which define a shape’s style.

stroke-width

Stroke-width specifies the width of the stroke for a shape or text using either a percentage or a length value. It is worth pointing out that the units specified in the outermost <svg> tag are inherited by all descendants, and that the default value is px. You can find more details about possible length values on http://www.w3.org/TR/SVG/types.html#DataTypeLength.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<line x1=”50″ y1=”50″ x2=”250″ y2=”50″stroke-width=”5″ stroke=”brown”/>
<line x1=”50″ y1=”80″ x2=”250″ y2=”80″ stroke-width=”10″ stroke=”gray”/>
<line x1=”50″ y1=”110″ x2=”250″ y2=”110″stroke-width=”15″ stroke=”pink”/>
</svg>

stroke-color

This specifies the color of the stroke. The valid color values used in it are the same as in CSS3 and HTML5 which are named color (e.g.”blue”), hexadecimal (e.g.”#f34a12″), RGB (e.g.”rgb(255,255,255)”), HSL(e.g.”rgb(100%,50%,90%)”) and so on. You can found more detail about SVG colors on:http://www.w3.org/TR/SVG/color.html.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<line x1=”50″ y1=”50″ x2=”250″ y2=”50″stroke-width=”10″ stroke=”brown”/>
<line x1=”50″ y1=”80″ x2=”250″ y2=”80″ stroke-width=”10″ stroke=”lime”/>
<line x1=”50″ y1=”110″ x2=”250″ y2=”110″stroke-width=”10″ stroke=”pink”/>
</svg>

stroke-opacity

It is a number between 1 and 0. A value of 1 makes the stroke entirely opaque and 0 makes it invisible. A value less than zero will be changed to zero and a value greater than one will be changed to one. In the following example line varies the opacity from 0.2 to 1 in steps, which displays on the result below.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<line x1=”50″ y1=”40″ x2=”250″ y2=”40″
stroke-opacity=”0.2″stroke=”blue”stroke-width=”10″/>
<line x1=”50″ y1=”60″ x2=”250″ y2=”60″
stroke-opacity=”0.4″stroke=”blue”stroke-width=”10″/>
<line x1=”50″ y1=”80″ x2=”250″ y2=”80″
stroke-opacity=”0.6″stroke=”blue”stroke-width=”10″/>
<line x1=”50″ y1=”100″ x2=”250″ y2=”100″
stroke-opacity=”0.8″stroke=”blue”stroke-width=”10″/>
<line x1=”50″ y1=”120″ x2=”250″ y2=”120″
stroke-opacity=”1.0″stroke=”blue”stroke-width=”10″/>
</svg>

stroke-dasharray

This is a list of user coordinate values (px) that determines the length or pattern of the invisible spacing to be drawn between segments along the stroke of text or a shape. You can use the stroke-dasharray attribute, if you need dotted or dashed lines in stroke whose value consists of a list of numbers separated by commas or white space with specifying dash length and gaps. The list should have an even number of entries, but if you give an odd number of entries, SVG will repeat the list so the total number of entries is even.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<line x1=”50″ y1=”50″ x2=”250″ y2=”50″
stroke-dasharray=”9,5″ stroke=”brown” stroke-width=”5″/>
<line x1=”50″ y1=”80″ x2=”250″ y2=”80″
stroke-dasharray=”5, 3, 9, 2″stroke=”brown” stroke-width=”5″/>
<line x1=”50″ y1=”110″ x2=”250″ y2=”110″
stroke-dasharray=”9, 3, 5″stroke=”brown” stroke-width=”5″/>
</svg>

stroke-linecap

Stroke-linecap defines the shape at both ends of a line. The options are butt, round and square. When drawing a <line> or <polyline>, you may specify the shape of the endpoints of the lines by setting the stroke-linecap style property.

Following example shows the uses of stroke-linecap property, with gray lines which shows the actual endpoints of the lines.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<line x1=”50″ y1=”50″ x2=”250″ y2=”50″
stroke-linecap=”butt” stroke-width=”15″ stroke=”brown”/>
<line x1=”50″ y1=”80″ x2=”250″ y2=”80″
stroke-linecap=”square” stroke-width=”15″ stroke=”brown”/>
<line x1=”50″ y1=”110″ x2=”250″ y2=”110″
stroke-linecap=”round” stroke-width=”15″ stroke=”brown”/>
</svg>

stroke-linejoin

It determines the shape to be used at the corners of paths or basic shapes. You can specify the way lines connect at the corners of a shape with the stroke-linejoin style property. The options are miter(pointed), round and bevel (flat).

Following example shows the uses of stroke-linejoin property, with black lines which shows the actual linejoin in the polygon.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<polyline stroke-linejoin=”miter” stroke=”red” stroke-width=”15″
fill=”none” points=”80 80, 95 65, 110 80″/>
<polyline stroke-linejoin=”round” stroke=”red” stroke-width=”15″
fill=”none” points=”140 80, 155 65, 170 80″/>
<polyline stroke-linejoin=”bevel” stroke=”red” stroke-width=”15″
fill=”none” points=”200 80, 215 65, 230 80″/>
</svg>

fill-opacity

Fill-opacity is similar to the stroke opacity. It sets the opacity value for fill color, which is a number between 1 and 0. A value of 1 makes the fill entirely opaque and 0 makes it invisible. In the following example rectangles varies the fill opacity from 0.2 to 1 in steps, which displays on the result below.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<rect x=”50″ y=”10″ width=”200″ height=”35″ fill=”red” fill-opacity=”0.2″/>
<rect x=”50″ y=”55″ width=”200″ height=”35″ fill=”red” fill-opacity=”0.6″/>
<rect x=”50″ y=”100″ width=”200″ height=”35″ fill=”red” fill-opacity=”1″/>
</svg>

fill-rule

This determines which portions of a shape will be filled. The options are nonzero and evenodd. Depending on the rule you choose, you get a different effect.

Following example shows the uses of fill-rule property which uses the rules to fill two diagrams of the star, which is shown in the result below.

<svg width=”300px” height=”150px” xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ stroke=”blue” fill=”none”></rect>
<polygon fill-rule=”nonzero” fill=”pink” stroke=”black”
points=”98,46 66,126 144,78 50,78 130,126″ />
<polygon fill-rule=”evenodd” fill=”#00aaff” stroke=”black”
points=”198,46 166,126 246,78 150,78 230,126″ />
</svg>