SVG: Defining Elements in a Group (g) and Calling it

Several SVG elements may be grouped together in an svg:g element, then the code is called through svg:use, with attribute xlink:href="#itsId".

Additionally, a transformation may be applied through attribute transform, as exemplified.

Look an the following code and the figure it draws below. The whiskers, two a side, are only coded once, then mirrored. (The large circle is a cat's face, and the two small ones are its eyes.)

<svg width="140" height="170"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Cat</title>
  <desc>Stick Figure of a Cat</desc>
  <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  <circle cx="55" cy="80" r="5"  stroke="black" fill="#339933"/>
  <circle cx="85" cy="80" r="5"  stroke="black" fill="#339933"/>
  <g id="whiskers">
    <line x1="75" y1="95" x2="135" y2="85"  style="stroke: black;"/>
    <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
  </g>
  <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
</svg>