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.

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

Siehe auch

Weblinks

  1. HTML 5 Spezifikation über <image>: The "in body" insertion mode
  2. svgwg: embedded-ImageElement ( 11.2. Placement and scaling of the referenced resource)