Reusing cut guide elements

[jhauberg]

Cut guide SVGs appear multiple times in generated output; this happens because each card must define an SVG before utilizing the <use> element.

But something about this seems wrong. Is there anyway we could maybe create a "prototype" card, hidden, somewhere at the top of the document, and then only reference by <use> elements for actual cards?

<div class="card card-size-25x35">
  <svg class="cut-guide cut-guide-top cut-guide-left" viewBox="0 0 10 10">
    <g id="cut-guide-lines">
      <line class="cut-guide-line" x1="5" y1="0" x2="5" y2="10" />
      <line class="cut-guide-line" x1="0" y1="5" x2="10" y2="5" />
    </g>
  </svg>
  <svg class="cut-guide cut-guide-top cut-guide-right" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <svg class="cut-guide cut-guide-bottom cut-guide-left" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <svg class="cut-guide cut-guide-bottom cut-guide-right" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <div class="card-content">
    <div class="trickbook-card" style="background-image: url(res/card-leader-front.png);">
      <!-- no content -->
    </div>
  </div>
</div>
<div class="card card-size-25x35">
  <svg class="cut-guide cut-guide-top cut-guide-left" viewBox="0 0 10 10">
    <g id="cut-guide-lines">
      <line class="cut-guide-line" x1="5" y1="0" x2="5" y2="10" />
      <line class="cut-guide-line" x1="0" y1="5" x2="10" y2="5" />
    </g>
  </svg>
  <svg class="cut-guide cut-guide-top cut-guide-right" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <svg class="cut-guide cut-guide-bottom cut-guide-left" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <svg class="cut-guide cut-guide-bottom cut-guide-right" viewBox="0 0 10 10">
    <use xlink:href="#cut-guide-lines" />
  </svg>
  <div class="card-content">
    <div class="trickbook-card" style="background-image: url(res/card-trick-front-2-ollie.png);">
      <!-- no content -->
    </div>
  </div>
</div>