<defs>

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.

Example

SVG Code Input:

<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='180' height='150' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='126' height='126' viewBox='-25, -25, 126, 126' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
<svg transform='scale(0.793650793650794)' preserveAspectRatio='xMinYMin' viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'>
       <!-- Some graphical objects to use -->
       <defs>
           <circle id='myCircle' cx='0' cy='0' r='1' />

           <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='1' y='1' xlink:href='#myCircle' fill='url("#myGradient")' />
</svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='95' y='17' font-size='20'>(2,0)</text>
<text x='5' y='145' font-size='20'>(0,2)</text>
<text x='95' y='145' font-size='20'>(2,2)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='125' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='125' cy='125' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output:

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

Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)

Sources and References

https://www.w3.org/TR/SVG2/struct.html
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs