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.

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