<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. Defining these elements inside of a <defs> element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a <defs> element will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

Usage context

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>

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

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 chart is based on these sources.

Related

• <use>