kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG-Grafiken in Websites/HTML-Seiten einbinden

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? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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 image

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

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

Einbindung als object

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

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

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

Einbindung als iframe

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

Browser SVG als img SVG als background-image Inline SVG
Safari (alle Versionen) ja ja 5+
Chrome (alle Versionen) ja ja ja
Firefox (alle Versionen) ja ja ja
Opera (alle Versionen) ja ja 11.6+
Internet Explorer 9+ 9+ 9+
Alle iOS Browser ja ja 5.1+
Android Browser (bevor Chrome der standard Android Browser wurde) 3+ 3+ 3+
Chrome für Android ja ja ja
Firefox für Android ja ja ja
Opera Mini ja ja nein
Opera Mobile ja ja 12+
IE Mobile ja ja ja

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

12 Kommentare

  1. Nils

    Verfasst am 23. Februar 2017 um 8:51 Uhr.

    Als Ergänzung könnte noch die base64 Enkodierung genannt werden.
    Vorteil:
    Keine zusätzlichen http Requests nötig.
    Ladezeit durchschnittlich mehr als halbiert, gegenüber externer Grafik.
    Nachteil:
    Datengröße ca. 30% erhöht.

    Quelle: https://wiki.selfhtml.org/wiki/Grafik/Grafiken_mit_Data-URI

    • Jonas Hellwig

      Verfasst am 24. Februar 2017 um 7:40 Uhr.

      Hallo Nils, vielen Dank für deine Ergänzung. Ich habe Base64 der Vollständigkeit halber mit aufgenommen. Allerdings ist es genau genommen keine zusätzliche Art der Einbindung. Daher hatte ich es erst einmal weggelassen. Lg Jonas

  2. tjg

    Verfasst am 23. Februar 2017 um 10:52 Uhr.

    Hi,

    ich blick es nicht, jetzt habe für eine neue WP Seite (Kunden) alle SVGs in Illu erstellt wie immer, aufeinmal werden die unter Chrome nicht mehr angezeigt. Nehme ich ältere SVG – von anderen Kunden – werden die angezeigt.

    Welche Einstellung würdest Du machen im Export bei Illu CC 21.0.2

    Danke für Deine Tipp!

    LG

    • Jonas Hellwig

      Verfasst am 23. Februar 2017 um 10:56 Uhr.

      Schau mal hier.

      • tjg

        Verfasst am 23. Februar 2017 um 11:15 Uhr.

        Danke Jonas, die Seite kenne ich fast auswendig…

        Aber jetzt konkret: Welche Einstellungen – also Formateinstellungen – würdet Ihr machen für WP?

        Stil:
        – Interne CSS
        – Inline Format
        – Präsentationsattribute

        Schrift:
        – In Kurven umwandeln
        – SVG

        Bilder:
        – Beibehalten
        – Einbetten
        – Verknüpfen

        Objekt-IDs:
        – Ebenennamen
        – Minimal
        – Eindeutig

        Dezimalstellen:
        – 2

        Minifizieren Ja / Nein

        Interaktiv Ja / Nein

      • Jonas Hellwig

        Verfasst am 23. Februar 2017 um 12:52 Uhr.

        Das hängt davon ab was du genau machen möchtest. Angenommen du willst eine statische SVG erstellen um sie im Editor von WordPress hochzuladen, dann würde ich internes CSS wählen, Schrift in Kurven umwandeln, Bilder einbetten (sofern welche vorkommen) und Objekt IDs minimal halten. Interaktivität sollte eingeschaltet sein, Minifizierung auch.

  3. Torben Döscher

    Verfasst am 23. Februar 2017 um 19:11 Uhr.

    Hi,

    du solltest noch SVG-Sprites erwähnen, funktionieren wunderbar, ich arbeite nur noch so.

    https://css-tricks.com/svg-sprites-use-better-icon-fonts/

    • Jonas Hellwig

      Verfasst am 24. Februar 2017 um 7:42 Uhr.

      Hallo Torben, vielen Dank für deinen Kommentar. SVG-Sprites sind soweit super – aber es handelt sich hierbei nicht um eine zusätzliche Art der Einbindung. SVG-Sprites werden ja entweder inline als <svg> im Code eingebunden oder als CSS-Background. Zur Sprite wird es ja nur durch den »Fragment Identifier«.

      • Sebastian

        Verfasst am 7. April 2017 um 8:21 Uhr.

        oder… ? ;)

      • Jonas Hellwig

        Verfasst am 7. April 2017 um 9:03 Uhr.

        Hoppla – da hatte ich wohl SVG-Code im Kommentar. Jetzt ist alles wieder lesbar.

  4. Reto

    Verfasst am 6. Juli 2017 um 21:51 Uhr.

    Hallo Jonas
    Tolle Seite. Danke.
    Wie sieht dies mit der Auflösung aus? Grundsätzlich ist es ja eine Vektorgrafik, die keine Auflösung braucht. Trotzdem möchte man ev. eine Grösse zuweisen. Macht man dies dann einfach z.B. im img Tag und beachtet das Seitenverhältnis?
    Oder füllt das svg einfach z.B. das umgebende Element aus (z.B. den div container)?

    Merci und Grüsse aus der CH

    • Jonas Hellwig

      Verfasst am 6. Juli 2017 um 23:26 Uhr.

      Hallo Reto, du kannst Höhe und Breite über die height- und width-Attribute von bzw. zuweisen. Wenn du die Grafik als CSS background lädst, kannst du die Größe des Hintergrunds über background-size steuern.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.