Let me explore the topic a bit.
The shape
If we are attempting to do this with vector shapes, the shape itself must be right. It is easy to have deformed or disproportional shapes.

One way to prepare them is duplicating the overall shape and using the contour lines thicker on the shape it will be the final border of the shadow.

Now we have 2 shapes to blend. They should have the same amount of nodes.
The blending or morphing
Normally one tool available on vector design software is blending (or morphing) for shapes. The simplest method will make a linear blending in both, shape and color.
On the second image, In red I outlined the shapes with fewer in-between steps so the image is easier to see.
I added a little graph at the bottom of the image. This case representing the acceleration of the blending. In this case, it is a line.
This is the case you have, you have an abrupt change from the original shape into the gradient.

Some programs have the option to accelerate (or decelerate) this blend or morphing.
I accelerated it as you can see on the contours and on the little graph. It reduced the abruptness of the initial color around the original shape but pronounced it on the edges of the shadow.

To compensate for it I would need to separate the blending or morphing into 3 different morphs to represent 3 different stages of acceleration-linear-deceleration. Wich is increasingly tricky to blend the stages. I tried for some minutes but failed to make a nice transition.
The little curve on the right is one known curve on math...

A gaussian bell...
Now you see the difference in a linear transition vs a gaussian transition.

This is why it is so complex to make a vector transition look right compared to a Gaussian filter applied on a raster image.
But not everything is lost
Instead of making a transition of colors, we can play with a transition of transparencies.
On the first image, I have the same color value and a difference in transparency The second value is not 100% transparent so we can still see the shape.
On the second image, you can see that the transition is much smoother than a color transition. Shape 1 has no transparency and the final shape has the transparency of 100%. Same color on both extremes.
But here is a twist. On the image on the right, I used multiply blending mode for the shapes. All the shapes have the same color and transparency (90%) but as the blending is adding, the shape that has now layers of color are darker.

You can play with them. Using transparencies and blending modes look smoother because they are playing with the luminosity and our eyes do not respond to luminosity in a linear way, but a curved way.
In the case of SVG remember that is perfectly fine to have also raster images inside the svg.
All these transitions are a mess even with a simple "outside" shadow.
Things are even more complicated because sometimes we need an average or inside shadow, which not only can be extended with an outline but need to be contracted inwards...
And if you want coloring blurry... forget it. Please use raster images. Haveing a correct combination of raster and vector is Imho the best option.