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>

Attributes

Global attributes

Specific attributes

None

DOM Interface

This element implements the SVGDefsElement interface.

Example

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 (Yes) 1.0 (1.8) No support (Yes) 3.0.4

The chart is based on these sources.

Document Tags and Contributors

 Contributors to this page: Sheppy, Infineight, abbycar, Sebastianz, kscarfone, Jeremie, Manuel_Strehl
 Last updated by: Sheppy,