drawsvg iconDRAWSVG user's guide

2.10. Using gradients

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

The gradient element is a member of a 'defs' section.

There are two types of gradients : linear and radial .

DrawSVG has a default palette of gradients.

See creating , using gradients showcases for interactive demonstrations.

To use gradient :

To apply a gradient, select the shape and choose the gradient from the fill style menu.

To choose the gradient, two other tools can be used :

The gradient definition tool

Or the gradient chooser tool


A gradient can be applied also to a line with the stroke style menu.

To customize the gradient of a shape, use the transform gradient editor from the floating menu :

  • To prevent modification of the shared gradient definition, make a copy or an extension of the gradient,

  • Then define the transformation with the rotation angle and the scale factor

Apply the transformation or close the panel without modification.

Customization by extension has the advantage of minimizing the volume and continue to benefit from changes made to the basic gradient.

To edit the gradient definition of a shape, select the shape and use the gradient definition tool from the fill style menu.

The tool allows to edit/copy/extends/delete a gradient definition,

When opened, the panel is showing the gradient of the selected shape. You can change it's properties and apply then, or select another gradient and apply it to the shape.