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 ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.