HTML 5

Scalable Vector Graphics - Filters 3

Before reading further, read the following articles.

Now let's proceed to understand the Drop shadow SVG filter.

SVG Drop Shadow

The tag <feOffset> creates drop shadow effects. The offset filter takes an input or SVG graphics and moves the input a little bit in the xy plane and the new position of the input is the output. Actually it can move the input up, down, left and right. It works like the translation transformation except it is done in a filter.

The <feOffset> contains the attributes dx and dy and its default value is (0,0) if its not specified in <feOffset>. The attribute “dx” is the amount to offset the input graphics along the x axis and “dy” along the y axis. It can be specified as only “dx” or “dy” or both or none.

Let's see an example to see its effect.

Example 1

  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="500">  
  4.             <defs>  
  5.                 <filter id="offsetFilter1" x="-20" y="-20" width="70" height="70">  
  6.                     <feOffset in="SourceGraphic" />  
  7.                 </filter>  
  8.                 <filter id="offsetFilter2" x="-20" y="-20" width="70" height="70">  
  9.                     <feOffset in="SourceGraphic" dx="230" />  
  10.                 </filter>  
  11.                 <filter id="offsetFilter3" x="-20" y="-20" width="70" height="70">  
  12.                     <feOffset in="SourceGraphic" dx="270" dy="120"/>  
  13.                 </filter>  
  14.             </defs>  
  15.             <rect x="20" y="20" width="100" height="100"  
  16. style="stroke: blue; fill: none; " />  
  17.             <rect x="20" y="20" width="100" height="100"  
  18. style="stroke: red; fill: none; filter: url(#offsetFilter1);" />  
  19.             <rect x="200" y="20" width="100" height="100"  
  20. style="stroke: blue; fill: cyan; " />  
  21.             <rect x="200" y="20" width="100" height="100"  
  22. style="stroke: red; fill: yellow; filter: url(#offsetFilter2);" />  
  23.             <rect x="350" y="20" width="100" height="100"  
  24. style="stroke: blue; fill: none; stroke-dasharray: 10 3;" />  
  25.             <rect x="350" y="20" width="100" height="100"  
  26. style="stroke: red; fill: none; stroke-dasharray: 10 5; filter: url(#offsetFilter3);" />  
  27.         </svg>  
  28.     </body>  
  29. </html>   
Output

rectangles

In the preceding example, the positions of two rectangles in each set are the same. One of the rectangles has an offset applied that moves at various positions depending on the defined offset as only “dx”,“both dx and dy” and ”none”.

Example 2

Multiple rectangles at the same position.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="500">  
  4.             <defs>  
  5.                 <filter id="offsetFilter1" x="-20" y="-20" width="70" height="70">  
  6.                     <feOffset in="SourceGraphic" />  
  7.                 </filter>  
  8.                 <filter id="offsetFilter2" x="-20" y="-20" width="70" height="70">  
  9.                     <feOffset in="SourceGraphic" dx="180" />  
  10.                 </filter>  
  11.                 <filter id="offsetFilter3" x="-20" y="-20" width="70" height="70">  
  12.                     <feOffset in="SourceGraphic" dy="130"/>  
  13.                 </filter>  
  14.                 <filter id="offsetFilter4" x="-20" y="-20" width="70" height="70">  
  15.                     <feOffset in="SourceGraphic" dx="150" dy="110"/>  
  16.                 </filter>  
  17.                 <filter id="offsetFilter5" x="-20" y="-20" width="70" height="70">  
  18.                     <feOffset in="SourceGraphic" dx="250" dy="250"/>  
  19.                 </filter>  
  20.             </defs>  
  21.             <rect x="50" y="50" width="100" height="100"  
  22. style="stroke: black; fill: none; " />  
  23.             <rect x="50" y="50" width="100" height="100"  
  24. style="stroke: red; stroke-width: 3; fill: none; filter: url(#offsetFilter1);" />  
  25.             <rect x="50" y="50" width="200" height="150"  
  26. style="stroke: blue; fill: orange; stroke-width: 4; filter: url(#offsetFilter2);" />  
  27.             <rect x="50" y="50" width="150" height="150"  
  28. style="stroke: brown; stroke-width: 4; fill: none; stroke-dasharray: 10 7; filter: url(#offsetFilter3);" />  
  29.             <rect x="50" y="50" width="150" height="200"  
  30. style="stroke: black; fill: lime; stroke-width: 3; stroke-dasharray: 10 7; filter: url(#offsetFilter4);" />  
  31.             <rect x="50" y="50" width="250" height="150"  
  32. style="fill: cyan; filter: url(#offsetFilter5);" />  
  33.         </svg>  
  34.     </body>  
  35. </html>   
Output

Output

Example 3

Offsetting the Alpha channel.
  1. <html>  
  2.     <body>  
  3.         <svg height="300" width="500">  
  4.             <defs>  
  5.                 <filter id="offsetFilter1" x="-20" y="-20" width="70" height="70">  
  6.                     <feOffset in="SourceAlpha" />  
  7.                 </filter>  
  8.                 <filter id="offsetFilter2" x="-20" y="-20" width="70" height="70">  
  9.                     <feOffset in="SourceAlpha" dx="250" dy="120"/>  
  10.                 </filter>  
  11.             </defs>  
  12.             <rect x="50" y="50" width="100" height="100"  
  13. style="stroke: orange; fill: none; " />  
  14.             <rect x="50" y="50" width="100" height="100"  
  15. style="stroke: blue; stroke-width: 3; fill: none; filter: url(#offsetFilter1);" />  
  16.             <rect x="200" y="50" width="100" height="100"  
  17. style="stroke: green; fill: lightgreen; " />  
  18.             <rect x="200" y="50" width="100" height="100"  
  19. style="stroke: blue; stroke-width: 3; fill: lightblue; filter: url(#offsetFilter2);" />  
  20.         </svg>  
  21.     </body>  
  22. </html>   
Output

Offsetting the alpha channel

We can see that the rectangles are filled by colors, but the output is Black and White due to the filter on the applied Alpha channel.
 
Want to read more. 

Thank you, keep learning and sharing.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs