Denis Potschien 12. August 2016

Warum du SVG inline einbinden solltest

Wer mit SVG-Grafiken arbeitet, hat gleich mehrere Möglichkeiten, diese in ein HTML-Dokument einzubinden. Neben der Verwendung als klassische Bilddatei über das „<img>“-Element lassen sich SVG auch per „<object>“ oder „<iframe>“ implementieren. Letztere haben den Vorteil, dass auch JavaScript und Animationen ausgeführt werden können. Die einfache Variante ist jedoch, SVG inline im HTML-Quelltext auszuzeichnen. Dies erlaubt dir einen einfachen Umgang und Zugriff auf SVG-Formen per CSS und JavaScript.

w3csvglogo

SVG inline: Kein zusätzlicher Request

Zunächst einmal verursachen Inline-SVGs keinen zusätzlichen Request, da sie Teil des HTML-Dokumentes sind. Gerade bei vielen kleinen SVGs auf einer Seite kann sich das bemerkbar machen.

Werden dieselben Grafiken jedoch in mehreren Dokumenten verwendet, bietet sich gegebenfalls an, diese extern einzubinden. Mit entsprechenden Chache-Einstellungen müssen die Grafiken dann nicht bei jedem zu ladenden Dokument ebenfalls neu geladen werden.

Einheitliche Styles

Ein ganz anderer, äußerst praktischer Vorteil von Inline-SVGs ist jedoch die Möglichkeit, das Aussehen der Grafiken über die Stylesheets des HTML-Dokumentes zu steuern.

Füll- und Linienfarbe lassen sich ebenso definieren wie beispielsweise Linienstärke und Transformationen. Dabei zeichnest du SVG-Stylesheets genau so aus wie HTML-Stylesheets und kannst auch HTML- und SVG-Selektoren miteinander kombinieren.

article svg rect {
  fill: red;
}

asidesvg rect {
  fill: green;
}

Im Beispiel wird die Füllfarbe eines SVG-Rechteckes in Abhängigkeit vom elterlichen HTML-Element vergeben. Ist dieses ein „<article>“-Element, wird es rot, ist es ein „<aside>“-Element, wird es grün gefärbt.

Hover-Effekte

Auch Hover-Effekte erstellst du auf diese Weise ganz unkompliziert. So kannst du beispielsweise SVGs innerhalb eines Links platzieren und per CSS einen Hover-Effekt generieren.

<a href="http://www.example.com/">
  <svg>
    <rect x="0" y="0" width="15" height="15" />
  </svg>
</a>

Sowohl das Aussehen des SVG-Rechteckes als auch das Hover-Verhalten definierst du per Stylesheets.

a svg rect {
  background: red;
  transition: all 0.5s ease;
}

a:hover svg rect {
  transform: rotateX(90deg);
}

Im Bespiel wird eine SVG-Grafik innerhalb eines „<a>“-Elementes platziert und anschließend per CSS gestaltet. Ein Hover-Effekt auf das „<a>“-Element sorgt dafür, dass das Rechteck um 90 Grad gedreht wird.

Ein solches Verhalten ist über eine externe Referenzierung nicht möglich. Über das „<img>“-Element eingebundene SVG-Dateien lassen keine Veränderung per CSS zu und per „<object>“ referenzierte Dateien lassen sich nur über Umwege in Kombination per JavaScript verändern.

Einfacherer Zugriff per JavaScript

Da sich eingebundene SVG-Grafiken innerhalb des DOM-Knotenbaums des HTML-Dokumentes befinden, ist nicht nur der Zugriff per CSS auf einzelne Elemente möglich. Auch per JavaScript kannst du ganz bequem auf einzelne SVG-Elemente zugreifen.

Bei per „<object>“ eingebundenen SVG-Dateien ist der Zugriff per JavaScript nur über die Eigenschaft „contentDocument“ möglich. Diese erlaubt es, auf den DOM-Baum externer Dateien zuzugreifen.

document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("rect")[0].setAttribute("class", "hover");

Im Beispiel wird per „contentDocument“ auf ein Element innerhalb einer per „<object>“ referenzierten SVG-Datei zugegriffen.

Ist die SVG-Grafik direkt im HTML-Dokument ausgezeichnet, kannst du auf einzelne SVG-Elemente so zugreifen, wie du auch auf HTML-Elemente zugreifen würdest.

document.getElementsByTagName("rect")[0].setAttribute("class", "hover");

Im zweiten Beispiel greifst du einfach auf das erste „rect“-Element zu, welches in deinem HTML-Dokument ausgezeichnet ist.

Fazit

Inline-SVGs haben viele Vorteile gegenüber extern eingebundener SVG-Dateien. Vor allem das Zusammenspiel mit CSS funktioniert wesentlich einfacher, da du SVG per CSS so behandeln kannst wie alle anderen Elemente deines Dokumentes. Gerade für Interaktionen wie Hover-Effekte ist das ein entscheidender Vorteil.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.