SVGのシンボルとユース

定義側：

<!-- svg要素内 -->
<defs>
   <symbol id="dogstamp" viewBox="0 0 395 372">
     <path d="..."/>
   </symbol>
</defs>

呼び出し側：

<!-- 外側はHTML -->
<svg x="0" y="0" width="192px" height="166px" 
     viewBox="0 0 192 166"
>
 <use xlink:href="#myPath"
      class="myPath" fill="#db8c81" 
      x="16px" y="16px"
      width="114px" height="109px"  
  />
</svg>

実際の例：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="100" 
  viewBox="0 0 400 200" 
  style="background-color: lightblue"
>
  <rect x="10" y="10" width="110" height="220" fill="blue" />
  <text y = "30" fill="black" stroke="none" >Hello, World.</text>
  <circle fill-opacity="0.55"
   cx="100" cy="50" r="40" stroke="white" stroke-width="5" 
   fill="yellow" />

  <defs>
    <symbol id="circ2">
      <circle cx="50" cy="50" r="20" fill="red" />
    </symbol>
 </defs>
 <use xlink:href="#circ2" />

</svg>

ハマったのは、cx, cy をuse側から指定できないこと。代わりに、x, y をuseで指定できる。viewBoxと関係するかも知れない。

<svg>
  <defs>
    <symbol id="circ2">
      <circle  r="20" cx="50" cy="100" />
    </symbol>
 </defs>
 
 <use xlink:href="#circ2" x="20" y="50" fill="red" fill-opacity="0.4" />
</svg>