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.
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.
Categories | Descriptive element |
---|---|
Permitted content | Any elements or character data |
None.
This element implements the SVGMetadataElement
interface.
<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>
Specification |
---|
Scalable Vector Graphics (SVG) 2 # MetadataElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
metadata |
1 | 12 | 1.5 | 9 | 8 | 3 | 3 | Yes | 4 | Yes | 3 | Yes |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/metadata