Long Shadow Effect in SVG for Web

Question

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 be possible:

Hella detailed gradient map, but is there a web-compliant way to export that to SVG from Illustrator? Blend Object SVG Filter that I'm not aware of? JS solution with something like SNAP SVG? My temporary solution was to export each puzzle piece from Illustrator with 75 layers of SVG paths making the shadow. The problem with so many layers, is that it really burdens browser rendering. Here's an Example

I've already employed the use element, but calling a symbol element with all 75 shadow paths.

In the original AI file, the effect is created using the blend mode, which, after some googling, I couldn't find an SVG filter equivalent to...but perhaps I'm missing something.

I was trying to figure on how to do it with a single path and gradient, but because of the "layered effect", it wouldn't be linear, so Id have to really map the hell out of it and didnt know if there's an easy way to do that.

Thanks for your help!

Answer 1

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: http://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: http://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.

Answer 2

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.