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

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.