<g>, <defs>, <symbol>

Grouping with `<g>`, `<defs>` and `<symbol>`

<g> groups elements that render in place; presentation attributes and transform on it apply to every child. <defs> holds things that render only when referenced: gradients, markers, filters, shapes. <symbol> is a template with its own viewBox, drawn only through <use> at the size the <use> asks for, the building block of icon sprites. <a href> makes a group a link; <foreignObject> embeds HTML.

One group reused twice, and HTML inside SVGHTMLLive

<svg width="600" height="85">
  <defs><g id="stack"><rect width="90" height="18" rx="3"/><rect x="8" y="22" width="80"
    height="18" rx="3"/><rect x="2" y="44" width="86" height="18" rx="3"/></g></defs>
  <use href="#stack" x="10" y="10" fill="#1f5f8b"/>
  <g fill="#b5452f" transform="translate(130 10) rotate(-8 45 31)"><use href="#stack"/></g>
  <foreignObject x="260" y="5" width="330" height="80"><p style="margin:0;font:15px Georgia">
    Six books, one shelf: HTML in a <b>foreignObject</b> wraps, SVG text does not.</p>
  </foreignObject>
</svg>

Browser output of Listing 1.10 — Browser output of 10

The stack's rectangles have no fill of their own, so each copy takes the fill of whatever references it: blue from the <use>, rust from the tilted group around the second copy.

MENU