Using in SVG (use tag)

By mbystedt on Feb 27, 2014, 5:37:55 PM

The 'use' element uses a URI to reference a 'g', 'svg' or other graphical element (rectangle, circle, text, etc) with a unique id attribute and replicates it. This replicated or copied object, inherits any presentation attributes applied to the 'use' tag.

The copy is only a reference to the original so only the original exists in the document. Any change to the original effects all copies. The copy is not part of the document.

<defs>
  <g id="group1" fill="green" opacity="0.9" >
  <rect x="20" y="20" width="100" height="100" opacity="0.5" />
  <rect x="80" y="80" width="100" height="100" fill="gray" />
  </g>
</defs>
<use x="0" y="0" width="200" height="200" xlink:href="#group1" />
<use x="0" y="0" width="200" height="200" xlink:href="#group1" 
  transform="rotate(70, 100, 100)" />

Code 2. The defs and use tag

<use>

Attribute	Explanation	Example
x	X-axis. (x,y) is the top-left corner of the cloned element. Default: 0
y	Y-axis. (x,y) is the top-left corner of the cloned element. Default: 0
width	The width of the cloned element. Default: 100%
height	The height of the cloned element. Default: 100%
xlink:href	A URI reference to the cloned element/fragment. Must be in the same document
Presentation Attributes	All

The point (x,y) is used to translate the referenced object to a new position. The width and height do not cause a scaling transformation to occur. If you want to scale the object then use an explicit transformation.

The width and height does not scaling an object is because the SVG viewer is wrapping the referenced element in a 'g' element. The wrapping 'g' element gets the width and height. Only if you reference something like 'svg' or 'symbol' does it get copied on to the actual object.

Referencing and using entire SVG files is handled by the image element.

Nested Use and Inheritance

Use tags can be nested to quickly build up a complex pattern. Like the g tag, use tags can define inherited attributes. The source (and its parents) are examined first to see if the attribute exists. This extends to nested use tags with the search continuing until the definition of an attribute is found.

<defs>
  <!-- The ellipse group -->
  <g id="ellGroup" fill="none" stroke="inherit">
    <ellipse cx="200" cy="140" rx="10" ry="120" />
    <ellipse cx="200" cy="140" rx="10" ry="120" 
      transform="rotate(20, 200, 200)"  />
  </g>
</defs>
 
<!-- The ellipses inherit maroon from the use tag -->
<use xlink:href="#ellGroup" stroke="maroon" stroke-width="2" />
 
<g id="ellGroupNest" fill="none" stroke="green" stroke-width="2">
  <use xlink:href="#ellGroup" transform="rotate(40, 200, 200)" />
  <g stroke="darkorange">
    <use xlink:href="#ellGroup" stroke-dasharray="10,1" 
      transform="rotate(80, 200, 200)" />
  </g>
</g>
 
<!-- Use the nested group -->
<use xlink:href="#ellGroupNest" transform="rotate(80, 200, 200)" />
<use xlink:href="#ellGroupNest" transform="rotate(160, 200, 200)" />
 
<!-- Despite best efforts, nothing is going to become purple -->
<g stroke="purple">
  <use xlink:href="#ellGroupNest" transform="rotate(240, 200, 200)" />
</g>

Example 1. Nested use tags used to build a flower. (Download)

Advance note: The SVG viewer creates a DOM or Document Object Model when it parses the SVG file. It represents the structure of the document. Only the 'use' tag is added to the tree and SVG viewer searches for the original when it finds a 'use' tag.