One type of light illuminates an object and another type highlights it. Today we’ll talk about the latter, specifically the filter primitive feSpecularLighting, which is used to create highlights on an SVG image or graphic.
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.
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.
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.