SVG defs Element (original) (raw)

Last Updated : 7 Aug, 2020

The 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 element are not rendered directly they are needed to be called by element to render them on the browser.

Syntax:

Property values: It does not have any property values.

Below given are a few examples of the above function.

Example 1: When is not called thus it is not executed.

HTML `

Document

No Output only svg of size 100*100 is visible
and no circle stroke will be rendered

<!--this defs code will not be 
    executed as it is not called-->
<defs>
  <circle cx="50" cy="50" r="40" 
          stroke="black"/>
</defs>

`

Output:

Example 2:

HTML `

Document 
<!-- 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')" />

`

Output: