Most of the drawing elements in SVG define an area to be rendered. Both rect and text elements define areas. In the case of rect it is the area inside the defined rectangle while for text it is the area inside the glyphs making up the individual characters.
The rendering model used by SVG is the one called the painter's model which is similar to the way an artist would paint an oil painting. In a simple SVG diagram, the painter starts at the first element to be rendered and paints an area defined by the element. The artist then paints the second element and so on. If the second element is painted in the area occupied by the first element than it will obscure the first element unless the paint being applied is semi-transparent. Both the interior and the edge have to be painted. In SVG, the interior is painted followed by the edge. Consequently, the edge is visible and not partly obscured by the interior. In our example diagram, if the rect element had been after the text element, nothing would have been seen of the text element as the rect element would have been painted completely over it.
Rendering Attributes and Styling Properties
SVG defines the content of a diagram which may be styled in different ways. In graphics it is less clear what is style and what is content. For example, a pie chart might use colours to differentiate between individual segments. As long as it provides that differentiation, the specific colour chosen is normally not very relevant. On the other hand, if the diagram depicts a traffic light, interchanging the area to be drawn in green with the one in red would not be a good idea. This applies to most of the rendering attributes in SVG. Consequently the decision was made to allow all the rendering attributes to either be regarded as styling or as an integral part of the content of the diagram.
The use of styling is an extension of the use of styling in HTML. Styling can be achieved by adding a style element to the SVG file:
<svg viewbox= "0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect {stroke:black;fill:yellow}
rect.different {stroke:red; fill:none}
</style>
<rect x="20" y="30" width="300" height="200" rx="10" ry="10" />
<rect class="different" x="20" y="330" width="300" height="200" rx="10" ry="10" />
</svg>
In this example, the first rectangle will be drawn in yellow with a black boundary whereas the second will be drawn with a red boundary and no internal fill as it belongs to the class different which has a more precise styling than rectangles in general. The same effect could be achieved by defining an external sheet in the file mystyle.css as:
rect {stroke:black;fill:yellow}
rect.different {stroke:red; fill:none}
and attaching it to the SVG document by:
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <svg viewbox= "0 0 500 300" > <rect x="20" y="30" width="300" height="200" rx="10" ry="10" /> <rect class="different" x="20" y="330" width="300" height="200" rx="10" ry="10" /> </svg>
Finally, each element may use the style attribute directly:
<rect style="stroke:black;fill:yellow" x="20" y="30" width="300" height="200" rx="10" ry="10" /> <rect style="stroke:red; fill:none" x="20" y="330" width="300" height="200" rx="10" ry="10" /> </svg>
The rules of precedence between linking to an external style sheet, embedding and importing style sheets, attaching styling to an element and user defined style sheets are the same as for CSS when used with HTML.
The alternative method of controlling the rendering of an element is to use the rendering attributes directly:
<rect x="20" y="30" width="300" height="200" rx="10" ry="10" fill="yellow" stroke="black" /> <rect stroke="red" fill="none" x="20" y="330" width="300" height="200" rx="10" ry="10" />
Each property that can be defined as part of the style attribute associated with the element can also be defined as a separate attribute. The local effect is the same in both cases. Rather than switch between the two approaches, in this Primer we will define all the local and global rendering via styling. Readers should be aware that they have the choice. A good basis for making a global choice is to use styling when the rendering is not content and use the individual attributes when the rendering is part of the content. However, mixing the two does not give the effect that a graphics programmer might anticipate. If you use a rendering attribute, it has lower precedence than any styling introduced by a style sheet. That decision was made by the Working Group because the original SVG Adobe plugin would have been delayed if the precedence had been the other way round. It was a poor decision and has had unforeseen consequences. A better decision would have been for the rendering attributes to take precedence over the styling. That would have conformed more closely to the ISO Reference Model and would separate rendering that is content from rendering that is just styling. In consequence, if you use rendering attributes for content do not use style sheets at all.