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.
Example 1: The text inside the desc element 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>SVG desc Element</title>
<style>
svg {
width: 200px;
height: 200px;
color: #ffffff;
background-color: green;
}
</style>
</head>
<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: The 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>SVG desc Element</title>
<style>
svg {
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</style>
</head>
<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:
