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>