<defs>

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

Attributes

Global attributes

• Conditional processing attributes
• Core attributes
• Graphical event attributes
• Presentation attributes
• class
• style
• externalResourcesRequired
• transform

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

Browser compatibility

Related

• <use>