Select Page

SVG Filters

by | Dec 13, 2017 | SVG

Earlier this year, I had the distinct honor of speaking with Christopher Schmitt about SVG (especially SVG filters). In this 6 minute overview, he discusses why these are important to web professionals everywhere. The full discussion is available to our members (once you login, scroll down to find the link).

Some of the sites mentioned by Christopher in this interview include the following:

Books he mentioned include:

Best always,

Mark DuBois
Executive Director and Community Evangelist

For those who are interested in a transcript of this interview, we provide the following:

[Mark DuBois] I’m speaking with Christopher Schmitt today. Christopher thank you so much for taking the time to be with us and to help web professionals better understand SVG filters.
To use an anology – they are similar to CSS rules; they can enhance text and images and so forth but I know that is an over simplification. Could you help our listeners better understand the technology please.

[Christopher Schmitt] I’ll be happy to. Thanks for having me on Mark.

With SVG filters, I think your analogy is good except that with SVG filters you to actually create a SVG file (which is pretty easy to do) and then you can associate that to an image and apply filters to that. What I really like about it is that you can apply SVG filters to almost any web element you have on the page like a div or the whole page, that is where the power of SVG applies. You can expand to more and more things. Ok.

[Mark] Thank you very much for that. What’s happening with them today? What’s the future looking like with respect to SVG filters. I know you’ve been doing some things recently.

[Christopher] This week my company Environment for Humans we did an online SVG conference are with seven speakers with wide ranging topics. You wouldn’t expect to have an all day conference on jpeg. But you could if you want to be ultra nerdy about it, but just for practical purposes of SVG. We had talks about SVG animation and are we talked about some responsive logos where you actually create a logo that is like a vector image a word type of logo mark. A prime example is like Disney’s castle logo that you see at the beginning of every movie that they do with a simple two color inclusion and the words Walt Disney underneath. One example that always been shown around is that if you have a browser fully expanded you shorten the browser and the castle goes away and you see the words Walt Disney you shorten the browser more and you just see that trademark script D from Disney’s name no matter what size your viewport is, you actually see the Walt Disney trademark.

That’s a great thing you can do to deal with the flexible nature of responsive web design where you have to deal with a lot of the not just resolution independence that you need (because of browser resolutions retina and all that), but you also have to deal with connectivity of the Internet too. Some people have very slow connections to the Internet so you don’t want to be throwing down a lot images for one logo. An example too, we also did stuff with the work flows with Sketch app which is a nice alternative to Illustrator and it’s also great for making wireframe mockups. There is not a lot out there in terms of dealing with Sketch and dealing with SVG exports and high upper level things like that too. There are a lot of things we can do with SVG. I have fun geeking out. There are so many things you can do with it.

[Mark] Definitely, I think the idea that it’s a vector based is very helpful today with all the different resolutions out there. It seems (in my view of the world) a pixel is no longer a pixel. With respect to SVG and filters and so forth why should practicing web professionals care? Why should they be interested in this today other than what you just talked about?

[Christopher] What I like about it is we can jettison Photoshop in some ways to do simple digital imaging effects. So, if you wanted to do a sepia tone, you can do that with SVG filters and can reuse over and over again without having to go back into Photoshop. One example I love was a few years back, Andy Clarke had this great example of making a print style sheet and use CSS filters for converting images to the black and white so when they printout it wouldn’t use color ink which is expensive,  so you conserve it. He also did that to old versions of IE so you get a generic black and white version of it (which was pretty funny), but you can also do it with SVG to create images.

There is a kind of filter you can use called color matrix  and you can do a whole lot of cool things with it. Before I get to that, I want to say that I’m an old guy in terms of the web. Been on the web since 1993 and I love Photoshop, so when I say get rid of Photoshop, it saddens me to say that. I have been working with Photoshop since version 1.5.

[Mark] Is there anything else you’d like to share with web professionals about this or other technologies, Christopher?

[Christopher] I have a weekly newsletter, I started this year, it’s called UXDesignNewsletter.com. Every week I send out a list of resources at least 10 plus more. That I think are really great. It comes out every Monday. If you want to sign up UXDesignNewsletter.com.

[Mark]  Fantastic! We will put the link out there and encourage our members to sign up or anyone else listening to this as well. Christopher, thank you so much for taking the time today in helping us better understand what’s going on in the world of SVG, SVG filters ad more. Thank you again.

[Christopher] Thank you so much for having me.