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? 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

Nachteile

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

Nachteile

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

Nachteile

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

Nachteile

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

Nachteile

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

Nachteile

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

Benutzerbild

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

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
      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
      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
        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
      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
        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
      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 →