SVG supports the following clipping/masking features:
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 'clippath' 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 'clippath' property references a non-existent object or if the referenced object is not a <clippath> element, then the 'clippath' property will be ignored.
For a given drawing element, the actual clipping path used will be the intersection of its specified clippath with the clippaths 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].)
| 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. One important 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 a one-channel image where pixel values can range from fully transparent to semi-transparent to fully opaque.
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 July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990706.dtd">
<svg width="4in" height="3in">
<desc>Example of using a mask
</desc>
<g>
<defs>
<mask id="MyMask">
<image 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:
The following is a description of the 'mask' property.
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 SourcePixmap in viewport space, the object/group opacity setting specifies how to blend the SourcePixmap into the current background.