SVG/Element/image
Aus SELFHTML-Wiki
< SVG | Element(Weitergeleitet von SVG/Elemente/image)
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.
Aus Gründen, die die HTML Spezifikation nur mit einem don't ask beantwortet[1], kann das image-Tag auch außerhalb von SVG in einem HTML Kontext benutzt werden. Der Browser interpretiert es dann aber so, als sei es ein img-Element, mit den Attributen dieses Elements.
- 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.[2]Siehe auch
- SVG/Tutorials/responsive Imagemaps
- SVG/Tutorials/Filter/Bildmanipulation
- Masken und Beschneidungen/Masken
Weblinks
- W3C: image Element
- ↑ HTML 5 Spezifikation über <image>: The "in body" insertion mode
- ↑ svgwg: embedded-ImageElement ( 11.2. Placement and scaling of the referenced resource)
