2022-06-22
3959
#css
Oscar Jite-Orimiono
119740
Jun 22, 2022 ⋅ 14 min read

A complete guide to using CSS filters with SVGs

Oscar Jite-Orimiono I'm a self-taught frontend web developer. I build websites so everyone finds a home online. The digital space is massive, full of endless possibilities — let's explore it together!

Recent posts:

Understanding and supporting zoom behaviors on the web

Understanding and supporting zoom behaviors on the web

Understanding and supporting pinch, text, and browser zoom significantly enhances the user experience. Let’s explore a few ways to do so.

Fimber Elemuwa
Oct 9, 2024 ⋅ 7 min read
Comedy and tragedy masks symbolizing Playwright Extra's ability to extend Playwright with customizable plugins for both stealth and interactive browser automation tasks.

Playwright Extra: extending Playwright with plugins

Playwright is a popular framework for automating and testing web applications across multiple browsers in JavaScript, Python, Java, and C#. […]

Antonello Zanini
Oct 8, 2024 ⋅ 9 min read
CSS logo in front of pile of green matcha tea, which represents the matcha.css library discussed in this article.

How to style HTML with matcha.css

Matcha, a famous green tea, is known for its stress-reducing benefits. I wouldn’t claim that this tea necessarily inspired the […]

Emmanuel Odioko
Oct 7, 2024 ⋅ 10 min read
CSS typography in white on a vibrant red geometric background. Article will focus on the CSS backdrop-filter property and its various functions, including blur, grayscale, brightness, and drop-shadow.

How to use the CSS backdrop-filter property

Backdrop and background have similar meanings, as they both refer to the area behind something. The main difference is that […]

Oscar Jite-Orimiono
Oct 4, 2024 ⋅ 10 min read
View all posts

7 Replies to "A complete guide to using CSS filters with SVGs"

  1. Very interesting, thanks.
    Last fall, I decided that in my 60s it would be good to learn some other profession and decided that the frontend would be closest to me. Unfortunately, the process does not go so fast, but now I am mastering the CSS. Just here there will be one more point to practice

  2. This isn’t a comment on the article per se, which is awesome btw, just an observation that your print stylesheet has a rule of display:none; for img but for an article like this the images are almost the whole point.
    I sometimes print articles to PDF for later perusal and I had to come back and disable your CSS rule before the article could make complete sense in the PDF.

  3. Thanks,Oscar!it is informativel for me right now as I learn and work on a css animations project. I’m better at it with you.)This is really important when trying to find a simple and clear explanation.

  4. Hey just noticed that the knockout text doesn’t work with just the code you provided. Tested it in Edge and Firefox as of 2/3/2023 using the latest build of each.

    1. Hi, the code provided is just to create the filter. I didn’t include CSS because it is assumed that you already know how to style text with CSS.

      Here’s the CSS I used:

      h1{
      font-family: ‘Poppins’, sans-serif;
      position: absolute;
      width: 1000px;
      padding: 20px;
      font-size: 5rem;
      font-weight: 800;
      filter: url(#knockout);
      }

      Try this; it should work fine on any modern browser, including Firefox and edge. Cheers!

Leave a Reply