Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

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

BrowserSVG als imgSVG als background-imageInline SVG
Safari (alle Versionen)jaja5+
Chrome (alle Versionen)jajaja
Firefox (alle Versionen)jajaja
Opera (alle Versionen)jaja11.6+
Internet Explorer9+9+9+
Alle iOS Browserjaja5.1+
Android Browser (bevor Chrome der standard Android Browser wurde)3+3+3+
Chrome für Androidjajaja
Firefox für Androidjajaja
Opera Minijajanein
Opera Mobilejaja12+
IE Mobilejajaja

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. 19 hilfreiche Webdesign-Blogs & -Podcasts zur Weiterbildung - Webdesign Journal
    schrieb am 25.03.2018 um 09:05 Uhr:

    […] kulturbanause-Artikel SVG-Grafiken in Websites/HTML-Seiten einbinden Responsive Sticky Footer WordPress-Theme um Logo-Upload-Funktion (Custom Logo) […]

    Antworten
  2. Reto
    schrieb am 06.07.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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.07.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.

      Antworten
  3. Torben Döscher
    schrieb am 23.02.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/

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 24.02.2017 um 07: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«.

      Antworten
      • Sebastian
        schrieb am 07.04.2017 um 08:21 Uhr:

        oder… ? ;)

      • Jonas Hellwig (Autor)
        schrieb am 07.04.2017 um 09:03 Uhr:

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

  4. tjg
    schrieb am 23.02.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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 23.02.2017 um 10:56 Uhr:

      Schau mal hier.

      Antworten
      • tjg
        schrieb am 23.02.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 (Autor)
        schrieb am 23.02.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.

  5. Nils
    schrieb am 23.02.2017 um 08: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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 24.02.2017 um 07: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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: