<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150">
  <style>
    .fragment { display: none }
    .fragment:target { display: inline }
    .corner { fill: blue; }
    .side { fill: red; }
    .middle { fill: green; }
  </style>
  <defs>
    <symbol id="diamond" viewBox="0 0 30 30" preserveAspectRatio="none">
      <path d="M15 0 L30 15 L15 30 L0 15 Z"/>
    </symbol>
    <use width="30" height="30" id="corner" class="corner" xlink:href="#diamond"/>
    <use width="30" height="30" id="side" class="side" xlink:href="#diamond"/>
    <use width="30" height="30" id="middle" class="middle" xlink:href="#diamond"/>
    <use width="90" height="30" id="stretch-horizontal-side" class="side" xlink:href="#diamond"/>
    <use width="30" height="90" id="stretch-vertical-side" class="side" xlink:href="#diamond"/>
    <use width="90" height="90" id="stretch-middle" class="middle" xlink:href="#diamond"/>    
    <g id="corners">
      <use x="0" y="0" xlink:href="#corner"/>
      <use x="120" y="0" xlink:href="#corner"/>
      <use x="0" y="120" xlink:href="#corner"/>
      <use x="120" y="120" xlink:href="#corner"/>
    </g>
    <g id="repeat-horizontal-sides">
      <g id="repeat-horizontal-side">
        <use x="30" y="0" xlink:href="#side"/>
        <use x="60" y="0" xlink:href="#side"/>
        <use x="90" y="0" xlink:href="#side"/>
      </g>
      <use y="120" xlink:href="#repeat-horizontal-side"/>
    </g>
    <g id="repeat-vertical-sides">
      <g id="repeat-vertical-side">
        <use x="0" y="30" xlink:href="#side"/>
        <use x="0" y="60" xlink:href="#side"/>
        <use x="0" y="90" xlink:href="#side"/>
      </g>
      <use x="120" xlink:href="#repeat-vertical-side"/>
    </g>
    <g id="repeat-middle-square">
      <g id="repeat-middle-row">
        <use x="30" y="30" xlink:href="#middle"/>
        <use x="60" y="30" xlink:href="#middle"/>
        <use x="90" y="30" xlink:href="#middle"/>
      </g>
      <use y="30" xlink:href="#repeat-middle-row"/>
      <use y="60" xlink:href="#repeat-middle-row"/>
    </g>
    <g id="stretch-horizontal-sides">
      <use x="30" y="0" xlink:href="#stretch-horizontal-side"/>
      <use x="30" y="120" xlink:href="#stretch-horizontal-side"/>
    </g>
    <g id="stretch-vertical-sides">
      <use x="0" y="30" xlink:href="#stretch-vertical-side"/>
      <use x="120" y="30" xlink:href="#stretch-vertical-side"/>
    </g>
    <g id="stretch-middle-square">
      <use x="30" y="30" xlink:href="#stretch-middle"/>
    </g>
  </defs>
  <g class="fragment" id="repeat">
    <use xlink:href="#corners"/>
    <use xlink:href="#repeat-horizontal-sides"/>
    <use xlink:href="#repeat-vertical-sides"/>
    <use xlink:href="#repeat-middle-square"/>
  </g>
  <g class="fragment" id="stretch">
    <use xlink:href="#corners"/>
    <use xlink:href="#stretch-horizontal-sides"/>
    <use xlink:href="#stretch-vertical-sides"/>
    <use xlink:href="#stretch-middle-square"/>
  </g>
</svg>