svg-part-one-defs.html

<svg>  
  <defs>
    <g id="smiley"
       stroke="black"
       stroke-width="2">
      <circle cx="60" cy ="35" r="34" />
      <circle cx="45" cy ="25" r="5" fill="currentColor" />
      <circle cx="75" cy ="25" r="5" fill="currentColor" />

      <path d="M 40 40           
               a 10 10, 0, 0, 0, 40, 0" 
               fill="none"
      />
      <line x1="36" x2="44" y1="40" y2="40" />
      <line x1="76" x2="84" y1="40" y2="40" />
    </g>
  </defs>
          
  <use x="0" y="0" xlink:href="#smiley" fill="DarkOrchid" />   
  <use x="80" y="0" xlink:href="#smiley" fill="Chocolate" />   
  <use x="0" y="80" xlink:href="#smiley" fill="Aquamarine" />   
  <use x="80" y="80" xlink:href="#smiley" fill="teal" />   
</svg>