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ß.

SVG ab nach unten

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.

SVG pattern und gradient

Braucht das SVG pattern, gradient oder filter, müssen die Elemente mit nach oben zur Anzeige der Grafik.

Spektralkurven X,Y,Z
<div class="svginside" style="max-width:400px">
   <canvas width="747" height="526"></canvas>
   <svg viewBox="0 0 747 526" width="100%" height="100%">
      <title>Spektralkurven X,Y,Z</title>
      <linearGradient id="sp" y2="1" x2="700" y1="1" x1="0" gradientUnits="userSpaceOnUse">
         <stop stop-color="hsl(300,90%,10%)" offset="0"/>
…
         <stop stop-color="hsl(10,90%,40%)" offset="0.9"/>
         <stop stop-color="hsl(0,90%,20%)" offset="1"/>
      </linearGradient>
      <use xlink:href="#curves" />
   </svg>
</div>

Der Rest des SVG-Markups sitzt weiterhin im Fuß der Seite, und zwar ohne Gradient, Filter oder Pattern – einmal oben reicht. Das ist natürlich etwas schade, den ein paar Verläufe blasen das Markup schnell wieder auf.

Und warum sitzt das canvas-Tag über dem SVG?

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

400 500 600 700 Wellenlänge [nm] Z Y X