Note: Internet Explorer and Safari do not support SVG filters! All SVG filters for the Internet are defined in The first example is offset by a rectangle (with Here is the SVG code: Example Code parsing: Now, the offset image can be blurred (including Here is the SVG code: Example Code parsing: The stdDeviation attribute of the < feGaussianBlur > element defines the fuzzy amount Now, make a black shadow: Here is the SVG code: Example 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. Now put a layer of color on the shadow: Here is the SVG code: Example Code parsing: 1.16.1.
<defs>
and
<filter>
¶
<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? 1.16.2. 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.
<feOffset>
), and then blend and offset the top of the image (including
<feBlend>
):
<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>
<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” filterExample 2 ¶
<feGaussianBlur>
):
<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>
Example 3 ¶
<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>
Example 4 ¶
<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>
<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)