2. Coordinates and Rendering

2.1 Rectangles and Text

It is difficult to talk about either coordinates or rendering in a vacuum so we first need to specify a couple of SVG drawing elements so that we can illustrate the points being made. The two we will use for the moment are text and rect. We will come back and talk about the drawing primitives in more detail later.

The rect element has a large number of attributes but we shall consider just a few for the moment:

<rect x="20" y="30" width="300" height="200" rx="10" ry="10" 
          style="fill:yellow;stroke:black" />
<text x="40" y="130" style="fill:black;stroke:none">Abracadabra</text>

No SVG Support

Figure 2.1: SVG Coordinates

The first two attributes, x and y, of the rect element define the origin of the rectangle. The second two define its width and height. The rx and ry attributes define the radius to be used in rounding the corners. Finally, the style attribute defines its rendering. For the text element, the first two attributes, x and y, define the origin of the text string while the third attribute defines the rendering.

The first thing to notice is that the Y-axis in SVG points downwards. This can be a source of error when defining SVG diagrams so take extra care to remember this fact! The X-axis does go from left to right. The origin of the text by default is at the left-hand end of the text on the baseline. The font used is at the choice of the browser and plug-in.

2.2 Coordinates

The coordinate system used by the SVG diagram as a whole, when displayed as part of a web page, is a negotiation between the browser, what the user would like and the real estate available.

A complete SVG document containing the drawing defined above could be:

<svg viewBox="0 0 500 300"  xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="30" width="300" height="200" rx="10" ry="10" style="fill:yellow;stroke:black" />
<text x="40" y="130" style="fill:black;stroke:none">Abracadabra</text>
</svg>

This could be embedded in an HTML page by the object element:

<object width="500" height="300" data="svgs/figure.svg" alt="SVG Drawing" type="image/svg+xml" >
No SVG Support
</object>

This situation is reasonably straightforward. The svg element has a viewBox attribute that requests that the area from (0,0) to (500,300) in user coordinates is visible in the browser window. The object element requests an area 500 pixels wide and 300 pixels high to put the diagram in. As no units are specified, the assumption is that the units requested are the browser's view of what a pixel width is. Assuming this area is available, the diagram will appear 500 pixels wide and 300 pixels high. A unit in the diagram will be equivalent to a pixel as specified by the browser.

In this Primer, we shall assume that the size of the SVG diagram is defined by the viewBox attribute and that the object element achieves a mapping of this into an equivalent area on the web page. There are other ways of defining the size of the SVG diagram and it can be specified in units other than pixels. The negotiation can be quite complex if the area required is unavailable or the units are real world ones (centimetres, say) and if the aspect ratio of the requested area is different from the area used by the SVG document. This is outside the scope of a short introduction.

2.3 Rendering Model

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.

2.4 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. 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. In consequence, if you use rendering attributes do not use style sheets at all.

2.5 Following Examples

To avoid a great deal of duplication, all the following examples are assumed to have an outer svg element and associated stylesheet as follows:

<svg  viewbox= "0 0 600 400"   xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect {stroke:gray;fill:white;stroke-width:2}
line {stroke:firebrick;stroke-width:2}
path {fill:firebrick;stroke:none}
text {font-family:Verdana;font-size:14px;fill:darkblue;font-weight:bold}
</style>
<rect x="2" y="2"   width="596" height="396"/>
<!-- *****  White Screen Area 600 by 400  with gray border ***** -->

<!-- **************  Example added here  ******************** -->

</svg>

This produces the background for a set of diagrams defined on the (0,0) to (600,400) space as follows:

No SVG Support

Figure 2.2: Slide background, 600 by 400

The rectangle is set two pixels in from the edge to make sure all the border is visible.