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

What Are Gradients?

One of the visually attractive features of many bitmap graphics on the Web is the use of gradients to add a subtle or sophisticated appearance to an image. Similar effects are available in proprietary vector formats. SVG too provides gradients that can be used to good effect throughout SVG images.

A gradient is a smooth transition from one color to another along a vector. Several color transitions can be applied along the same vector and can be combined to provide complex, subtle, and sometimes very attractive color transitions. In addition to allowing color transitions, SVG provides for transitions in opacity.

In SVG jargon, gradients are simply a special type of “paint server.” To apply the paint from a paint server, you ...

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