SVG/Elemente/eingebundene Inhalte/Bilder

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem image-Element können Sie Rastergrafiken, wie z.B. PNG-, JPEG- oder GIF-Grafiken, in SVG einbinden. Diese können dann durch Filter oder Masken verändert werden.

  • SVG 1.0
  • SVG 1.1
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind nötig:

  • x: horizontale Position der linken oberen Ecke
  • y: vertikale Position der linken oberen Ecke
  • height - Höhe
  • width - Breite
  • xlink:href - URI der Grafik
Beachten Sie: 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]
  • preserveAspectRatio: defer, align, meetOrSlice; Standardwert:xMidYMid meet (legt Seitenverhältnis fest)
Beispiel ansehen …
  <defs>
    <filter id="f1">
      <feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
  </defs>

  <image x="10" y="10" width="200px" height="200px"
    xlink: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)"
    xlink:href="Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
  </image>
Das Bild auf der linken Seite wird rechts noch einmal referenziert und durch den primitiven Filter feColorMatrix unterschiedlich gefärbt.

Barrierefreiheit[Bearbeiten]

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.


Quellen[Bearbeiten]

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

Referenz[Bearbeiten]