Hi.
With filtering you can build up a visual appearance of blurring the shape, utilizing its edges where the transparency drops.
That is the quickest workaround that has its limitations -no fill vector pdf-s, no accurate gradient steps, no resource-friendly rendering, no semi-transparent shapes, but it can be generated on any shape by an instant.
Here is an example for such a blurred solution, which got a diffuse filter added in.
Other workaround is having the image built up by flat filled shapes over eachother.
Can use some automation here, but it's way more tedious than the previous option.
You can either use interpolation to draw these objects based on the original path -and an additional one-, or explore gcodetools. Haven't tried it yet, but it seems capable generating parallel paths upon a given original.
Then, there is the extension to interpolate attribute within group. With that, you can fill the shapes in between with a "two colour gradient".
(The rearrange-restack extension may also come handy in the process to correct the z-ordering.)
A two coloured gradient might not be fitting, but there are other ways to change it to a gradient you are after.
You can generate a colourmap filter effect and apply it to a black to white gradient, or use the same extension to swap colours (just guessing here, haven't tried the latter though that option should work better certain cases).
This image was drawn with illustrator in the same vein -flat fills can be saved as eps too, so printing-wise this is the most "sturdy" you can get.
Thirdly, you can use mesh gradients -which are the most tedious editing-wise, and currently not part of the svg specs.
There is no real documentation of it besides
Xav's article I know of. No update in the manual, may not make it into svg 2.0. You need to manually place mesh nodes one by one, there is no option to
bend a gradient mesh along a path. (For that appearance, a tricky and crude solution is using custom markers, as discussed
here -not sure what happened to the embedded image.)
Here is an example of using a gradient mesh.
Other option?
The most "hardcore" one is using linear and radial gradients to fit the shape.
Your second image can be drawn from a radial gradient and two linear ones within minutes.
The "flat filled" shapes method would fit your first image way better.
With all the "
necessary overlapping" it can get real tricky.
For an example, have a look at
this image.
Some cases you can combine those two methods (flat filled shapes and gradients) so that the complex gradient's steps can be edited by editing the gradient definition.
Here is an example for that. That is the rarest of them all, which I was experimenting with
recently.