A.9 Linking

Often, elements in SVG need to refer, or link, to one another. This is most common when visible elements on canvas use some of the definitions in defs. For example, if you have a rectangle filled with linear gradient, the rect element describes only the rectangle itself. Its gradient is described by a different element, called linearGradient, in the document’s defs, and the rectangle links to that gradient definition.

In order to be linkable, an element must have an id attribute whose value is unique inside this document. Inkscape provides unique ids for all elements automatically. The URL for linking to an element is simply its id preceded by a hash mark (#)—for example, #linearGradient2128. In order to use this URL from a style property, you need to enclose it in parentheses and prefix it with the string url. For example, here’s a linearGradient element and a rectangle linking to it from its fill property:

<defs>
  <linearGradient id="linearGradient2128">
    <stop id="stop2286" offset="0" style="stop-color:#0000ff;stop-opacity:0;" />
    <stop id="stop2284" offset="1" style="stop-color:#0000ff;stop-opacity:1;" />
  </linearGradient>
</defs>

...

<rect id="rect2310"
      y="350"
      x="100"
      width="300"
      height="150"
      style="fill:url(#linearGradient2128)" />

Linking is not always done by style properties; for example, the SVG standard says that gradients can link to one another in order to share color stops and other attributes. In such cases, the xlink:href attribute is used (in other words, the href attribute in the XLink namespace). (XLink is another W3C standard, separate from SVG and used in many XML vocabularies for linking; see http://w3.org/TR/xlink for the specification.) The xlink:href attribute uses the plain URL without the url() wrapper; for example, xlink:href="#linearGradient2128".

SVG allows you to link not only to other elements in the same document but also to other documents, accessible locally or on the Internet, as well as to elements inside them. As of version 0.47, Inkscape does not yet support such cross-document linking to SVG documents, although it can link to external bitmap files that are used as bitmap objects in a document.