How to represent blurry artwork with vectors (Illustrator or SVG)?

I have a recurring problem that I’d like to solve once and for all: how to create a blurry vector image.

For example, this bitmapped image represents the drop shadow for a rectangle:

nice bitmapped blur

It should be possible, with 50 or so rectangles with rounded corners, to represent it pretty well in an SVG or Illustrator file.

The main problems are that:

  1. blends use a linear distribution of gray levels, so the edges don’t fade out correctly
  2. image tracing fails to recognize the smooth nature of the image and adds thousands of points, resulting in a large and jaggy image

I am looking for some way to create the correct distribution of gray levels while retaining the blurry effect.

This is just a simple example, but I often need blurred images that are much more complex.

I can either start with a sharp-edged object or I can create the “first and last” paths manually and blend between them. The problem there is having the correct levels.

This is what a 50-path blend looks like:

enter image description here

the transitions from gray and to white are much too abrupt.

Does anyone know how to create paths to better represent fuzzy content?

At this point, it’s such an issue that I’d be happy to use an entirely new app for this single task.

[edit] I know about the SVG blur effect, but it won’t work for my purposes. One of my main use cases is creating images in Mac apps, and SVG filters are ignored. For web use, I have also found that zooming a page causes the SVG filter to scale incorrectly.


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.

enter image description here

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.

enter image description here

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.

enter image description here

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.

enter image description here

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…

enter image description here

A gaussian bell…

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

enter image description here

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.

enter image description here

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.

Source : Link , Question Author : Andrew Swift , Answer Author : Rafael

Leave a Comment