SVG Gradients

Does anyone know how to make gradients that work? (in Inkscape)

When I try, I sometimes the opposite of how it looks in Inkscape, and sometimes some transparency that reveals what is underneath the entire SVG knob even when its solid.

Is there a special workflow in Inkscape that will produce working gradients?

my guess: linear are supported, radial no

1 Like

Well if I put different linear gradients on stroke and fill. Fill seems to work, but entire stroke becomes black.

never tested on STROKE
but I tested dual FILL linear and they are ok (at least on BGND images)

1 Like

Okay, thanks.

You need to “stoke to path” first then you can use gradients on the stroke.

1 Like

Thank you!

Stroke to Path and Object to Path are your friends for nanoVG work.

Multi-stop gradients seem iffy though.

Extension | Generate from path | Interpolate can make some interesting gradient effects out of arbitrary shapes:


But it does it by making extra shapes; so they’ll work just fine in nanoVG/Rack but you don’t want to go overboard or drawing performance will start to suck.


The reason I have not implemented gradients is because if you never use them (and don’t fake them as above), you designs will 100% always look better.