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: