SVG/Elemente/Metadaten

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

Sie können mit dem title-Element der SVG-Grafik oder Gruppierungselementen eine Beschreibung geben, die nicht gerendert wird. Der Firefox gibt den Inhalt als Tooltip aus. Das title-Element sollte das erste Kind des Elternelements sein.

Sie können mit dem desc-Element der SVG-Grafik oder Gruppierungselementen wie symbol, pattern, gradient eine Beschreibung geben, die nicht gerendert wird. Das desc-Element sollte das erste Kind des Elternelements sein.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<svg> <title>Beispiele für lineare Farbverläufe</title> <defs> <desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc> <linearGradient id="verlauf1"'''}}<nowiki> x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> <linearGradient id="verlauf3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#dfac20" /> <stop offset="100%" stop-color="#3983ab" /> </linearGradient> </defs> <rect id="eins" x="10" y="10" width="150" height="200" fill="url(#verlauf1)" /> <rect id="zwei" x="180" y="10" width="150" height="200" fill="url(#verlauf2)" /> <rect id="drei" x="350" y="10" width="150" height="200" fill="url(#verlauf3)" /> </svg>


Empfehlung: Verwenden Sie Beschreibungen, um Ihre Webseite zugänglicher für Screenreader zu machen.

metadata[Bearbeiten]

In das metadata-Element können Sie Metadaten aus anderen XML-Dialekten wie RDF oder Dublin Core einfügen.

Hier können Sie ein Beispiel aus der W3C-Spezifikation sehen:[1]

Beispiel
<svg width="4in" height="3in" version="1.1" xmlns = 'http://www.w3.org/2000/svg'> <desc xmlns:myfoo="http://example.org/myfoo"> <myfoo:title>This is a financial report</myfoo:title> <myfoo:descr>The global description uses markup from the <myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr> <myfoo:scene><myfoo:what>widget $growth</myfoo:what> <myfoo:contains>$three $graph-bar</myfoo:contains> <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene> </desc> <metadata> <rdf:RDF xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc = "http://purl.org/dc/elements/1.1/" > <rdf:Description about="http://example.org/myfoo" dc:title="MyFoo Financial Report" dc:description="$three $bar $thousands $dollars $from 1998 $through 2000" dc:publisher="Example Organization" dc:date="2000-04-11" dc:format="image/svg+xml" dc:language="en" > <dc:creator> <rdf:Bag> <rdf:li>Irving Bird</rdf:li> <rdf:li>Mary Lambert</rdf:li> </rdf:Bag> </dc:creator> </rdf:Description> </rdf:RDF> </metadata> </svg>

Quellen[Bearbeiten]

  1. http://www.w3.org/TR/SVG2/single-page.html#metadata-MetadataElement#metadate-Example

Referenz[Bearbeiten]