El <defs> en SVG se usa siempre que queremos que un elemento en particular se represente solo cuando sea necesario o cuando se llame. los objetos que se crean dentro del elemento <defs> no se procesan directamente; es necesario que los llame el elemento <use> para representarlos en el navegador.
Sintaxis:
<defs></defs>
Valores de propiedad: No tiene ningún valor de propiedad.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1: cuando <defs> no se llama, no se ejecuta.
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">
<!--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>
Producción:
Ejemplo 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>
<!-- 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('#myGradient')" />
</svg>
</body>
</html>
Producción:
