SVG Filters
SVG filters are used to provide special effect in SVG graphic elements. There are various elements.
<feDropShadow> Elements

<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filterExample">
<feDropShadow flood-opacity="3" ></feDropShadow>
</filter>
<circle cx="60" cy="60" r="40" fill="pink" ></circle>
<circle cx="180" cy="60" r="40" fill="pink"
filter="url(#filterExample)" ></circle>
</svg>
<feGaussianBlur> Elements

<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filterExample2">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" ></feGaussianBlur>
</filter>
<circle cx="60" cy="60" r="40" fill="blue" ></circle>
<circle cx="180" cy="60" r="40" fill="blue"
filter="url(#filterExample2)" ></circle>
</svg>
<feFlood> Elements

This are create a rectangle area. and they are two properties ( flood-color) and (flood-opacity).
<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filterExample3">
<feFlood flood-color="#2196f34f" flood-opacity="2" ></feFlood>
</filter>
<circle cx="60" cy="60" r="40" fill="blue" ></circle>
<circle cx="180" cy="60" r="40" fill="blue"
filter="url(#filterExample3)" ></circle>
</svg>
<feBlend> Elements

<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="filterExample4">
<feBlend mode="screen" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="SourceGraphic"></feBlend>
</filter>
<circle cx="60" cy="60" r="40" fill="blue" ></circle>
<circle cx="180" cy="60" r="40" fill="blue"
filter="url(#filterExample4)" ></circle>
</svg>
<feComponentTransfer> Elements

<svg width="230" height="350"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pics" viewBox="30 0 300 400"> <image preserveAspectRatio="xMidYMid slice" xlink:href="https://www.codelike.in/img/svg/svg-bicycle-animation.png"></image></symbol>
<filter id="filterExample5">
<feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="componentTransfer">
<feFuncR type="table" tableValues="0 0 1"></feFuncR>
<feFuncG type="table" tableValues="0 1 0"></feFuncG>
<feFuncB type="table" tableValues="1 0 1"></feFuncB>
<feFuncA type="table" tableValues="0 1 "></feFuncA>
</feComponentTransfer>
</filter>
<use xlink:href="#pics" fill="#673ab799" ></use>
<use x="0px" y="130px" xlink:href="#pics" fill="#673ab799" filter="url(#filterExample5)"></use>
</svg>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment