Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]