Linking in SVG is much the same as in HTML. SVG has an a element that indicates the hyperlink and defines where the link goes. For example:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" .... <a xlink:href="http://www.w3.org"> <rect width="200" height="40" /> <text x=100" y="30" style="text-anchor:middle">My button</text> </a>
This example consists of a rectangle with the word My button in the middle. Clicking on any part of the rectangle causes the browser to link to the W3C home page. Note that the URL is defined by xlink:href rather than href. This acts just the same as the href attribute in HTML. The user should be careful to enclose both the rectangle and the text within the a element. Otherwise, clicking on the part of the rectangle where the text is would not cause the link to take place. The text appears later than the rectangle and so sits on top of the rectangle. Note the need to declare the xlink namepsace as part of the svg element.
Symbols
Many drawings consist of the same object appearing a number of times in different places with possible minor variations. An example would be symbols on a map. The g element can be used to define symbols to be reused but there is also a rather simple minded symbol facility that is useful on occasions. However, by providing no parameterisation of the symbol, the times it is useful are limited.
A symbol can contain any of the usual drawing elements. For example:
<symbol id="duck"> <path d="M 10 90 c 40 48 120 -32 160 -6 c 0 0 5 4 10 -3 c 10 -103 50 -83 90 -42 c 0 0 20 12 30 7 c -2 12 -18 17 -40 17 c -55 -2 -40 25 -20 35 c 30 20 35 65 -30 71 c -50 4 -170 4 -200 -79 z"/> <text x="150" y="120" style="text-anchor:middle">The Duck</text> </symbol>
The symbol consists of the path defining the duck and the text The Duck positioned in its centre. An instance of the symbol is created by the use element as follows:
<use x="0" y="0" xlink:href="#duck" style="stroke:black;stroke-width:2;fill:none;font-size:48" />
The use element is effectively replaced by a g element with any attributes associated with the use element being transfered to the g element except that the origin specified by the attributes x and y become a transform attribute appended to the end of any transformations defined on the g element. This is a rather bizarre way of doing it and requires some careful thought before understanding what the result is likely to be. The diagram below shows various examples of the use element:
<use x="0" y="0" xlink:href="#duck" style="stroke:black;stroke-width:2;fill:none;font-size:48px" />
<use x="300" y="0" xlink:href="#duck" style="stroke:black;fill:red;font-size:40px;
font-family:Verdana" />
<use x="0" y="400" xlink:href="#duck" transform="scale(0.5)"
style="stroke:none;fill:red;font-size:64" />
<use x="0" y="0" xlink:href="#duck" transform="translate(0,300) scale(0.5)"
style="stroke:white;stroke-width:3;fill:blue;font-size:40px" />
<use x="300" y="200" xlink:href="#duck"
style="stroke:black;fill:none;font-size:16px;writing-mode:tb;" />
The first use is quite straightforward. The duck and associated text are drawn in outline (top left) and the font size is specified by the font-size property to be 40. The second use in the top right sets the fill property to be red and changes the font to Verdana. Notice that if the text is filled so is the path. It would have been better if the two could have been defined separately either by having separate fill properties for text and path or being able to parameterise the symbol.
The third use illustrates the problem as no outline is drawn and it is only by making the text overflow the duck that it can be seen at all. This small duck also illustrates the problem with the way the use is executed. The transform to be applied is changed (by the x, y positioning attributes) to:
transform="scale(0.5) translate(0,400)"
Multiple transforms are applied right to left. In this case this results in the object being scaled but the translate is also scaled. So the translation applied is only (0,200) which is why the red duck appears where it does.
In the fourth use, the x and y values are set to zero resulting in no additional transformation being generated. The scaling is done first followed by the translation in this case. A good rule is therefore if you are going to transform the symbol, do all the transformation using the transform property.
The final example shows how the writing direction can be changed.
Unlike the use of g as a symbol, symbol can be declared outside a def element and it will be assumed that it is not to be rendered.