Firefox 3.5 introduced support for using SVG as a component of CSS styles in order to apply SVG effects to HTML content.

You may specify SVG in styles either within the same document, or within an external style sheet.

Note: References to SVG in external files must be to the same origin as the originating document.

Using embedded SVG

To apply an SVG effect using CSS styles, you first need to create the CSS style that references the SVG to apply.

<style>.stylename { mask: url(#localstyle); }</style>

In the above example, the new style, identified by "stylename," is an SVG mask referenced by the ID "localstyle". Once this is established, that mask will be applied to any elements using this CSS style.

This sounds more complicated than it really is; take a look at the examples to get a good idea how this works.

This establishes a clipping area comprised of a circle and rectangle, and assigns it the ID "#c1". This is then referenced from the style. Once the target style is established this way, the clip path can be assigned to any element.

Note also that you can make changes to the SVG in real time and see those changes immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:

The example includes a button you can click to change the clip path and see the change take effect.

Example: Filtering

This example demonstrates how you can apply a filter to HTML content using SVG. It establishes several filters, which are applied using styles to each of three elements in both the normal and mouse hover states.

Any SVG filter can be applied this way. For example, to apply a Gaussian blur effect, you might use: