Inline SVG in einem WordPress Theme

SVGs haben verschiedene Vorteile: Qualität, Flexibilität und, wenn richtig eingesetzt, auch Ladezeit. In diesem Beitrag zeige ich Ihnen, wie man Inline SVG in einem WordPress Theme verwendet.

Warum SVGs verwenden?

SVGs sind ab Internet Explorer 9 und in allen anderen mehr oder weniger modernen Browsern unterstützt.

Das Bildformat SVG wird häufig für Logos und Icons eingesetzt. Hier spielt es seine Vorteile aus:

Qualität

SVG (Scalable Vector Graphics) ist ein vektorbasiertes Format, d.h. die Darstellung ist in allen Auflösungen immer so scharf wie möglich (anders als bei JPG oder PNG). Das macht sich insb. bei mobilen Geräten mit Retina-Auflösung wie das iPhone und andere modernen Smartphones bezahlt.

Flexibilität

SVGs sind XML-basiert, d.h. man kann die Dateien genau so wie beispielsweise HTML-Dateien in einem Code-Editor öffnen, lesen und speichern. Einfache SVG-Grafiken kann man so nur rein durch Code erstellen. Viel besser aber noch: Verwendet man inline SVG, kann man die Größe und Farbe der SVG-Grafik über CSS manipulieren.

Ladezeit

Da wo oft PNG-Dateien eingesetzt werden, z.B. bei Logos und Icons mit Transparenz, sind SVG-Dateien meist schon unoptimiert kleiner. Nutzt man einen SVG Optimizer, ist das Ergebnis noch eindeutiger. Zudem lassen sich SVGs leichter und flexibler inlinen. Und: Kostspielige @2x und @3x Versionen für Retina-Displays gehören der Vergangenheit an.

Natürlich ist SVG kein geeignetes Format für Fotos, sondern nur für vektorbasierte Grafiken wie Logos und Icons.

Inline SVG in einem WordPress Theme

Den folgenden Code kann man in sein eigenes WordPress Theme integrieren, indem man ihn in die functions.php inkludiert und anpasst.

<?php
/*
 * Icon
 */
function my_icon($args) {
  if (!$args['filename']) return;
  $icon = file_get_contents(get_template_directory().'/'.$args['filename']);
  if (!$icon) return;
  ?>
<div class="c-icon <?php echo $args['class']; ?>" role="img" aria-label="">
  <canvas class="c-icon__canvas" width="<?php echo $args['width']; ?>" height="<?php echo $args['height']; ?>"></canvas>
  <?php echo str_replace('<svg', '<svg class="c-icon__svg"', $icon) ?>
</div>
  <?php
}

Das macht die Funktion:

• Den Inhalt einer SVG-Datei auf dem Theme-Verzeichnis auslesen
• Den Code der SVG-Datei ausgeben
• Das ganze in einem Konstrukt aus HTML mit entsprechenden Klassen umschließen (dazu später mehr)

Im Theme kann dann fortan die Funktion wie folgt verwendet werden, um SVGs zu inlinen.

<h1>Lorem ipsum dolor sit amet</h1>
<?php
my_icon(
  array(
    'filename' => 'svg/logo.svg',
    'width' => 414,
    'height' => 84,
    'class' => 'h2'
  )
);
?>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>

Neben dem Dateiname/-pfad relativ zum Theme-Ordner (ohne führenden Slash), sollte die Weite und Höhe angegeben werden, damit die SVG-Grafik proportional skaliert werden kann. Zudem lässt sich eine Klasse angeben, die Größe und Farbe der SVG-Grafik bestimmt. Der Clou: Es genügt beispielsweise, nur die Höhe per CSS-Klasse anzugeben.

Inline SVG proportinal skalieren - auch in älteren Internet Explorer

Das Konstrukt aus HTML und CSS-Klassen ist notwendig, damit die SVG-Grafik proportional skaliert, wenn man beispielsweise nur die Höhe über CSS angibt. Und das auch in älteren Internet Explorer. Das Schöne: Unsere Funktion macht das vollautomatisch, wenn man den folgenden SASS-Code übernimmt.

// @link http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer

.c-icon {
  display: inline-block;
  position: relative;
  height: 2rem; /* default icon height */
  user-select: none;
  &__canvas {
    display: block;
    height: 100%;
    visibility: hidden;
  }
  &__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

All diese Schritte muss man eigentlich nur einmalig in seine eigene Theme-Boilerplate übernehmen. Ab dann ist die Arbeit mit Inline SVGs in WordPress sehr einfach. Das lässt die Vorteile von SVG voll ausschöpfen und seltener auf PNG oder Icon-Fonts zurück greifen, wenn SVG doch besser wäre.