<use>

<use href="#id"> renders a copy of an element or <symbol>, offset by x and y; for a symbol, width and height set the size its viewBox scales to. Plain href replaces SVG 1.1's xlink:href (96.9% support), so new files need no xmlns:xlink; href="icons.svg#cart" reaches into a same-origin file. The copy is a shadow tree that inherits from the <use>, not from where the original sits, so paint inner shapes with currentColor or a custom property and set those per instance.

One star symbol, recolored and resized per instanceHTMLLive

<svg width="600" height="70" font-family="Arial" font-size="15" fill="#263238">
  <symbol id="star" viewBox="0 0 24 24"><path style="fill:var(--fill, none)"
    stroke="currentColor" stroke-width="2"
    d="M12 2.6 14.5 9.2 21.5 9.5 16 13.9 17.9 20.7 12 16.8 6.1 20.7 8 13.9 2.5 9.5 9.5 9.2Z"/>
  </symbol>
  <g color="#e09a10" style="--fill:#e09a10"><use href="#star" y="15" width="40" height="40"/>
    <use href="#star" x="42" y="15" width="40" height="40"/><use href="#star" x="84" y="15"
    width="40" height="40"/><use href="#star" x="126" y="15" width="40" height="40"/></g>
  <use href="#star" x="168" y="15" width="40" height="40" color="#e09a10"/>
  <text x="220" y="42">4.6, The Quiet Harbor</text>
  <use href="#star" x="400" y="15" width="40" height="40" color="#5b3f99"
       style="--fill:#ede7f6"/>
  <use href="#star" x="450" y="0" width="70" height="70" color="#3f7d3a"/>
</svg>

Browser output of Listing 1.11 — Browser output of 11

color feeds currentColor, and the --fill custom property crosses the shadow boundary to fill the first four stars; the fifth falls back to none. Filling exactly 0.6 of it takes a clip path (Clipping and Masking).

MENU