Gradients in SVG: linear and radial
With code examples
Gradients in SVG are defined once inside <defs> and applied with fill="url(#id)". There are two types: linear and radial.
Linear gradient
<defs> <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0" stop-color="#6c8cff"/> <stop offset="1" stop-color="#ff6c9c"/> </linearGradient> </defs> <rect width="100" height="100" fill="url(#g1)"/>
x1,y1 -> x2,y2 define the direction (from 0 to 1). Each stop is a color stop with its offset.
Radial gradient
<radialGradient id="g2"> <stop offset="0" stop-color="#fff"/> <stop offset="1" stop-color="#6c8cff"/> </radialGradient>
It goes from the center outward. Useful for highlights and spheres.
Multiple stops
You can add more than two stop for multicolor transitions. The offset goes from 0 to 1 (or as a percentage).
Transparency in the gradient
Use stop-opacity on a stop so the color fades to transparent.
Reuse
The same gradient (by its id) can be applied to several shapes. Define it once in <defs>.
Make it visual
In svgdesk you set fill and stroke colors, and you can paste the gradient block in the code panel to see it instantly.