SVG supports the following clipping/masking features:
One key distinction between a clipping path and a mask is that clipping paths are hard masks (i.e., the silhouette consists of either fully opaque pixels or fully transparent pixels, with the possible exception of antialiasing along the edge of the silhouette) whereas masks consist of an image where each pixel value indicates the degree of transparency vs. opacity. In a mask, each pixel value can range from fully transparent to fully opaque.
SVG supports only simple alpha blending compositing (see Simple Alpha Blending/Compositing).
(Insert drawings showing a clipping path, a grayscale imagemask, simple alpha blending and more complex blending.)
[Insert discussion about color spaces and compositing techniques.]
It is likely that our default compositing colorspace will be linearized-sRGB, where it is linearized with respect to light energy. Any colors specified in sRGB would be composited after linearizing with the formula (alpha*src^2.2 + (1-alpha)*dst^2.2)^(1/2.2).
The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn. A clipping path can be thought of as a 1-bit mask.
A clipping path is defined with a <clipPath> element. A clipping path is used/referenced using the 'clip-path' property.
A <clipPath> element can contain <path> elements, <text> elements, other vector graphic shapes (such as <circle>) or a <use> element. If a <use> element is a child of a <clipPath> element, it must directly reference path, text or vector graphic shape elements. Indirect references are an error and are processed as if the <use> element were not present. The silhouettes of the child elements are logically OR'd together to create a single silhouette which is then used to restrict the region onto which paint can be applied.
If the 'clip-path' property references a non-existent object or if the referenced object is not a <clipPath> element, then the 'clip-path' property will be ignored.
For a given drawing element, the actual clipping path used will be the intersection of its specified clip-path with the clipping paths of all its ancestors.
(There will be a mechanism for ensuring that an initial clipping path
is set to the bounds of the entire viewport into which the SVG is
being drawn. The working group is also investigating ways to allow
an SVG drawing to draw outside of the initial viewport [i.e., initial clipping path
goes beyond the bounds of the initial viewport].)
<!ELEMENT clipPath (desc?,title?, (path|text|rect|circle|ellipse|line|polyline|polygon| use)*) > <!ATTLIST clipPath id ID #IMPLIED xml:lang NMTOKEN #IMPLIED xml:space (default|preserve) #IMPLIED class NMTOKENS #IMPLIED style CDATA #IMPLIED > |
Value: | <uri> | none |
Initial: | The bounds of the viewport (see ??? link to viewport). |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Value: | evenodd | nonzero | inherit |
Initial: | evenodd |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
In SVG, you can specify that any other graphics object or <g> element can be used as an alpha mask for compositing the current object into the background.
A mask is defined with a <mask> element. A mask is used/referenced using the 'mask' property.
A <mask> can contain any graphical elements or grouping elements such as a <g>.
If the 'mask' property references a non-existent object or if the referenced object is not a <mask> element, then the 'mask' property will be ignored.
The effect is as if the child elements of the <mask> are rendered into an offscreen image. Any graphical object which uses/references the given <mask> element will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
The following processing rules apply:
1.0-(.2126*R^2.2+.7152*G^2.2+.0722*B^2.2)
.Note that SVG <path>'s, shapes (e.g., <circle>) and <text> are all treated as four-channel RGBA images for the purposes of masking operations.
In the following example, an image is used to mask a rectangle:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> <svg width="4in" height="3in"> <desc>Example of using a mask </desc> <g> <defs> <mask id="MyMask"> <image xlink:href="transp.png" /> </mask> </defs> <rect style="mask: url(#MyMask)" width="12.5" height="30" /> </g> </svg>
A <mask> element can define a region on the canvas for the mask using the following attributes:
<!ELEMENT mask (defs?,desc?,title?, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|switch|a| animate)*)> <!ATTLIST mask id ID #IMPLIED xml:lang NMTOKEN #IMPLIED xml:space (default|preserve) #IMPLIED class NMTOKENS #IMPLIED style CDATA #IMPLIED maskUnits (userSpace | objectBoundingBox) "userSpace" x CDATA #IMPLIED y CDATA #IMPLIED width CDATA #IMPLIED height CDATA #IMPLIED > |
Attribute definitions:
The following is a description of the 'mask' property.
Value: | <uri> | none |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
There are several opacity properties within SVG:
Except for object/group opacity (described just below), all other opacity properties are involved in intermediate rendering operations. Object/group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object/group is rendered into an RGBA offscreen image, the object/group opacity setting specifies how to blend the offscreen image into the current background.
Value: | <alphavalue> | <pct> |
Initial: | 100% |
Applies to: | all elements |
Inherited: | no |
Percentages: | Yes, relative to the current viewport |
Media: | visual |