HTML5: Sieben Wege, SVG in HTML-Seiten zu setzen

SVG in HTML-Seiten

Der Clou von SVG ist das nahtlose Einbetten von SVG-Grafiken im HTML-Markup der Webseite, die Integration in die wohlbekannten Techniken des Webdesigns: Wir können SVG inline in HTML einbetten, mit einem img-Tag laden, als Hintergrundbild in CSS einsetzen.

Früher habe ich die Grafiken für Vorlesungen und Webseiten mit Photoshop angelegt und als PNG exportiert. Aber bei jeder Änderung muss das Original – sei es nun ein TIFF in Photoshop oder eine SVG-Grafik aus Inkscape oder Illustrator – wieder hervorgekramt und geändert werden. Dann die Grafik wieder als PNG oder GIF exporieren, erneut in die Webseite einbinden … das nervt …

SVG für Grafiken ist flexibler als GIF- oder PNG-Bilder, kann mit PHP dynamisch erzeugt werden (z.B. für Statistiken und Graphen) und erlaubt obendrein Links aus der Grafik. Und nicht zu vergessen: Javascript kann in die Grafik eingreifen und die Tortengrafik in Bewegung setzen, SVG kann mit CSS animiert werden und hat ein eigenes Animationsmodell.

  1. SVG mit dem object-Tag einbinden,
  2. SVG im src-Attribut des img-Tags einsetzen,
  3. SVG direkt in das HTML-Markup schreiben,
  4. als Hintergrundbild via CSS einsetzen,
  5. via iframe einsetzen,
  6. mit SVG image-Tag
  7. SVG direkt in die CSS-Datei einbetten

1. SVG im object-Tag

<object data="sonnenblumen.svg" type="image/svg+xml">
</object>

  • Vorteile
    Fallback durch Inhalt des object-Tags für IE: Ein alternatives Bild zwischen dem öffnenden und schließenden object-Tag kann die alten Versionen von IE abspeisen.
  • Formen können im SVG-Quelltext mit Links versehen werden.
  • Die SVG-Grafik kann mit Javascript animiert werden (Javascript onmouseover auf dem Kreis im Hintergrund, Link auf der vorderen Sonnenblume).
  • Nachteile
    Die Editoren der Content Management Systeme mischen das object-Tag unweigerlich auf und basteln ein object-Tag für Flash-Video.

2. SVG im img-Tag

Ohne großen Aufwand wird eine einfache SVG-Grafik mit einem img-Tag in der Webseite angezeigt.

sonnenblumen.svg
<img src="sonnenblumen.svg" alt="">
  • Vorteile
    Das img-Tag bietet die bekannteste Syntax.
  • Wenn das img-Tag im CSS für ein responsives Design vorbereitet sind, wird die SVG-Grafik genauso an den Monitor angepasst wie jpg oder png.
  • Nachteile
    Links und Javascript in der SVG-Grafik werden nicht unterstützt

3. SVG als Hintergrundbild

<div style="background: url(sonnenblumen.svg);">
</div>
  • Vorteil:
    Passt sich an die Größe des Viewports an und kann durch Conditional Comments mit einem akzeptablen Ersatz für alte Browser versehen werden.

4. SVG direkt im HTML-Markup

<svg><path … /></svg>
  • Vorteile
    Laden einer weiteren externen Datei entfällt.
  • Formen können mit Links versehen werden
  • kann direkt mit Javascript und CSS animiert werden.
  • Nachteile
    Bei größeren Grafiken wird das Markup verd… unübersichtlich

5. SVG mit iframe in HTML einbetten

Natürlich gibt auch HTML iframe eine SVG-Grafik in der Webseite aus.

<iframe height="180" width="100%" src="obstkorb.svg" scrolling="no">
<p>SVG-Grafik – hier eine Kopie als PNG</p>
<img src="obstkorb.png" width="220" height="220" alt="obstkorb.png" />
</iframe>

Genauso wie mit einem object-Tag stehen mit iframe die Links der SVG-Datei in der Webseite zur Verfügung. Javascript wirkt ebenfalls, wenn SVG via iframe in die Webseite gesetzt wird. Mit den entsprechenden Größenangaben in der SVG-Datei (viewBox) kann die SVG-Grafik beliebig skaliert werden.

Für Content Management Systeme wie WordPress bringt iframe einen Vorteil gegenüber dem object-Tag: Es ist kaum möglich, ein object-Tag mit SVG-Grafik durch die Schleusen der Editoren im CMS zu bringen. Der WordPress-Editor macht aus dem object sofort ein object-Tag für Flash-Video mit allem drum und dran.

6: SVG image-Tag

Und dann gibt es noch einen sechsten Web, SVG in eine Webseite zu setzen – in einem svg-image-Tag. Browser, die SVG nicht unterstützen, korrigieren das SVG-<image>-Tag zum HTML-<img>-Tag und laden ein alternatives Bitmap-Bild. Diese Methode ist so genial, dass sie einen eigenen Beitrag verdient: SVG in einem image-Tag.

