Use the white stroked path as a mask for the group created earlier. Create yet another linked offset path with no fill, and the same stroke width that the one in step 1, but with white colour (3) If you want to use a stroke style (dotted line etc.) set it for this path. Group this path with the one created in step 1. Create another linked offset, raise it to the top and set its fill to the inner colour, stroke to none and blur it enough to create the stroke gradient (2). First create the base path, then make a linked offset path for it, raise it to the top and set its fill to none and the stroke to the outer colour (1). The blur, together with masking, can fix this problem as well. One of the limitations of the gradient tool, when applied to strokes, is that if you want the gradient to change from the inner edge to the outer, you can only do this for oval-shaped paths. In the lower image all but the outermost path have been blurred. In the image below there is a stepwise gradient created with the interpolate effect (this effect is especially handy for this, because it can interpolate the colour as well). Just create a stepwise gradient with several paths and blur them to make the gradient smooth. The same method is good for making any odd-shaped gradients. If you need more linear gradient, you need to make several intermediary (in size and colour) linked offset paths. You will notice that the colour transition is smoother (rounder) than in normal gradients. To make multi-stop gradient, simply make several linked offsets of different colours and sizes (3). Because the inner path is linked to the outer one, any changes to the outer path will be updated in the shape of the inner one (though you may need to readjust the blur radius if you change the shape radically). Use the node handle to make it smaller than the original path (1) and blur it to create the gradient (2). Then make "Path -> Linked Offset", raise it to the top and set it to the inner colour (or usually somewhat more saturated one, to compensate the mixing when blurred). To make a "radial" gradient of any shape, that is, a gradient that changes from the edge of the path toward the centre, first create the path and set its fill colour to what you want the outer colour to be. When you blur any object different in colour than its background, you are essentially creating a shaped gradient between those colours. To make gradients of other shapes, the Gaussian blur tool becomes handy. For example, the radial gradient is limited to circular or oval in shape. The gradient tool in Inkscape is incredibly useful, but it has its limitations as well. Export as PNG and move on, I say, but ymmv.Note: This tutorial was written for Inkscape, but should be applicable for other vector drawing programs with similar functionality. Preferences? Document Preferences? Vague section headers, like “behavior”? Nah. Besides, the preferences dialog is a pain to navigate in Inkscape. I doubt this would cause it, but I’m just not going to modify it. I personally find 96 dpi to be insufficient – it is visibly jagged – but if it works for your project, have at it… it all depends on your needs.ġ Given that DPI in SVGs can cause major scaling issues with the GFUI, I tend to avoid anything that messes with it. So, like I said, if resolution is important, exporting pngs has some benefits over the simple raster copy. This can be essential to getting a pure white-to-black gradient using curves. PNG exporting has a much more robust set of options and serves as a way for me to keep an archived copy of the raster, something that works well for my workflow I can now use Gimp to modify it freely before pulling it back into the SVG, should I need to. Messing with default DPI is a bit more than I want to do 1 to simply export the png. As long as you set the bitmap copy resolution