<metadata>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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 |
DOM Interface
This element implements the SVGMetadataElement
interface.
Example
html
<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 href="#hubPlug" />
</g>
<g id="socket2" transform="translate(70 20)">
<title>Socket 2</title>
<use href="#hubPlug" />
</g>
<g id="socket3" transform="translate(115 20)">
<title>Socket 3</title>
<use href="#hubPlug" />
</g>
<g id="socket4" transform="translate(160 20)">
<title>Socket 4</title>
<use href="#hubPlug" />
</g>
<g id="socket5" transform="translate(205 20)">
<title>Socket 5</title>
<use 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 href="#hub" transform="scale(0.75)" />
</g>
<!-- Use the computer symbol. -->
<g id="ComputerA" transform="translate(20 170)">
<title>Computer A</title>
<use href="#computer" transform="scale(0.5)" />
</g>
<!-- Use the same computer symbol. -->
<g id="ComputerB" transform="translate(300 170)">
<title>Computer B</title>
<use 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 |
---|
Scalable Vector Graphics (SVG) 2 # MetadataElement |
Browser compatibility
BCD tables only load in the browser