SVG defs Element

Last Updated : 07 Aug, 2020

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">
    
    <!--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:

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>