SVG <desc> Element
Last Updated :
31 Mar, 2022
The <desc> element in SVG is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element.
Syntax:
<desc></desc>
Property Values: It does not have any property values.
Below given are a few examples of the function given above.
Example1: When text inside the desc is given in a circle element.
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
path1tent=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
svg{
width: 200px;
height: 200px;
color: #ffffff;
background-color: green;
}
</ style >
< body >
< svg >
< circle cx = "100"
cy = "100"
r = "80" >
< desc >
Geeks for geeks
</ desc >
</ circle >
</ svg >
</ body >
</ html >
|
Output: Please note that the text is not shown in the output.
Example 2: When text inside the desc is given in a rectangle element.
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
path1tent=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</ style >
< body >
< svg >
< rect aria-describedby = "info"
width = "180" height = "100"
x = "10"
y = "50"
fill = "white"
stroke = "black" >
< desc id = "info" >
Geeks for geeks
</ desc >
</ rect >
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...