The <defs> in SVG is used whenever we want a particular element to render only when required or when it is called. objects that are created inside <defs> element are not rendered directly they are needed to be called by <use> element to render them on the browser.
Syntax:
<defs></defs>
Property values: It does not have any property values.
Below given are a few examples of the above function.
Example 1: When <defs> is not called thus it is not executed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
background-color: green;
}
</style>
<body>
<h2>
No Output only svg of size 100*100 is visible<br>
and no circle stroke will be rendered</h2>
<svg width="100px" height="100px">
<!--this defs code will not be
executed as it is not called-->
<defs>
<circle cx="50" cy="50" r="40"
stroke="black"/>
</defs>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
background-color: green;
}
</style>
<body>
<svg width="100px" height="100px">
<defs>
<circle id="ele" cx="50" cy="50"
r="40" stroke="black"
stroke-width="10"/>
</defs>
<!-- this defs code will not be executed
as it is not called using use -->
<defs>
<circle id="ele" cx="50" cy="50"
r="40" stroke="black"/>
</defs>
<use xlink:href="#ele"
fill="url(https://www.geeksforgeeks.org/'#myGradient')" />
</svg>
</body>
</html>
Output:
