Create SVG Lighting Effects With The feDiffuseLighting Filter Primitive

Lighting effects can be used to show the 3-dimensionality of an object, to brighten an object, or to illuminate a specific part of an object or background.

Continue reading

An Introduction To SVG Lighting Filters And Light Sources

While current trend in web design favors a flat look, I have no doubt that depth will return and we’ll once again see 3-dimensional design elements. When that time comes, SVG will have us covered with a handful of filter primitives that work together to create different lighting effects and bring back the missing dimension into and out of the screen.

Continue reading

Modify RGBA Color Channels With The feComponentTransfer Filter Primitive

Often when altering the color of an image you’d like to make one area brighter and another darker or you want to increase the saturation of reds while decreasing the saturation of blues and greens. The feComponentTransfer allows you to work with each channel, including the alpha channel independently of the others.

Continue reading

Modify The Color Values Of An Image With The feColorMatrix Filter Primitive

Sometimes you can completely change the emotional impact of an image through color changes alone. You can make the subject pop or you can change a cool image into a warmer one. SVG provides a couple of primitives that allow for the non-destructive modifications of color in any image or graphic.

Continue reading

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