O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Moving Objects with feOffset

One of the most popular effects in a designer's palette today is the drop shadow. A drop shadow is often the result of several different operations combined together. The following steps describe how to create a drop shadow:

1.
The object to be shadowed must be cloned based upon its alpha channel, creating a duplicate of the object behind itself.
2.
A blur is applied to this duplicate object.
3.
The blurred duplicate is moved a small distance from the original object to create the illusion of depth.

If you have used Photoshop or other design tools that automatically create drop shadow effects, you are likely familiar with the offset concept. Offsetting is the term used to move an object, as in step 3 of the drop ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required