O'Reilly logo

Java™ Drawing with Apache Batik: A Tutorial by Alexander Kolesnikov

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

Working with Gradients

Using a gradient to fill a shape is a simple and efficient way to make a picture more attractive. The SVG specification defines two types of gradients: linear and radial. Here I show you how to use them.

Linear Gradients

You use the linearGradient element to define a linear gradient. This element contains stop child elements that define which colors are used to create the gradient and the origin of the transition. Here is an example:

<linearGradient>
    <stop offset="0%" stop-color="#666"/>
    <stop offset="100%" stop-color="#fff"/>
</linearGradient>

In this example you specify a gradient in which a shadow of gray changes to white and the transition starts and ends on the edges of the shape. To see how this looks, use the gradient ...

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