: Long Shadow Effect in SVG for Web Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG: Example Image My three ideas on how this might

@Kimberly620

You can use SVG filters. I am just not sure its any lighter in terms of speed. Having 75 paths is nothing to the computer, but even a few filters can take the computer to its knees. (this is highly implementation dependent tough.)

Here is one way (10 px long shadow):

<filter id="Long_Shadow_10" >
<feConvolveMatrix order="20" in="SourceAlpha" result ="conv_out"
kernelMatrix="
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
" />
</filter>


Now you will still need to mask it with a bounding volume. Not very practical but works. (you may need to dilate before blur etc...) Bigger kernel columns longer shadow, slower performance.



Image 1: result f a 20 px directional shadow.

Final option use bitmaps masked by vectors. This is somewhat faster as it does not need to be recalculated every time. Even a fairly low resolution image would suffice if you mask it by vectors.

Vote Up Vote Down

@Hamaas979

I’ve seen CSS examples where multiple drop shadows of varying offsets and colours are used (usually with box-shadow). You could do the same using shadows in an SVG.

Here’s a CSS example: www.sandbox.juan-i.com/longshadows/
Having lots of shadows is terrible for performance, so be careful.

The same shadow technique can be used in Illustrator, because Illustrator can also have multiple shadows. A better option is probably to use the Blend Tool in Illustrator to create lots of in between shapes, which is good for something like this.

More info: design.tutsplus.com/tutorials/illustrators-blend-tool-a-comprehensive-guide--vector-551
Here’s an example using the Blend Tool.



The bad news is that the only way you’re going to get that to render in an SVG is to use Object → Expand Appearance and Object → Expand to convert the blend to separate paths.



And you’re back to square one in terms of performance.

Another option is to use a bitmap image for your long shadow elements. That way they’ll be nice and performant.

Vote Up Vote Down