Skip to content
Related Articles

Related Articles

Improve Article

SVG <desc> element

  • Last Updated : 18 Aug, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :