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.
html,body,svg { height:100% }
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- 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" xlink:href="#myCircle" fill="url('#myGradient')" /> </svg>
Attributes
Global attributes
- Core Attributes
- Most notably:
id
lang
- 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> , <altGlyphDef> , <clipPath> , <color-profile> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<defs>' in that specification. |
Candidate Recommendation | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<defs>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
defs | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support