SVG Filters by Adi Purdila

Introduction to SVG Filters

With SVG filters you can create unique text effects, image effects and, with a little JavaScript, very intersting contraptions like dynamic fractal effect.

What are SVG filters and how they're different from CSS filters?

SVG filters are a powerful way to apply visual effects to SVG elements, raster images, and even HTML content. Unlike CSS filters, which are limited to a predefined set of effects (like blur, brightness, contrast, etc.), SVG filters allow for the creation of complex and custom effects by combining multiple filter primitives.

SVG filters work by defining a <filter> element that contains various filter primitives (like <feGaussianBlur>, <feOffset>, <feColorMatrix>, etc.). These primitives can be combined in a sequence to create intricate effects. The filter is then applied to an SVG element using the filter attribute.

One of the key advantages of SVG filters is their flexibility and extensibility. You can create custom effects that are not possible with CSS filters, and you can also animate the filter parameters to create dynamic visual effects.

Overall, SVG filters provide a more versatile and powerful way to manipulate the appearance of graphics compared to CSS filters, making them a valuable tool for web designers and developers looking to create unique visual experiences.

SVG Filters vs CSS Filters
There are 11 CSS filters:
  1. blur()
  2. brightness()
  3. contrast()
  4. drop-shadow()
  5. grayscale()
  6. hue-rotate()
  7. invert()
  8. opacity()
  9. saturate()
  10. sepia()
  11. url()
SVG filters CSS filters
There are 17 SVG Filter Primitives (or SVG Filter Operations)
  1. <feGaussianBlur()>
  2. <feColorMatrix()>
  3. <feMorphology() >
  4. <feDisplacementMap()>
  5. <feBlend()>
  6. <feColorMatrix()>
  7. <ConvolveMatrix()>
  8. <feComponentTransfer()>
  9. <feSpecularLighting()>
  10. <feDifusiveLighting()>
  11. <feFlood()>
  12. <feTurbulence()>
  13. <feImage()>
  14. <feTile()>
  15. <feOffset()>
  16. <feComposite()>
  17. <feMerge()>
If you want more functionality, you need SVG filters. The set of CSS filters is the subset of SVG filters. With SVG filters you can create your own effects by combining filter primitives.
The basic syntax for SVG filters

To create an SVG filter, you define a <filter> element within the <defs> section of your SVG. Inside the <filter> element, you can include various filter primitives to achieve the desired effect. Here's a basic example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <filter id="myFilter">
                Primitives go here
                </filter>
            </defs>
            <circle cx="100" cy="100" r="50" filter="url(#myFilter)"/>
            </svg>
Example 1 
<use xlink:href="#sea.jpg"/>;
 <svg  width ="384" height="256" viewBox="0 0 384 256">
                <defs>
                    <filter id="demoFilter">
                        <feFlood flood-color="#2da0fb" flood-opacity="1" result="FLOOD"/>
                        <feBlend in="SourceGraphic" in2="FLOOD" mode="color-burn" result="BLEND"/>
                    </filter>
                </defs>
                <use xlink:href="#sea.jpg"
                        width="100%" height="100%" x="0" y="0"
                        filter="url(#demoFilter)"/>
            </svg>
Example 2
Inside head 
<style>
       .ex2 {
            width:400px;
            background-color:#1e1f26;
            background:linear-gradient(#262730,#131a1c);
            display:flex;
            align-items:center;
            /* height:100vh */
        }
       .ex2>h2 {
            padding:2rem;
            font-family: 'Barrio',cursive;
            font-size:4rem;
            letter-spacing:-2px;
            text-align:center;
            line-height: 0.9;
            transform:rotate(-10deg);
            color:#ff5c57;
        }
        .thick {filter:url(#textStroke);}
       </style>
 
Inside svg 
<svg wifth="0" height="0">
    <defs>
        <filter id="textStroke">
            <feMorphology operator="dilate" radius="2" 
            in="SourceGraphic" result="THICKNESS"/>
            <!-- <feComposite in="SourceGraphic" 
            in2="THICKNESS" operator="out"/> -->
        </filter>
    </defs>
</svg>

WHATEVER
YOU DO, DO IT
WELL. 

<div class="ex2">
     <h2 class="h2">
          WHATEVER <br>YOU DO, DO IT<br>WELL.
      </h2>
</div>
 

WHATEVER
YOU DO, DO IT
WELL. 

<div class="ex2">
     <h2 class="h2 thick">
          WHATEVER <br>YOU DO, DO IT<br>WELL.
      </h2>
</div>