SVG/Elemente/Metadaten
Aus SELFHTML-Wiki
Inhaltsverzeichnis
title[Bearbeiten]
Sie können mit dem title-Element der SVG-Grafik oder Gruppierungselementen eine Beschreibung geben, die nicht gerendert wird. Anders als beim gleichnamigen HTML-Element title wird der Inhalt als Tooltip ausgegeben. Das title-Element sollte das erste Kind des Elternelements sein.
Beachten Sie: In SVG ist es anders als in HTML möglich und erlaubt, mehrere title-Elemente zu verwenden.
desc[Bearbeiten]
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.[1]
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:[2]
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]
- ↑ sitepoint: Tips for Creating Accessible SVG
- ↑ http://www.w3.org/TR/SVG2/single-page.html#metadata-MetadataElement#metadate-Example
