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

• 

  responsive Imagemaps

  Klickflächen innerhalb eines Bilds?

  Das wird jetzt mit SVG gemacht!
   
• 

  Filter in SVG
  • Licht und Schatten
  • Bildmanipulation
   
• 

  Masken und Beschneidungen
  • clip-path
  • mask
  • clipPath
  • Mask in SVG
   

img vs image in HTML
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.

Zum Stylen kann man aber nicht den Selektor image verwenden, es muss img sein, da das <image>-Tag ein img-Element (HTMLImageElement [sic!]) im DOM generiert.

Mit document.createElement("image") wird dagegen ein image-Element generiert, das sich wie ein span verhält, d.h. die im src-Attribut angegebene Bildressource wird nicht als Bild dargestellt.

Weblinks

• SVGWG.org: image Element
• MDN: image