Published on 2004-05-05 by John Collins. Please follow me on Twitter for more:
Note: In order to view the examples used in this tutorial, you will need to have the Adobe SVG Viewer 3.0 installed.
While SVG (Scalable Vector Graphics) has lots of primitive shapes build in, such as rectangles, circles et cetera, you may also like to make your own custom shapes. Defining a custom, composite shape allows you to reuse this shape definition again and again, allowing you to created multiple instances of the same custom shape.
In this tutorial, I will show you how this is possible using an XML (eXtensible Markup Language) technology called XLink, to reference links to custom shapes within the same document, then reuse these shapes using the SVG use tag. Let us begin by looking at XLink.
While you do not have to be an XML guru to use SVG, it often helps to have a look at the many XML technologies out there to help you gain a better insight into SVG and how it works. XLink is concerned with linking objects together, much in the same way as the a href tag in HTML. In practice, XLink works by establishing the XLink namespace within an SVG document, then for each element that supports XLink, setting one or more XLink attributes. The attribute that we will be using is the xlink:href attribute, which is used to retrieve resources.
Now that we have some understanding of the theory behind XLink, let us now look at an example of it in action:
In this example, we have three rectangles, with each one containing a blue circle. However, this composite shape consisting of one rectangle and one circle has only been defined once, then reused three times over. This will become clearer when we next look at the source code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <circle cx="75" cy="50" r="25" id="centerCircle"/> <rect width="150" height="100" x="0" y="0" style="fill:white; stroke:#000000; stroke-width:2px;" id="outerRectangle"/> <g id="compShape"> <use xlink:href="#outerRectangle" x="0" y="0"/> <use xlink:href="#centerCircle" x="0" y="0" fill="blue"/> </g> </defs> <use xlink:href="#compShape" x="75" y="25" id="comp1"/> <use xlink:href="#compShape" x="75" y="145" id="comp2"/> <use xlink:href="#compShape" x="75" y="265" id="comp3"/> </svg>
We begin by including all of the shape definitions we will use within the defs tags in the top of the document. Firstly, we define the circle and give it the id of centerCircle, then the rectangle with the id outerRectangle. At this stage, these shapes are fully-independant primitive shapes. Now we create a custom graphic with the g element, and give this the id of compShape. This is where XLink comes into play: we use the use xlink:href... tags to include a reference to the centerCircle and outerRectangle elements within the g element, effectively making the g element a composite of the two primitive shapes. At this stage you should be realizing the true power of the g element, as you can include any combination of shapes and text within the g element that you like.
After the end of the definition section, we now draw three examples of the composite shape on the screen, each one with different y values to position them apart, and each one with a unique id. As you can see, there is no need to reposition the circle each time the rectangle is moved; as this is a composite all elements move together as one.