SVG image-Element: Bitmap-Bilder und Grafiken einbetten

SVG image: Bitmap in SVG einbinden oder einbetten

SVG-Grafik kann sowohl die typischen SVG-Elemente wie path, rect und circle einbinden, als auch Bitmap- oder Rasterbilder – sprich: jpg, png und gif.

SVG bringt einen Stapel von Effekten für Bitmaps mit, die auch in CSS schon verfügbar sind, aber dort noch nicht zuverlässig von allen Browsern unterstützt werden, etwa Maskieren, Freistellpfade und Effekte.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Bitmap einbinden oder einbetten?

Das image-Element ist das SVG-Pendant zum HTML-img-Element.

Externe SVG-Datei mit Bitmap-Bild
<image x="400" y="100" width="400" height="400" href="kamera.png" alt="Bitmap-Bild in SVG"/>

Wenn die SVG-Datei extern gespeicherte Bitmap-Bilder enthält oder andere SVG-Datei lädt, kann sie nicht mit einem HTML-img-Tag geladen werden, denn die meisten Browser verweigern sowohl die Anzeige des externen Bitmap-Bildes als auch einer geladenen SVG-Datei, gleich ob sie in derselben Domaine oder auf einer anderen Adresse gespeichert ist. Externe Medien in SVG-Dateien werden als mögliches Sicherheitsrisiko behandelt.

Die Alternativen sind

  1. iframe oder object anstelle eines HTML-img-Tags,
  2. Bitmap als Data-Url einbetten,
  3. SVG inline ins HTML-Markup setzen.
<image x="400" y="100" width="400" height="400" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAG … "/>

SVG-Attribute für image

x, y
Die Koordinaten x und y bestimmen die Position innerhalb des SVG-Elements. Mit x="0" und y="0" würde das Rasterbild wie jedes SVG-Element in der Ecke oben links sitzen.
width und height
des Bildes müssen gesetzt werden. Ohne width und height oder width="0" / height="0" würde das Bild nicht geladen. Anstelle von absolute Werten können auch Prozentwerte eingesetzt werden – damit werden width und height relativ zum SVG-Element.
href
Pfad zur Mediendatei
xlink:href
alte Notation der Pfadangabe – gilt heute als veraltet und soll durch href ersetzt werden.
xmlns:xlink="http://www.w3.org/1999/xlink"
Wenn das SVG-Bild als externe Datei mit einem HTML-img-Tag eingebunden wird, muss für den Namensraum xlink muss im öffnenden SVG-Tag gesetzt sein. Für SVG, das inline ins HTML gesetzt wird, gilt das nicht: nur das viewBox-Attribut sowie width und height sind erforderlich.
kein alt-Attribut
Das SVG-image-Element kennt kein alt-Attribut!

SVG preserveAspectRatio

SVG akzeptiert neben den üblicherweise absoluten Werten auch relative Angaben, insbesondere Prozentangaben für width und height. So lassen sich auch Bitmaps an die Maße des SVG-Containers anpassen, z.B. um den SVG-Container vollständig mit einem Rasterbild zu füllen. Das elegante cover und contain aus CSS weicht dem hölzernen preserveAspectRatio.

preserveAspectRatio zeigt keine Wirkung, wenn kein viewBox-Attribut das Seitenverhältnis der Grafik vorgibt. Hat das umfassende Element ein anderes Seitenverhältnis als das Bild, bestimmt preserveAspectRatio mit zwei Werten Lage und Skalierung der Grafik.

preserveAspectRatio
nicht erforderlich
preserveAspectRatio
none
preserveAspectRatio
xMidYMid meet
preserveAspectRatio
xMidYMin meet
preserveAspectRatio
xMidYMin meet
preserveAspectRatio
xMidYMid slice
preserveAspectRatio
xMidYMid slice
preserveAspectRatio
xMidYMid slice
preserveAspectRatio
xMidYMid slice
preserveAspectRatio="xMidYMid meet"
Ist die Vorgabe und zentriert die die Bitmap je nach Querformat oder Hochformat vertikal bzw. horizontal.
preserveAspectRatio="none"
streckt und quetscht das Rasterbild auf das Seitenverhältnis des umfassenden Elements.
slice
anstelle von meet wirkt wie CSS background-size: cover, passt das Bild in beiden Dimsionen an und schneidet den Überstand ab.

Bitmap-Bilder als data URL einbetten

Bilder und Schriften lassen sich wie bei PDFs und bei Schriften in HTML-Seiten als dataURL per base64 in SVG einbetten. Während das Umwandeln von Schriften eher ungemütlich ist, bieten Illustrationsprogramme wie Inkscape, Adobe Illustrator und CorelDraw die Option, Bitmap-Bilder als Datei einzubinden oder direkt als Data-Uri einzubetten.

JPG Bildimport in Inkscape
JPG Bildimport in Inkscape

Die dataURL-kodierte Version von JPEG oder PNG ist immer rund 20 bis 30% größer als das Original. Dafür erspart sie den Verweise und das Hantieren mit zwei Dateien.

chamaeleon

Externe JPG-Datei: 46KB

chamaeleon

Eingebettet als Data-URL: 64KB

Das Einbetten als Data-URL bringt mehr Flexibilität, verringert den Aufwand des Datei-Managements und verhindert, das Bilder versehentlich gelöscht werden. Insofern benutzen viele Anwendungen dieses Verfahren, und auch PDF und Textverarbeitungsprogramme bieten diese Option. Muss man abwägen …

Schrift und Webfonts für SVG

Font per base64 in CSS einbetten

SVG inline in HTML

Wenn die SVG-Datei nur wenige Elemente enthält, kann sie auch direkt ins HTML gesetzt werden. Dann unterscheidet sich das image-Tag von SVG kaum vom HTML-img-Tag.

SVG ist responsive

Das viewBox-Attribut zusammen mit width="100%" und height="100%" reicht schon aus, damit sich die SVG-Grafik am verfügbaren Platz ausrichtet. In diesem Sinne passen sich auch eingebettete Bitmap- oder Rasterbilder innerhalb der SVG-Grafik problemlos an.

Was dem SVG allerdings fehlt, sind Techniken wie srcset und sizes, mit denen verschiedene Auflösungen einer Bitmap entsprechend der Größe des Viewports eingebunden oder eingebettet werden, um die mobilen Geräte von einer zu hohen Pageload zu entlasten.

Bei einigen SVG-Anwendungen hilft aber ein kleiner Trick, um ein Bitmap-Bild mit Größenvariationen in SVG einzusetzen: Das Bild wird mit CSS als background-image eingebunden. Hilft aber nur, wenn das SVG inline im HTML-Quelltext setzt, denn externes SVG kann keine externen Ressourcen einbinden.

Aus dem Nähkästchen
.svgbg {
	background-image: url('paris-300.jpg'); 
	background-position: center center ; 
	background-repeat: no-repeat; 
	background-size: 60%;
}

@media (min-width: 680px) {
	.svgbg { background-image: url('paris-600.jpg'); }
}

Das Rasterbild wird als Hintergrund in das SVG-Element gesetzt.

<svg class="svgbg" viewBox="0 0 900 600" width="100%" height="100%">