How to implement gradients and filter effects in SVG

SVG provides powerful gradient and filter features that can create rich visual effects:

1. Gradients SVG supports linear and radial gradients, which need to be defined in <defs> and then referenced via fill or stroke.

Linear Gradient (linearGradient)

svg
<svg width="200" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

Attribute Description:

• x1, y1, x2, y2: Start and end coordinates of the gradient line
• gradientUnits: Coordinate system (userSpaceOnUse or objectBoundingBox)
• gradientTransform: Gradient transformation
• spreadMethod: Gradient extension method (pad, reflect, repeat)

Radial Gradient (radialGradient)

svg
<svg width="200" height="200">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad2)" />
</svg>

Attribute Description:

• cx, cy, r: Center and radius of the outer circle
• fx, fy: Focal point position (gradient center)

2. Filters SVG filters can apply various visual effects such as blur, shadow, glow, etc.

Blur Filter (feGaussianBlur)

svg
<svg width="200" height="100">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect width="100" height="50" fill="blue" filter="url(#blur)" />
</svg>

Shadow Filter (feDropShadow)

svg
<svg width="200" height="100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" flood-opacity="0.5" />
    </filter>
  </defs>
  <rect x="50" y="25" width="100" height="50" fill="red" filter="url(#shadow)" />
</svg>

Glow Filter (feGaussianBlur + feMerge)

svg
<svg width="200" height="100">
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <text x="100" y="50" font-size="30" fill="yellow" filter="url(#glow)" text-anchor="middle">Glow</text>
</svg>

Common Filter Elements:

• feGaussianBlur: Gaussian blur
• feDropShadow: Shadow
• feOffset: Offset
• feColorMatrix: Color matrix transformation
• feBlend: Blend mode
• feComposite: Composition
• feMerge: Merge
• feFlood: Fill color

3. Combined Usage

svg
<svg width="300" height="200">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="100%" stop-color="#4ecdc4" />
    </linearGradient>
    
    <filter id="shadow">
      <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" />
    </filter>
  </defs>
  
  <rect x="50" y="50" width="200" height="100" rx="10" ry="10" 
        fill="url(#grad)" filter="url(#shadow)" />
</svg>

Performance Optimization Recommendations:

• Filters are performance-intensive operations, use with caution
• Prioritize CSS for simple effects
• Consider Canvas for complex effects
• Avoid using complex filters in animations