O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required