Referencing objects

SVG supports two types of URI references:

• Local URI reference (Relative referencing) - the referenced object is found in the same document.
• Non-Local URI reference (Absolute referencing) - the referenced object is found in another document.

The <defs> Element

The <defs> element defines objects which will be referenced later on in the same file. Where a <g> element can be used, a <defs> element can also be used, and vice versa.

The<defs> element provides a place for objects which are not meant to be drawn when they are defined, such as gradients, patterns, styles, scripts, template objects and private data. The following example shows a gradient can be defined within a <defs> element so that they can be referenced later in the document:

.......  <svg>    <defs>        <linearGradient id="Gradient01"> .......... </linearGradient>    </defs>     .......    <rect style="fill:url(#Gradient01) ............/>  </svg>

All the definition of objects that will be used later on should be done in the same <defs> structure. Therefore there is only one <defs> structure in a single SVG file.

The <symbol> Element

The <symbol> element allows to define graphical template objects that can be reused in the following cases:

• Multiples instances of the same object
• Basic object referenced by many others
• Definition of an element of a font

The <symbol> elements are never rendered directly; their only usage is as something that can be referenced using the <use> element.

The <use> Element

The purpose of the <use> element is to reuse defined container elements like <svg> and <g>. The <use> element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.

The <use> element can reference either an element of the same file whose ancestor is a <defs> element, or an element of another file whose ancestor is a <defs> element.

The <use> element cannot reference the entire file.

Here is an example that the <symbol> element is instantiated by a <use> element:

<defs>     <symbol id="s1">          .........     </symbol>   </defs>  <g >      <use xlink:href="#s1" />  </g>

The <use> element has the attributes x, y, width and height which can be used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

The <image> Element

The <image> element allows to reference whole images inside a rectangular area defined inside the user space.

The <image> element can refer to raster image files such as PNG or JPEG or to an SVG file.

Main attributes: “x”, “y”, “width”, “height” and “xlink:href”.

Example :

<image x="200" y="300" width="100px" height="100px" xlink:href="myimage.png" />

Unlike <use>, <image> cannot reference elements inside the SVG document.