Use SVG Use

SVG use: Elemente kopieren und duplizieren und beliebig platzieren

SVG inline in die Seite einzubinden, hat seinen Reiz: CSS- und Javascript-Animationen und kein zusätzlicher HTTP-Request. Aber niemand kann sich des Gefühls erwehren, dass der HTML-Quelltext mit inline-SVG schneller aufgeht wie ein Hefekloß.

Ein oder zwei KB sind vielleicht erträglich, wenn es bei einem Einschluss bleibt. Mit einem iframe für die SVG-Datei geht nichts verloren, weder Schriften noch Javascript, aber ein responsives iframe ist nicht so einfach responsive wie ein direktes SVG und zudem kommt wieder der zusätzliche HTTP-Request ins Spiel.

Verbannen wir den gesamten SVG-Quelltext in den Fuß der Seite und verbergen ihn mit display:none, reichen drei Zeilen, um die Grafik mitsamt CSS und Animationen an Ort und Stelle zu platzieren.

Ans Ende der Seite
<div class="hidden">
   <svg viewBox="0 0 400 240">
      <g id="darktable" style="font-size:12px;font-family:Helvetica, Arial, sans-serif;fill:#ccc">
      …
      </g>
   </svg>
</div>
An Ort und Stelle platziert
<figure>
  <svg viewBox="0 0 400 240" width="100%" height="100%">
    <title>Infografik Darktable</title>
    <use xlink:href="#darktable" />
  </svg>
</figure>

SVG use ist also nicht nur praktisch zum Duplizieren von SVG-Elementen innerhalb einer Grafik, sondern zieht komplette Gruppen von einem Platz auf einen anderen. Die Gruppe rund um die vollständige Grafik braucht nur das ID-Attribute, das im use-Tag aufgeführt wird. Das angezeigte Duplikat braucht nur das use-Tag mit xlink:href=“#<ID“>

Das SVG-Tag selber braucht keinen xlink-Namensraum, wenn sie inline in HTML sitzen.

Inline SVG responsive – auch in IE11

Eigentlich ist inline-SVG automatisch responsive. Alles war gebraucht wird ist das magische viewBox-Attribut des SVG-Tags. Im ewigen Ballast von Internet Explorer 11 funktioniert das einfache viewBox-Attribut allerdings nicht.

Mit einem leeren unsichtbaren <canvas>-Element passt auch IE 11 das SVG an die Größe des umfassenden Elements an.

<div class="turtle">
  <canvas width="300" height="234"></canvas>
  <svg viewBox="0 0 300 234">
    <use xlink:href="#turtle" />
  </svg>
</div>

Mit einer Handvoll CSS:

canvas {
  display: block;
  width: 100%;
  visibility: hidden;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.turtle {
  position:relative;
  width:100%;
  max-width: 420px;
}

Gefunden bei Using canvas to fix SVG scaling in Internet Explorer