How do SVG's defs and use elements implement graphic reuse

SVG provides <defs> and <use> elements for defining reusable graphic components, which is a powerful feature of SVG:

1. defs Element The <defs> element is used to define reusable elements. These elements are not directly rendered and only appear when referenced.

svg
<svg width="200" height="200">
  <defs>
    <!-- Define gradient -->
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="100%" stop-color="#4ecdc4" />
    </linearGradient>
    
    <!-- Define filter -->
    <filter id="myShadow">
      <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" />
    </filter>
    
    <!-- Define graphic -->
    <circle id="myCircle" cx="0" cy="0" r="20" fill="url(#myGradient)" />
  </defs>
  
  <!-- Use defined graphic -->
  <use href="#myCircle" x="50" y="50" />
  <use href="#myCircle" x="150" y="50" />
</svg>

2. symbol Element The <symbol> element is used to define reusable graphic templates, similar to components.

svg
<svg width="200" height="200">
  <defs>
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
    </symbol>
    
    <symbol id="icon-user" viewBox="0 0 24 24">
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
    </symbol>
  </defs>
  
  <!-- Use defined icons -->
  <svg width="24" height="24">
    <use href="#icon-home" />
  </svg>
  
  <svg width="48" height="48">
    <use href="#icon-user" />
  </svg>
</svg>

3. use Element The <use> element is used to reference and reuse defined elements.

Basic Usage:

svg
<use href="#elementId" x="50" y="50" />

Attribute Description:

• href: ID of the referenced element (use # prefix)
• x, y: Reference position
• width, height: Reference dimensions (only applies to symbol)
• transform: Transformation

4. Practical Application Examples

Icon System:

svg
<!-- Define icon library -->
<svg style="display: none;">
  <defs>
    <symbol id="icon-search" viewBox="0 0 24 24">
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </symbol>
    
    <symbol id="icon-menu" viewBox="0 0 24 24">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
    </symbol>
  </defs>
</svg>

<!-- Use icons -->
<button>
  <svg width="20" height="20" aria-hidden="true">
    <use href="#icon-search" />
  </svg>
  Search
</button>

<button>
  <svg width="20" height="20" aria-hidden="true">
    <use href="#icon-menu" />
  </svg>
  Menu
</button>

Pattern Fill:

svg
<svg width="200" height="200">
  <defs>
    <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#ff6b6b" />
    </pattern>
  </defs>
  
  <rect width="200" height="200" fill="url(#myPattern)" />
</svg>

5. Advantages

• Reduce code duplication
• Improve maintainability
• Reduce file size
• Facilitate unified modifications
• Support dynamic styling

6. Best Practices

• Define common graphics as symbols
• Use meaningful ID naming
• Organize defs structure reasonably
• Consider using SVG sprite technology
• Add appropriate descriptions for reusable elements