SVG/Element/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, 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

Attribute

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>&lt;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.

Siehe auch

• SVG/Tutorials/responsive Imagemaps
• SVG/Tutorials/Filter/Bildmanipulation

Weblinks

• W3C: image Element