SVG image-Tag

SVG und Rasterbild / Bitmap in SVG image-Element

Das SVG image-Element bettet Bilder in ähnlicher Weise wie das HTML-img-Tag in eine SVG-Grafik ein. Das Bild kann eine Bitmap (jpg, png, gif) oder eine weitere SVG-Grafik sein.

Genauso wie beim Einbetten von Bildern in HTML bleibt beim Einbetten von PNG und GIF die Transparenz im Bild erhalten.

Anstelle eines HTML-src-Attributs beschreibt das SVG-Attribut xlink:href den Pfad zur Bilddatei. x und y sind die Koordinaten des eingebetteten Bildes in der Grafik (Abstand vom Nullpunkt oben links), width und height die Abmessungen.

<image height="395" width="600" y="120" x="234" xlink:href="fish.jpg" />

Werden x oder y nicht gesetzt, wird den Attributen automatisch der Wert 0 zugewiesen, dasselbe gilt für width und height. Anders als in HTML5: Ohne Schrägstrich am Ende des SVG-image-Tags verschwindet das Bild.

Freistellen, Masken und Effekte für Bitmap-Bilder

<image xlink:href="fish.jpg"  height="258" width="344" y="10" x="10" />

Bitmap-Bilder in SVG mit dem image-Tag beherrschen Kunststücke, die im HTML img-Element mit CSS nicht zuverlässig in allen Browsern funktionieren: Freistellpfad anhand eines Clip Path, Masken mit einem weichen Übergang und SVG-Filter.

Seitenverhältnis preserveAspectRatio

Das preserveAspectRatio-Attribut des image-Elements passt eingebettete Bilder an das Seitenverhältnis des SVG-Elements an. Im Normalfall sollen eingebettete Bilder ihr Seitenverhältnis beibehalten: preserveAspectRatio=“none“ ist der Vorgabewert () und muss nicht gesetzt werden: Das Bild behält sein Aspect Ratio.

Soll das Bild allerdings die gesamte Fläche ausfüllen, hat aber ein anderes Seitenverhältnis als das SVg-Element, entscheidet preserveAspectRatio mit zwei Werten über die Art der Skalierung.

Die Werte xMinYMin bis xMaxYMax entscheiden, an welche Kante sich das Bild anpasst. Ein Hochformat in einem breitformatigen SVG würde mit preserveAspectRatio=“xMidYMid“ in die Mitte gesetzt. Ein breitformatiges Bild mit preserveAspectRatio=“xMinYMin“ an die obere Kante.

xMinxMidxMaxYMinYMidYMax

Der zweite Wert ist meet oder slice. meet ist die Voreinstellung, das volle Bild bleibt im SVG, aber unten, oben, rechts oder links entsteht ein Abstand.

slice wirkt wie background-size: cover, bedeckt die volle Fläche des SVG und schneidet überstehende Bildteile ab.

<image preserveAspectRatio="xMaxYMin" x="0" y="0" width="100%" height="100%" xlink:href="katzen.jpg"/>

Bilder einbetten oder verknüpfen

<img src="orlando.svg" width="400" height="240" alt="Bild in svg">

Wird SVG mit einem HTML img-Tag eingebunden, laden die Browser das eingebundene Bild der SVG-Datei aus Sicherheitsgründen nicht. Darum bieten Grafikprogramme wie Adobe Illustrator und Inkscape die Option, das Bild direkt als Base64 kodiert in die SVG-Grafik zu setzen.

Bitmap-Bild in Inscape laden: einbetten oder verknüpfen

Sieht man sich den Quelltext einer SVG-Datei mit eingebettetem Bild an, wird der lange BASE64-String sichtbar. Die SVG-Grafik wird um 20 bis 30% größer.

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   height="100%" width="100%"
   viewBox="0 0 792 485">
…
   <image xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAA …" 
          height="258" width="344" y="0" x="0" />
…
</svg>

Das SVG-Tag muss xlink bei externen SVG-Dateien ankündigen: xmlns:xlink=“http://www.w3.org/1999/xlink“. Sitzt die SVG-Grafik inline im HTML, müssen die xmlns-Attribute nicht gesetzt werden, egal ob das Bild eingebunden oder eingebettet wird.

SITEMAP BLOG