SVG image-Element: Bitmap-Bilder in SVG

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.

Bitmap einbinden oder einbetten?

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 Domain oder auf einer anderen Adresse gespeichert ist.

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.

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 schon Illustrationsprogramme wie Inkscape oder Illustrator die Option, Bitmap-Bilder als Datei einzubinden oder direkt als Data-Uri einzubetten.

JPEG 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.

Das SVG image-Element

Auf den ersten Blick hat das SVG image-Tag viel mit dem HTML-img-Tag gemeinsam.

<svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="225" y="50" width="450" height="450" xlink:href="paris.html"/>
</svg>

Wichtig ist der schließende Schrägstrich der SVG-Elemente, der beim image-Tag ebenfalls unbedingt sein muss: Ohne Schlussstrich rendern die Browser die folgenden Elemente nicht.

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.
xlink:href
Anstelle des src-Attribut aus HTML braucht SVG ein xlink:href-Attribut.
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 ist responsive

Das viewBox-Attribut zusammen mit width="100%" und height="100%" reicht schon aus, damit sich die SVG-Grafik an den 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%">

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.
JPEG Bildimport in Inkscape Art des Bildimports: Auflösung des Bildes (dpi): Darstellungsmethode (Rasterbilder): Nicht wieder nachfragen Einbetten Verknüpfen Aus Datei Standard-Importauflösung keine (automatisch) Glätten (verbesserte Qualität) Pixelig (verbesserte Geschwindigkeit) Cancel OK jpeg Bitmap-Bildimport