SVG Shadow
Note: Internet Explorer and Safari do not support SVG filters!
<defs> and <filter>
All SVG filters for the Internet are defined in <defs> element. <defs> element definitions are short and contain special element definitions, such as filters.
<filter> tags are used to define SVG filters. <filter> the tag usesthe required id attribute to define which filter to apply to the drawing?
SVG <feOffset>
Example 1
<feOffset> elements are used to create shadow effects. Our idea is to take a SVG graphic (image or element) and move it a little bit on the xy plane.
The first example is offset by a rectangle (with <feOffset> ), and then blend and offset the top of the image (including <feBlend> ):
Here is the SVG code:
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="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Code parsing:
<filter>the element id attribute defines a unique name for a filter<rect>the filter attribute of the element is used to link the element to the “F1” filter
Example 2
Now, the offset image can be blurred (including <feGaussianBlur> ):
Here is the SVG code:
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="SourceGraphic" 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>
Code parsing:
The stdDeviation attribute of the < feGaussianBlur > element defines the fuzzy amount
Example 3
Now, make a black shadow:
Here is the SVG code:
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>
Code parsing:
The attribute of the < feOffset > element is changed to “SourceAlpha” to use the residual shadow in the Alpha channel instead of the entire RGBA pixel.
Example 4
Now put a layer of color on the shadow:
Here is the SVG code:
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="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" 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>
Code parsing:
<feColorMatrix>the filter is used to convert the offset image closer tothe black color. All three values of the ‘0.2’ matrix are multiplied by red, green and blue channels. Reduce the color brought by its value to black(black is 0)