SVG Tutorial

SVG Elements

Comprehensive SVG Examples SVG Blur Effect

SVG Shadow

In SVG, to display the shadow effect, the <feOffset> element is used. To achieve the shadow effect, we take the SVG graphic and move it a little in the xy plane. Internet Explorer and Safari do not support SVG filters!

Online Example

Below is an implementation of a purple background shadow effect:

Example

<svg　height="250"　width="250">
　　<defs>
　　　　<filter　id="p1"　x="0"　y="0"　width="200%"　height="200%">
　　　　　　<feOffset　result="offOut"　in="SourceGraphic"　dx="20"　dy="20"></feOffset>
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10></feGaussianBlur>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="blue"　stroke-width="3"　fill="purple"　filter="url(#p1)"　/>
　　</svg>

Test to see‹/›

Note: Internet Explorer 9And earlier versions do not support SVG filters.

The effect after running is as follows:

Usage Explanation

<filter>　of the id attribute defines the unique name of the pattern.
<rect>element’s filter attribute is used to link the element to the “ p1”Filter.

Create a black shadow

Example

<svg　xmlns="http://www.w3.org/2000/svg"　version="1.1">
　　<defs>
　　　　<filter　id="f1"　x="0"　y="0"　width="200%"　height="200%">
　　　　　　<feOffset　result="offOut"　in="SourceAlpha"　dx="20"　dy="20"　/>
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10"　/>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"　/>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="green"　stroke-width="3"　fill="yellow"　filter="url(#f1)"　/>
</svg>

Test and see ‹/›

The effect after running is as follows:

Note: Internet Explorer 9And earlier versions do not support SVG filters.

Comprehensive SVG Examples SVG Blur Effect