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.
Tag: svg
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.
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.
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?
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.