Learn Development at Frontend Masters
Perhaps you’ve heard of CSS filters? You can apply them do any element from CSS, like:
You can even apply that to a HTML element or an SVG element.
But there is also filters you can define within SVG, and there are more options when you do. Here’s an example definition:
<feMorphology operator="erode" radius="2" />
You then can apply it to an element right in the SVG like:
<!-- could be anything -->
<image filter="url(#pictureFilter)" xlink:href="image.jpg" width="100%" height="100%" x="0" y="0" />
Or, from the CSS by referencing the ID similarly:
There are a lot SVG filters. Familiar ones like blur, and weird ones that apply painterly effects. Here’s the spec.
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
The link to http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm is no longer there.
I am having a horrible time trying to grayscale some SVG icons in IE. Nothing simple I have found seems to work.
Hey Mike! Yeah, that link is a little dated now that Edge has, umm, edged out IE. Here’s where you can find the archive of that page: https://testdrive-archive.azurewebsites.net/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
Get the CSS-Tricks newsletter
Copy and paste this code: micuno *
Leave this field empty
All comments are held for moderation. We'll publish all comments that are on topic, not rude, and adhere to our Code of Conduct. You'll even get little stars if you do an extra good job.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell us something privately, like pointing out a typo or stuff like that? Contact Us.