Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

March 4, 2016 09:00 am GMT

SVG Filters: How to Apply Them to HTML Elements

You can use CSS3 to add blur, shadow, brightness or contrast to an element. Overall, there are ten filters available. The SVG format knows filter effects as well. Partially, these options overlap, for example when it comes to blur. However, the SVG format knows several additional filters that CSS3 alone can’t create. With little effort, you can add any desired SVG filter to an HTML element. These SVG Filters Exist While CSS3 has a total of ten different filters, the SVG format offers 19 of them. For example, there’s “<feConvolveMatrix>”, which mixes pixels on an image with adjacent pixels. This creates a smudgy effect similar to the motion blur in Photoshop. Using “<feGaussianBlur>” allows you to apply a Gaussian blur, while “<feMorphology>” makes sure that the pixels of an image are thinned or thickened. Original Image and the Applied “<feMorphology>” Filter You can use the filter “<feColorMatrix>” for different color manipulations, for example to alter an image’s saturation, hue, and brightness. The two filters “<feDiffuseLighting>” and “<feSpecularLighting>” allow you to add lighting effects like diffused or reflected light to a picture. With “<feDistantLight>”, “<fePointLight>” or “<feSpotLight>”, you can define different light sources. Image With Lighting Filter There are several other […]

* You might also be interested in the following articles

Original Link: http://feedproxy.google.com/~r/Noupe/~3/8xVIZrT98Z8/svg-filters-how-to-apply-them-to-html-elements-96298.html

Share this article:

View Full Article

Noupe

Noupe passionately delivers stylish and dynamic news for designers and web-developers across the globe on all subjects of design

More About this Source Visit Noupe