<defs>
The <defs>
element is used to store graphical objects that will be used at a later time. Objects created inside a <defs>
element are not rendered directly. To display them you have to reference them (with a <use>
element for example).
Graphical objects can be referenced from anywhere, however, defining these objects inside of a <defs>
element promotes understandability of the SVG content and is beneficial to the overall accessibility of the document.
Example
html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="5" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>
Attributes
Global attributes
- Core Attributes
- Styling Attributes
class
,style
- Event Attributes
-
Global event attributes, Document element event attributes, Graphical event attributes
- Presentation Attributes
-
Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
Usage notes
Categories | Container element, Structural element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Head |
Browser compatibility
BCD tables only load in the browser