The <metadata>
SVG element adds metadata to SVG content. Metadata is structured information about data. The contents of <metadata>
should be elements from other XML namespaces such as RDF, FOAF, etc.
Usage context
Categories | Descriptive element |
---|---|
Permitted content | Any elements or character data |
Attributes
Global attributes
Specific attributes
None
DOM Interface
This element implements the SVGMetadataElement
interface.
Example
<svg width="400" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-RDF#"> <rdf:Description about="#CableA"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#ComputerA"/> </rdf:Description> <rdf:Description about="#CableB"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#ComputerB"/> </rdf:Description> <rdf:Description about="#CableN"> <connect:ends rdf:resource="#socket5"/> <connect:ends>Everything</connect:ends> </rdf:Description> <rdf:Description about="#Hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:Description> </rdf:RDF> </metadata> <title>Network</title> <desc>An example of a computer network based on a hub.</desc> <style> svg { /* Default styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </style> <!-- Define symbols used in the SVG --> <defs> <!-- hubPlug symbol. Used by hub symbol --> <symbol id="hubPlug"> <desc>A 10BaseT/100baseTX socket</desc> <path d="M0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>A typical 10BaseT/100BaseTX network hub</desc> <text x="0" y="15">Hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>Socket 1</title> <use xlink:href="#hubPlug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>Socket 2</title> <use xlink:href="#hubPlug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>Socket 3</title> <use xlink:href="#hubPlug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>Socket 4</title> <use xlink:href="#hubPlug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>Socket 5</title> <use xlink:href="#hubPlug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>A common desktop PC</desc> <g id="monitorStand" transform="translate(40 121)"> <title>Monitor stand</title> <desc>One of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m0,0 S 10 10 40 12"/> <path d="m80,0 S 70 10 40 12"/> <path d="m0,20 L 10 10 S 40 12 70 10 L 80 20z"/> </g> <g id="monitor"> <title>Monitor</title> <desc>A very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>The computer</title> <desc>A desktop computer - broad flat box style</desc> <rect width="160" height="60"/> <g id="discDrive" transform="translate(70 8)"> <title>disc drive</title> <desc>A built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15">Network</text> <!-- Use the hub symbol. --> <g id="Hub" transform="translate(80 45)"> <title>Hub</title> <use xlink:href="#hub" transform="scale(0.75)"/> </g> <!-- Use the computer symbol. --> <g id="ComputerA" transform="translate(20 170)"> <title>Computer A</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- Use the same computer symbol. --> <g id="ComputerB" transform="translate(300 170)"> <title>Computer B</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- Draw Cable A. --> <g id="CableA" transform="translate(107 88)"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M0,0c100,140 50,140 -8,160"/> </g> <!-- Draw Cable B. --> <g id="CableB" transform="translate(142 88)"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <path d="M0,0c100,180 110,160 159,160"/> </g> <!-- Draw Cable N. --> <g id="CableN" transform="translate(242 88)"> <title>Cable N</title> <desc>10BaseT twisted pair cable</desc> <path d="M0,0c0,-70 20,-50 60,-50"/> </g> </svg>
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<metadata>' in that specification. |
Candidate Recommendation | Allowed global event attributes on the element. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<metadata>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
metadata | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 8 | Safari Full support 3 | WebView Android Full support 3 | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support