SVG <metadata> Element

Last Updated : 02 Aug, 2022

SVG stands for Scalable Vector Graphic which is written in XML format and is used to define vector-based graphics for the Web

SVG <metadata> Element allows the developer to describe more detailed information about the SVG, which is similar to the <desc> element that is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element. The <metadata> should be used with XML namespace like RDF, FOAF etc. The textual description is not displayed.

Syntax:

<svg>
    <metadata>
        <rdf:RDF> ... </rdf:RDF>  
    </metadata>
</svg>

Attributes: It supports both the global attributes, i.e. global event attributes as well as the core attribute.

Example 1: In this example, we are creating a yellow-colored circle and within the <metadata>, we had used RDF to give information about the circle

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SVG <metadata >Element</title>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg width="100" height="100">
            <circle cx="50"
                    cy="50"
                    r="40"
                    stroke="green"
                    stroke-width="4"
                    fill="yellow" />
            <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="Circle"
                           dc:description=
            "A round circle with yellow color"
                           dc:publisher="geek for geeks"
                           dc:date="2022-06-17"
                           dc:format="image/svg+xml"
                           dc:language="en"> 
                    </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>

Output:

Example 2: In this example, we have created a blue-colored rectangle where we have described the rectangle like its title, date, and publisher details within the metadata tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SVG <metadata > Element</title>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg width="400" height="110">
            <rect width="300"
                  height="100"
                  style=
    "fill:rgb(0,0,255); stroke-width:3;stroke:rgb(0,0,0)" />
            <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="rectangle"
                           dc:description=
                           "A blue colored rectangle"
                           dc:publisher="geekforgeeks"
                           dc:date="2022-06-17"
                           dc:format="image/svg+xml"
                           dc:language="en"> 
                    </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>

Output:

Example 3: In this example, we can see that we can use <metadata> with any SVG element, & below we have created a text and inside the metadata, we have described it.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SVG <metadata >Element</title>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <metadata >Element</h3>
    <?xml version="1.0" standalone="yes"?>
        <svg height="300" width="240">
            <text x="0" y="15" fill="green">
                GeeksforGeeks - Learning Together!
            </text>
            <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="text"
                       dc:description=
                       "geeksforgeeks-learning together"
                       dc:publisher="geek for geeks"
                       dc:date="2022-06-17"
                       dc:format="image/svg+xml"
                       dc:language="en"> </rdf:Description>
                </rdf:RDF>
            </metadata>
        </svg>
</body>
</html>