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.
HTML
<!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">
<defs>
<circle cx="50" cy="50" r="40"
stroke="black"/>
</defs>
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!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>
<defs>
<circle id="ele" cx="50" cy="50"
r="40" stroke="black"/>
</defs>
<use xlink:href="#ele"
fill="url('#myGradient')" />
</svg>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Aug, 2020
Like Article
Save Article