Creating Depth in Vectors: A Guide to SVG Linear & Radial Gradients

Shading is crucial to transform flat geometric shapes into deep vector icons. SVGs achieve this using definitions (<defs>) linking gradient tags dynamically.

1. Understanding Linear Gradients

Linear gradients use directional coordinate controls (x1, y1 and x2, y2) to guide fill blends across standard axes:

• Horizontal: x1="0%" y1="0%" x2="100%" y2="0%"
• Vertical: x1="0%" y1="0%" x2="0%" y2="100%"
• Diagonal: x1="0%" y1="0%" x2="100%" y2="100%"

2. Radial Gradients & Shading

Radial gradients blend colors outward from central focus nodes (cx, cy, and r). This is ideal for sphere lighting, volumetric art, and glowing backgrounds.

3. Vector Code Example: Gradient Defs

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Linear Gradient definition -->
    <linearGradient id="warmOrange" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF5C00" />
      <stop offset="100%" stop-color="#FACC15" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#warmOrange)" />
</svg>

4. Key Gradient Best Practices

• Always define gradients in the <defs> element to keep XML layouts semantic and cacheable.
• Provide unique IDs (e.g. id="blueGlow") so multiple shapes can reference them via fill="url(#blueGlow)".
• Utilize stop-opacity properties to create smooth fade-out shadows.