SVG-Grafiken in Websites/HTML-Seiten einbinden

Von: Jonas

SVG kann im HTML-Code inline, mit <img>, <object>, <embed>, <iframe> sowie im CSS-Code als background-image in eine Website eingebunden werden.

Aktualisiert von 2017 – 2023 13 Kommentare

Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? Wir beschreiben die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

SVG inline einbinden

Wenn ihr SVG-Grafiken exportiert, steht euch das Dateiformat *.svg oder der SVG-Code zur Verfügung. Der SVG-Code kann direkt in den HTML-Code der Website eingebettet werden.

<svg> <!-- hier folgt der Code --> </svg>

Vorteile

• Es wird keine externe Datei geladen
• Animationen und Manipulationen mittels CSS oder JavaScript sind problemlos möglich
• Verlinkungen innerhalb der SVG sind möglich

Nachteile

• Der HTML-Code wird aufgebläht und ist unübersichtlich
• Fehler im SVG-Code haben ggf. Auswirkungen auf die Website

Einbindung als <img> (HTML)

Wenn die SVG-Grafik als Datei vorliegt, kann sie auch mittels <img>-Tag in die Website eingebunden werden.

<img src="kulturbanause-logo.svg">

Vorteile

• Unkomplizierte und bekannte Handhabung
• Breakpoints in der SVG funktionieren

Nachteile

• Keine Möglichkeit der Manipulation mittels JavaScript oder CSS außerhalb der Datei
• JavaScript und Links funktionieren nicht mehr
• Animationen werden nicht in allen Browsern ausgeführt

Einbindung als background-image (CSS)

Wie alle anderen Grafikformate auch, sind SVGs als CSS Hintergrundbild möglich.

.site-logo {
  height: 200px;
  width: 200px;
  background: url(kulturbanause-logo.svg) 50% 50% no-repeat;
}

Vorteile

• Bekannte Handhabung

Nachteile

• Keine Möglichkeit der Manipulation mittels JavaScript oder CSS außerhalb der Datei
• JavaScript und Links funktionieren nicht mehr

Inline-SVG in als background-image (CSS)

SVG-Grafiken können auch inline in die url()-Funktion von CSS integriert werden. Dazu muss lediglich der MIME-Type und der Zeichensatz korrekt angegeben werden. Anschließend folgt der ganz normale SVG-Code. Zur Umwandlung einer SVG in den entsprechenden CSS-Code könnt ihr Online URL Encoder nutzen.

body { 
  background-image: url("data:image/svg+xml;utf8,<svg> … </svg>");
}

Einbindung als <object> (HTML)

Mittels <object>-Tag von HTML kann SVG ebenfalls integriert werden. Der Vorteil dieser Methode besteht darin, dass ein Fallback gebaut werden kann.

<object type="image/svg+xml" data="kulturbanause-logo.svg">
  <!-- fallback -->
  <img src="kulturbanause-logo.png" alt="">
</object>

Vorteile

• Automatischer Fallback möglich
• Links funktionieren in der SVG
• JavaScript in der SVG funktioniert

Nachteile

• Möglicherweise komplizierte Integration im CMS, da der <object>-Tag oft nicht unterstützt wird

Einbindung als <embed> (HTML)

Auch der <embed>-Tag von HTML kann zur Integration von SVG verwendet werden.

<embed src="kulturbanause.svg" height="200" width="400"> 

Einbindung als <iframe> (HTML)

Das <iframe>-Element von HTML kann ebenfalls genutzt werden um SVGs in die Website zu integrieren.

<iframe height="200" width="400" src="kulturbanause.svg" scrolling="no">
  <!-- fallback -->
  <img src="kulturbanause.png" width="400" height="200" alt />
</iframe>

Vorteile

• Links in der SVG funktionieren
• JavaScript in der SVG funktioniert
• Domainübergreifend einsetzbar

Nachteile

• Responsive Design und <iframe> sind aufwändig

Kodierung in Base64

SVG-Grafiken können auch in Base64 kodiert in eine Website integriert werden. Dabei wird die Datei mit Hilfe eines Tools in eine DataUri umgewandelt. Diese Zeichenkette kann anschließend wie eine normale SVG in die HTML-Seite integriert werden. Es handelt sich hierbei also nicht um eine zusätzliche Art der Einbindung, sondern um eine alternative »Darstellung« für den Bildpfad. Die Möglichkeiten der Animation und Interaktivität sind folglich abhängig von der gewählten Art der Einbindung.

<img src="data:image/svg+xml;base64,PHN2ZyB4bW … c3ZnPg==" />

Vorteile

• Kein zusätzlicher HTTP-Request notwendig

Nachteile

• Es entstehen etwas größere Dateien
• Der Quellcode wird ggf. unübersichtlich

Browser-Support

Die folgende Tabelle gibt eine grobe Übersicht über die Browser-Kompatibilität. Wenn euch interessiert welche Art der Interaktion oder Animation in den verschiedenen Browsern in Abhängigkeit zur Art der Einbindung funktioniert, schau euch auch diesen Artikel an: SVG-Browsersupport für Animationen und Interaktionen

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing