Signatur
Beschreibung
Die Schnittstelle SVGMetadataElement steht für das Element <metadata> in einem SVG-Dokument. Das Element enthält strukturierte Zusatzinformationen zur Grafik, zum Beispiel Titel, Urheber, Lizenz oder Erstellungsdatum. Häufig werden dafür XML-Vokabulare wie RDF, Dublin Core (dc:) oder Creative Commons (cc:) in eigenen Namensräumen verwendet. Grafikprogramme wie Inkscape schreiben solche Blöcke automatisch in exportierte Dateien.
Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Alles wird von SVGElement, Element, Node und EventTarget geerbt. In der Praxis nutzt man sie vor allem, um Metadaten per querySelector, getElementsByTagNameNS oder textContent auszulesen, oder um mit instanceof SVGMetadataElement den Elementtyp zu prüfen.
Der Inhalt von <metadata> wird nie dargestellt und hat keinen Einfluss auf das Rendering. Für barrierefreie, von Menschen lesbare Beschreibungen sind <title> und <desc> besser geeignet. <metadata> ist für maschinenlesbare Daten gedacht.
Rückgabewert
document.createElementNS("http://www.w3.org/2000/svg", "metadata") oder wenn der Browser SVG-Markup einliest. Einen öffentlichen Konstruktor gibt es nicht.Beispiele
Metadata-Element erzeugen und in ein SVG einfügen
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("viewBox", "0 0 100 100");
const meta = document.createElementNS(SVG_NS, "metadata");
// Einfache JSON-Metadaten als Text ablegen
meta.textContent = JSON.stringify({ autor: "Max Muster", lizenz: "CC-BY-4.0" });
svg.prepend(meta);
document.body.append(svg);
console.log(meta instanceof SVGMetadataElement);
console.log(meta instanceof SVGElement);Dublin-Core-Autor aus RDF-Metadaten auslesen
const markup = `
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata>
<rdf:RDF>
<rdf:Description>
<dc:creator>Erika Beispiel</dc:creator>
<dc:title>Logo</dc:title>
</rdf:Description>
</rdf:RDF>
</metadata>
<circle cx="50" cy="50" r="40"/>
</svg>`;
const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
const meta = doc.querySelector("metadata");
const DC = "http://purl.org/dc/elements/1.1/";
const creator = meta.getElementsByTagNameNS(DC, "creator")[0]?.textContent;
const title = meta.getElementsByTagNameNS(DC, "title")[0]?.textContent;
console.log(`${title} von ${creator}`);Metadaten vor der Auslieferung entfernen (SVG verkleinern)
const stripMetadata = (svgString) => {
const doc = new DOMParser().parseFromString(svgString, "image/svg+xml");
doc.querySelectorAll("metadata").forEach((el) => el.remove());
return new XMLSerializer().serializeToString(doc);
};
const input = '<svg xmlns="http://www.w3.org/2000/svg"><metadata>Editor-Daten</metadata><rect width="10" height="10"/></svg>';
console.log(stripMetadata(input));// Wichtig · Fallstricke
- Namensraum beachten:
document.createElement(\"metadata\")erzeugt ein HTML-Element (HTMLUnknownElement) statt einesSVGMetadataElement. Verwende immercreateElementNS(\"http://www.w3.org/2000/svg\", \"metadata\"). - Namespace-Präfixe in Selektoren:
querySelector(\"dc:creator\")funktioniert nicht, weil der Doppelpunkt in CSS eine Pseudoklasse einleitet. VerwendegetElementsByTagNameNS()oder maskiere den Doppelpunkt (\"dc\\\\:creator\"). Die maskierte Form funktioniert allerdings nur mit dem HTML-Parser. - Inline-SVG in HTML: Der HTML-Parser wertet fremde Namensräume in
<metadata>nicht wie XML aus. Präfixe landen dann im Tag-Namen, undgetElementsByTagNameNSfindet nichts. Sollen RDF-Daten zuverlässig ausgelesen werden, parse das SVG mitDOMParseralsimage/svg+xml. - Datenschutz: Exportierte SVG-Dateien enthalten in
<metadata>oft Benutzernamen, Dateipfade oder Editor-Informationen. Diese Daten solltest du vor der Veröffentlichung entfernen, zum Beispiel mit SVGO. - Die Schnittstelle wird von allen modernen Browsern unterstützt. Weil sie keine eigenen Mitglieder hat, gibt es kaum Unterschiede zwischen den Browsern.