SVG Blend Modes With The feBlend Filter Primitive

You’ve probably used an image editor to combine two images together using one of the different blend modes available in your editor of choice to create some very interesting images. Did you know SVG has a filter that lets you do the same thing?

Continue reading

Combine Input Images With The feComposite Filter Primitive

Have you ever used an image editor to use one graphic to punch a shape in another? Maybe you added one simple graphic to second to create a larger and more complex shape. If so you’ll probably like working with feComposite, which allows you to combine two input images in several ways.

Continue reading

Combine The Results of SVG Filter Primitives with feMerge

Interesting SVG filter effects are produced when you combine multiple filter primitives inside a single filter. Even more interesting is when you can output the results of different primitives as layers that can be displayed together.

Continue reading

SVG Filter Primitives for Working with External Images and SVG Fragments

There will be times when the effect you want to add requires an additional image beyond the source graphic. Fortunately SVG provides a way to allow us to load external images inside a filter and make them part of the effect.

Continue reading

SVG Filter Effects—3 Simple Filter Primitives

For the last few weeks I’ve been talking about filters in SVG. I showed you the basics, talked in more detail about the filter element, and last week I discussed the input and output of filter primitives. What I haven’t yet done is talk about any of the primitives in detail.

Continue reading