SVG/Element/image

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

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.[1]

Siehe auch

Weblinks

  1. svgwg: embedded-ImageElement ( 11.2. Placement and scaling of the referenced resource)