SVG/Elemente/eingebundene Inhalte/Bilder
Aus SELFHTML-Wiki
Mit dem image-Element können Sie Rastergrafiken, wie z. B. PNG-, JPEG- oder GIF-Grafiken, in SVG einbinden. Diese können dann durch Filter oder Masken verändert werden.
Folgende Angaben sind nötig:
x
: horizontale Position der linken oberen Eckey
: vertikale Position der linken oberen Eckeheight
: Höhewidth
: Breitexlink:href
: URI der Grafik
Beachten Sie: In SVG 2.0 können Sie bei Angabe der Höhe oder Breite den jeweils anderen Wert mit
auto
angeben. Er wird dann automatisch im Verhältnis 2:1 berechnet.[1]preserveAspectRatio
: defer, align, meetOrSlice; Standardwert:xMidYMid meet (legt Seitenverhältnis fest)
Beispiel
ansehen …
<defs>
<filter id="f1">
<feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
</filter>
</defs>
<image x="10" y="10" width="200px" height="200px"
xlink:href="Lauf-1.jpg">
<title>Lauf an der Pegnitz - normal ohne Filter</title>
</image>
<image x="230" y="10" width="200px" height="200px" filter="url(#f1)"
xlink:href="Lauf-1.jpg">
<title><feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
</image>
Das Bild auf der linken Seite wird rechts noch einmal referenziert und durch den primitiven Filter feColorMatrix unterschiedlich gefärbt.
Barrierefreiheit[Bearbeiten]
Mit image eingebundene Grafiken haben keinen alt-Text, der von Screenreadern gelesen werden kann. Wie im obigen Beispiel realisiert, können Sie aber jeder Grafik einen title oder eine Beschreibung mit desc hinzufügen.
Quellen[Bearbeiten]
- ↑ svgwg: embedded-ImageElement ( 11.2. Placement and scaling of the referenced resource)