SVG defs Element
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> |
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
.png)