SVG image-Tag

Anstelle eines HTML-src-Attributs beschreibt das SVG-Attribut 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" 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

OFFCLIP

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

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%" 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.

Inkscape SVG-Grafik als PNG exportieren

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 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 des SVG-Tags nicht gesetzt werden, egal ob das Bild eingebunden oder eingebettet wird.

Mehr zu SVG und Bitmap-Bildern

SVG Links Links auf Text oder beliebigen Formen legen die Zieladresse ebenfalls mit xlink:href fest.
HTML picture Alternativ zu SVG-Attributen wie font, fill und stroke wirkt in SVG auch das style-Attribut.
SVG clipPath und CSS clip-path Per Vorgabe ist ein SVG-clipPath eine Schablone bzw. Maske mit einem durchsichtigen Bereich, durch den ein Ausschnitt des Objekts sichtbar ist.
SVG image sieht dem HTML-img-Tag ähnlich, aber hat durchaus seine Besonderheiten.

Externe Quellen

xlink:href heute veraltet – auf https://developer.mozilla.org/