This document defines how SVG effects are extended to apply to CSS-formatted elements. In particular, it makes the 'filter', 'mask' and 'clip-path' CSS properties and SVG paint servers applicable to CSS-formatted elements (such as HTML elements).
Many graphical effects for HTML content are impossible with existing Web standards. For example, there is no reasonable way to clip an HTML element to a non-rectangular region, or to apply an alpha mask to an HTML element, or to apply image processing effects such as color channel manipulation to HTML elements, or to draw a gradient background for an HTML element, or to draw a reflection or thumbnail of HTML content. SVG nominallly supports many of these features, but only applied to SVG elements, not HTML. You can embed the HTML in a <foreignObject>, but that has major limitations; in particular, you can't apply effects to HTML elements via stylesheets without changing the markup --- ripping out content and putting it inside ugly SVG fragments --- and breaking most CSS layouts in the process.
Therefore, this document proposes extensions to SVG and CSS to allow SVG effects to be applied directly to non-SVG content via CSS.
"CSS-formatted elements" refers to elements which participate in CSS layout; in particular, elements which have border-boxes defined by CSS. Therefore it includes replaced elements and <svg> elements in a non-SVG context, but excludes other SVG elements.
The "bounding client rect" of a CSS-formatted element is a rectangle which is the union of the CSS border-boxes for the element (so called because it corresponds to the results of the DOM getBoundingClientRect API).
The "bounding box" of a CSS-formatted element is a rectangle which is the union of the CSS border-boxes for the element and all its descendant elements.
Currently these SVG CSS properties are defined to only apply to SVG container elements and graphics elements. These definitions are amended to also apply to CSS-formatted elements.
These SVG properties require the subject element to define two coordinate systems: "objectBoundingBox" and "userSpaceOnUse". For CSS-formatted elements, "userSpaceOnUse" has its origin at the top-left of the element's bounding client rect and one unit equals one CSS "px"; percentage values are relative to the size of the bounding client rect. "objectBoundingBox" has its origin at the top-left of the element's bounding box and one unit equals the width or height of the bounding box.
When a CSS-formatted element is the subject of one or more of these properties, it becomes a pseudo-stacking-context in exactly the same way that CSS 'opacity' induces a pseduo-stacking-context. Like CSS 'opacity', all the element's boxes are rendered together as an group and effects are applied to the group as a whole.
Note that these properties do not change the geometry of the CSS boxes for the subject element, even though 'filter' can cause painting outside an element's border-box.
The compositing model follows SVG: first any filter effect is applied, then any clipping, masking and/or group opacity. These effects all apply after any CSS effects such as 'clip'. As per SVG, 'clip-path' affects hit testing for mouse events but 'mask' and 'filter' do not.
The SVG 'fill' and 'stroke' properties are not suitable for application to HTML because they inherit. Instead, a CSS 'background-image' property, whose value is a url() containing a "hash reference" (e.g., "url(#x)") referring to an SVG paint server element, is defined to paint a "pseudo-image" using that paint server.
The image's size is the size of the background-origin area (in CSS pixels). The "objectBoundingBox" and "userSpaceOnUse" coordinate systems are also defined by the background-origin area; their origins are at the background-origin origin and percentage values are relative to the size of the background-origin area. For "userSpaceOnUse", one unit is equal to a CSS "px". For "objectBoundingBox", one unit is equal to the background-origin area's width or height.
Note that the image can be subject to CSS background repetition if 'background-position', 'background-attachment' or other effects are used. This repetition is handled in the normal CSS way, by tiling the rectangular image, not by extending the domain of the SVG paint server.
This specification depends on SVG 1.1, CSS 2.1 and CSS3 Borders and Backgrounds.