SVG/Elemente/eingebundene Inhalte/Bilder

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.

• 
• 
• 
• 
• 
• 
• 

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.

• 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.

ansehen …

Barrierefreiheit

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

Referenz

• SVG/Elemente/image