Use SVG Use

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-Element ist nicht so einfach responsiv 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.

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

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

<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 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-Elements. Im ewigen Ballast von Internet Explorer 11 funktionierte 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 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

Externe Quellen

• Canvas für responsives Inline-SVG
• Nano SVG Compressor Minify & embed fonts to save 80%* bandwidth, exports to multiple image formats.