SVG/Element/image
Aus SELFHTML-Wiki
Das image-Element ermöglicht es, externe Grafiken (wie Rasterbilder) zu referenzieren und in SVG einzubinden. Diese können dann durch Filter oder Masken verändert werden.
- Syntax
- Start-Tag: notwendig
- End-Tag: ggf. notwendig
- Elternelemente
- Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt - erlaubte Inhalte
- animate, set
desc, metadata, title
Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
href | CDATA | (auch Xlink:href möglich) | |
height | NUMBER | Höhe | |
PreserveAspectRatio | align, meetOrSlice | Seitenverhältnis | |
transform | CDATA | ||
width | NUMBER | Breite | |
x | NUMBER | x-Position | |
y | NUMBER | y-Position |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Beispiel
<defs>
<filter id="f1">
<feColorMatrix type="matrix" values="..."/>
</filter>
</defs>
<image x="10" y="10" width="200px" height="200px"
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)"
href="Lauf-1.jpg">
<title><feColorMatrix type="matrix" values="..."/></title>
</image>
Das Bild auf der linken Seite wird rechts noch einmal referenziert und durch den primitiven Filter feColorMatrix unterschiedlich gefärbt.
Beachten Sie:
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.
Empfehlung: 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]Siehe auch
Weblinks
- W3C: image Element
- ↑ svgwg: embedded-ImageElement ( 11.2. Placement and scaling of the referenced resource)