How linear and radial gradients work in SVG, with usage tips and conversion considerations.

SVG supports two types of gradients — linear and radial — that can add depth and visual interest to vector graphics without raster images.

Linear Gradients

A linear gradient transitions between colors along a straight line. Define it in a <defs> block with <linearGradient>, specify color stops, then reference it as a fill: fill="url(#myGradient)".

Radial Gradients

A radial gradient transitions from a center point outward in a circular pattern. Uses <radialGradient> with center (cx, cy) and radius (r) attributes.

Gradients and PNG Conversion

When you convert a PNG with gradients to SVG, the converter approximates the gradient with multiple flat-color regions (since it traces same-color pixel groups). For the smoothest SVG gradients, it's better to recreate them manually in a vector editor using native SVG gradient elements.

Best Practices

  • Use gradients sparingly — they add visual complexity
  • Define gradients in <defs> and reuse across elements
  • Test gradient rendering across browsers (minor differences exist)
  • SVG gradients can be animated with CSS for dynamic effects