SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a <defs> element. Objects created inside a <defs> element are not rendered immediately; instead, think of them as templates or macros created for future use.

Defining these elements inside of a <defs> element promotes understandability of the SVG content and thus promotes accessibility. You can use a <use> element to render those elements wherever you want in the viewport.

You can also use <defs> to create gradients for later use; see the example provided for the x1 attribute for an example.

Usage context

CategoriesContainer element, Structural element
Permitted contentAny 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>


Global attributes

Specific attributes


DOM Interface

This element implements the SVGDefsElement interface.


<svg width="80px" height="30px" viewBox="0 0 80 30"

    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />

  <rect x="10" y="10" width="60" height="10" 
        fill="url(#Gradient01)" />


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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5983.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support31 Yes4 Yes3.1 ?

Document Tags and Contributors

 Last updated by: ExE-Boss,