7: SVG als base64 oder als url(data … im CSS

Tipp von Andreas unten in den Kommentaren, der das SVG so elegant aus dem HTML in seinem Apfelgame heraushält: SVG-Hintergrundbilder als Base64 direkt in die CSS-Datei einbinden. Das hält das HTML sauber und vermeidet einen weiteren HTTP-Request.

SVG als CSS background via data-URL als Preload-Effekt für eine Slideshow:

.slideshow { background: url("data:image/svg+xml;utf8,<svg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 1000 1000'><defs><path id='p1' d='m 850,517 a 347,347 0 1 1 -695,0 347,347 0 1 1 695,0 z' /></defs><g fill-opacity='0.5'><circle r='100' fill='red'><animateMotion dur='2' repeatCount='indefinite'><mpath xlink:href='#p1' /></animateMotion></circle><circle r='100' fill='green'><animateMotion dur='3' repeatCount='indefinite'><mpath xlink:href='#p1' /></animateMotion></circle><circle r='100' fill='blue'><animateMotion dur='4' repeatCount='indefinite'><mpath xlink:href='#p1' /></animateMotion></circle><circle r='100' fill='yellow'><animateMotion dur='5' repeatCount='indefinite'><mpath xlink:href='#p1' /></animateMotion></circle><circle r='100' fill='orchid'><animateMotion dur='6' repeatCount='indefinite'><mpath xlink:href='#p1' /></animateMotion></circle></g></svg>") no-repeat center center}

Inspiriert von Creative CSS Loading Animations. Die SVG-Animation ist 970 Byte, das CSS für die CSS-Animation 3K

SVG mit Links

SVG-Elemente können in ein HTML a-Tag gesetzt werden. Damit die Links der SVG-Grafik »draussen ankommen«, muss das a-Tag vor dem href-Attribut ein xlink: notieren.

So ohne Weiteres gibt es dann eine Überraschung: Die gelinkte URL wird innerhalb der SVG-Grafik angezeigt.

Das target-Attribut verhindert, dass der Browser die gelinkte Seite im selben Fenster zeigt.

<a xlink:href="http://www.mediaevent.de/xhtml/object.html" target="_top">
   <path d="m 197.36561, … />
</a>

SVG als Image Map

Da SVG-Grafiken Links enthalten und per Javascript gesteuert werden können, wären sie ein idealer Ersatz für die inflexiblen Image Maps. Dem stehen allerdings noch die älteren Version von Internet Explorer (bis einschließlich IE 8) entgegen. Was habe ich im Forum von stackoverflow.com gelesen?

  • It is not supported in IE. – designersvsoft Jul 17 at 10:18
  • The internet is not supported in IE 😉 – Dale Jul 17 at 10:18

SVG in Webseiten

Anmerkung schreiben

Anmerkung

Deine E-Mail-Adresse wird nicht veröffentlicht.

10 Anmerkungen zu “HTML5: Sieben Wege, SVG in HTML-Seiten zu setzen

  1. Paul Holland

    Wie ist denn der optimalste Weg zur Skalierung einer SVG? Und zwar indem man beim Einbinden der Grafik in HTML auf den Objekt- oder Embed-Tag zurückgreift und auf den img-Tag verzichtet. Was soll man mit preserveAspectRatio und ZoomAndPan anstellen, damit die SVG insgesamt skaliert wird?

  2. Andreas K.

    es gibt noch eine Möglichkeit die svg-Grafik im css inline einzubinden:

    .apfel_screen{
    background-image:url(data:image/svg+xml;
    base64,…);
    }

    in meinem Fall ist die SVG base64 codiert – sparte Speicherplatz. So kann man die Grafik in ner css-Datei einlagern – die HTML bleibt sauber.

    Ich habe das so in meinen Apfelspiel eingesetzt:
    http://www.a-d-k.de/apfelgame/index2.htm

    salü

  3. Upon

    Top Erläuterung für die unterschiedlichen Varianten!

  4. Luca

    Hehe, klasse Zitat von stackoverflow! Musste ich mir glatt mal klauen 😉
    http://blog.g-laber.de/index.php/posts/svg-grafik-auf-webseiten

  5. Lance Freeman

    Wenn Sie die SVG-Standardfilter von Illustrator ändern möchten, bearbeiten Sie die Datei „Adobe SVG Filters.svg“ in einem Texteditor. Die Datei befindet sich im Ordner „Dokumente und Einstellungen/<Benutzerverzeichnis>/ Anwendungsdaten/Adobe/Adobe Illustrator CS5 Settings/<Speicherort>“. Sie können die vorhandenen Filterdefinitionen bearbeiten, Filterdefinitionen löschen oder neue Filterdefinitionen hinzufügen.

  6. Paul

    SVG im img-Tag: Kann zum Umstieg motivieren, wenn man alt=”SVG-Grafik Blabla (wird in IE8 und älter nicht angezeigt)” setzt

  7. Mareike Rheyen

    Hi, bei mir in Safari funktioniert gar nichts mit Javascript.

  8. Dirk Schulze

    @admin Manchmal ist eine SVG Grafik auch nichts weiter als das, eine Grafik. In diesem Fall kann es durchaus Sinn machen SVG auch als solche in ein Dokument einzubinden. Und eines darf dabei nicht vergessen werden: SVG in unterliegt keiner cross-origin-restriction, welches durchaus der Fall fuer die anderen Varianten (mit Ausnahme von inline-SVG) ist.

  9. admin

    Es gibt gute Gründe, kein img-Tag für SVG-Grafik zu benutzen: keine Links, keine Scripte, kein Ersatzbild für Browser ohne SVG-Support. Wenn etwas für SVG in img-Tags spricht … hab ich auch nicht nicht entdeckt.

  10. kurt vb

    Internet Explorer 9 macht das aber alles richtig. Nicht immer nur auf IE rumhacken. Dafür sehe ich keine Links in Firefox weder beidem Objecttag noch bei Inline Svg, wohl aber in IE9 und IE10.
    Aber das mit svg in img Tag wußte ich auch noch nicht. Frage mich aber, was das bringen soll …….