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 =
xmlns:rdfs =
xmlns:dc =
< rdf:Description about =
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 =
xmlns:rdfs =
xmlns:dc =
< rdf:Description about =
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 =
xmlns:rdfs =
xmlns:dc =
< rdf:Description about =
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 >
|
Output
Share your thoughts in the comments
Please Login to comment...