Designing SVG Web Graphics

SVG Gradients

Gradients can produce some lovely visual effects, whether you are seeking subtle graduations of color or startling, vibrant—or even shocking—visual effects. To achieve the precise effect you are looking for, you need to understand how to control SVG gradients.

If you want to study how different stop color and stop opacities affect the visual appearance of SVG elements, one technique I find useful is to create linear (or, to a lesser extent, radial) gradients that encompass the whole screen. Then create a small SVG object—a rectangle or circle, perhaps— and animate it slowly across the gradient and study how the colors and opacities affect the SVG object. The gradient itself is invisible except where it impinges on the object. The ...