Perhaps you've heard of CSS filters? You can apply them do any element from CSS, like:

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

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:

<svg>
  <defs>
    <filter id="pictureFilter">
      <feMorphology operator="erode" radius="2" />
    </filter>
  </defs>
</svg>

You then can apply it to an element right in the SVG like:

<svg>
  <!-- could be anything -->
  <image filter="url(#pictureFilter)" xlink:href="image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>

Or, from the CSS by referencing the ID similarly:

.apply-svg-filter {
  -webkit-filter: url(#pictureFilter);
  filter: url(#pictureFilter);
}

There are a lot SVG filters. Familiar ones like blur, and weird ones that apply painterly effects. Here's the spec. Microsoft has a page to experiment with them.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag