SVG Filter Effects Tutorial and Demo on IE10
Join the DZone community and get the full member experience.Join For Free
An SVG Filter defines an operation on a graphical input. Just like other HTML elements, filters are declarative in nature and have a supporting DOM for dynamic manipulation. A filter is applied to an SVG element via the filter attribute, in the form of filter="url(#filterId)", or it can be applied as a CSS property filter:url(#filterId). Each filter is composed of one or more filter primitives, which are the basic building blocks for creating nifty effects. Each applies a fundamental effect to a graphic. To form more complex effects, filter primitives can be chained together, feeding the output of one to the input of another. When a filter is applied to an SVG element, that SVG element is used as the source graphic for the filter or the first filter in a chain.
Here's an SVG pig after applying a filter that multiplies the image with a photo of the sky
You'll need to download the Windows 8 developer preview to run the supported IE10 preview, or you can wait for the update to the IE10 preview for Windows 7.
Published at DZone with permission of . See the original article here.
Opinions expressed by DZone contributors are their own.