Subscribe

SVG Blur Filter

✍️

Lets look at SVG Filters, in particular the Blur filter

3 Aug, 2020 · 3 min read

Some time ago, we played around with SVG animteTransform. I got feedback from people saying they didn't even know it existed. Today, we will look into SVG Filters, which you might never have seen before.

A filter element can be added to an SVG object, there are many filters, but today we are looking into the Blur filter since I recently needed one.

HTML Setup

As for our HTML we are using the following code:

<svg
  aria-hidden="true"
  style="position: absolute; width: 0; height: 0; overflow: hidden;"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <defs>
    <symbol id="check" viewBox="1 1 15.6 11.9">
      <path
        d="M16.3 4l-8.6 8.6c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-5-5C1.1 7.5 1 7.2 1 7c0-.3.1-.5.3-.7l1.4-1.4c.2-.2.4-.3.7-.3.3 0 .5.1.7.3l3 3 6.6-6.6c0-.2.3-.3.5-.3.3 0 .5.1.7.3l1.4 1.4c.2.2.3.4.3.7 0 .2-.1.4-.3.6"
      />
    </symbol>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
</svg>

As you see, we added our filter in our defs part. It will apply a gaussian blur of 5. The id is blur, which will be used to apply it to SVG.

Using the SVG Filter

To use the SVG Filter, we can use the following code.

<svg aria-hidden="true" focusable="false" class="icon icon-check">
  <use xlink:href="#check" />
</svg>
<svg aria-hidden="true" focusable="false" class="icon icon-check">
  <use filter="url(#blur)" xlink:href="#check" />
</svg>

The first icon won't have any blur, and the second will have the blur filter applied.

Applying the Filter Directly

We can however also omit the sprite and use the filters as such:

<svg
  width="230"
  height="120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  <rect width="60" height="60" x="20" y="20" fill="#534B62" />
  <rect
    width="60"
    height="60"
    x="120"
    y="20"
    fill="#534B62"
    filter="url(#blur)"
  />
</svg>

Awesome right? There are many more awesome filters in SVG. I'm sure we'll check in on them someday.

See the Blur Filter in action on this Codepen.

See the Pen SVG Blur Filter by Chris Bongers (@rebelchris) on CodePen.

Browser Support

You won't believe this, but SVG Filters have good browser support!

SVG Filter support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Moving from GIF to video format

27 Jun, 2021 · 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 · 4 min read

Common HTML Element Types

Join 1371 devs and subscribe to my newsletter