Skip to main content

SVG Filters

SVG filters are used to provide special effect in SVG graphic elements. There are various elements.

<feDropShadow> Elements

SVG fedropshadow Example
<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 fegaussianblur Example
<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

SVG feflood Example

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 feblend Example
<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 fecomponenttransfer Example
<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>




Comment

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