Open In App

SVG <desc> Element

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads