B
BSchwarz
Guest
Scalable Vector Graphics (SVG) provides Web developers with a declarative, markup-based language for building rich, interactive content as part of their Web sites. With SVG Filter Effects, supported in IE10 in the Windows Developer Preview, developers have a collection of powerful, image-based effects that apply to all SVG elements. Like all Web page content in IE9, SVG Filter effects in IE10 are built with hardware-accelerated rendering, resulting in stunning performance and opening up new opportunities for Web developers to create exciting content for end-users.
Introduction to SVG Filters
SVG Filter Effects expand the graphic capabilities of the Web. 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.
An image of an SVG pig before (left) applying an SVG filter and after (right) applying an SVG filter
There are 16 different filter primitives. They enable effects ranging from providing light sources to applying matrix transformations to adding a Gaussian blur and much more. SVG Filters make it easy to manipulate and apply Photoshop-like effects to SVG elements. Akin to the rest of SVG, the results are scalable, retaining high quality at any resolution. The filter definition is completely reflected in the DOM as is the original SVG element. Effects can easily be removed by removing the filter attribute. The original, unfiltered image can be attained in this manner. ilter primitives vary widely to cover a large scope of possibilities but there are commonalities between them. Most filter primitives take one or two input parameters. These inputs typically reference the source element, the source element
SVG filters demo on IE Test Drive site
Introduction to SVG Filters
SVG Filter Effects expand the graphic capabilities of the Web. 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.
An image of an SVG pig before (left) applying an SVG filter and after (right) applying an SVG filter
There are 16 different filter primitives. They enable effects ranging from providing light sources to applying matrix transformations to adding a Gaussian blur and much more. SVG Filters make it easy to manipulate and apply Photoshop-like effects to SVG elements. Akin to the rest of SVG, the results are scalable, retaining high quality at any resolution. The filter definition is completely reflected in the DOM as is the original SVG element. Effects can easily be removed by removing the filter attribute. The original, unfiltered image can be attained in this manner. ilter primitives vary widely to cover a large scope of possibilities but there are commonalities between them. Most filter primitives take one or two input parameters. These inputs typically reference the source element, the source element
Last edited:
