Understand Compositing and Color extensions in SVG 1.2 in 30 minutes! (original) (raw)

compositing, color, colour, porter duff

Software Engineer
Canon Information Systems Research Australia Pty. Ltd. and Canon Inc.
3 Thomas Holt Drive
North Ryde
NSW
Australia
craig.northway@cisra.canon.com.au

Craig Northway has worked on SVG related projects for Canon Information Systems Research Australia for over two years. He currently helps to represent Canon Inc. on the W3C SVG working group and is editing the SVG Full 1.2 specification. Craig graduated from the University of Queensland in 2002 with a Bachelor of Engineering (1st Class Honours) also receiving a University Medal.

SVG 1.2 will add compositing and color features to support medium to high quality screen and print rendering. These features will be of particular interest and importance to graphics artists and those in the pre-press industry. Such users require accurate colors and control over the compositing.

Integrating the enhanced compositing functionality to ensure backwards compatibility with the current rendering model was a challenging exercise for the working group and has resulted in some complicated prose. This section of specification is aimed at experienced graphics software developers therefore other readers may find it difficult to understand or implement. This presentation will attempt to provide a simple and easy to follow explanation of the functionality and how it might be implemented.

SVG 1.1 currently supports clipping, masking, alpha compositing and some enhanced compositing with the feComposite filter. SVG 1.2 adds support for the full range of Porter and Duff operators and blend modes using the comp-op attribute on graphics objects and container nodes. There are also additional modifiers, such as 'enable-background' and 'clip-to-self' which add further control over the compositing. The current functionality from SVG 1.1 will all remain. The addition of enhanced compositing improves compatibility with both Java2D and PDF/Adobe Illustrator.

1. Introduction
2. What is Compositing?
3. What is a Color Space?
4. Compositing and Color in SVG 1.1
4.1 Compositing
4.2 Color
5. Porter and Duff Compositing
6. More Detail on Porter Duff Operators
7. Compositing and Color in SVG 1.2
7.1 Compositing
7.2 Color
8. Group Compositing
9. Background Accumulation Process
10. The clip-to-self attribute
11. Extended Input Color Support
11.1 ICC Colors and Named Colors Feature
11.2 Device Color Feature
11.3 Example
12. Rendering and Interpolation Color Space
12.1 Comparative Example
13. Color Matching
14. Rendering Color Space and Compositing Examples
15. Conclusion
Bibliography

1. Introduction

SVG Full has many features that appeal to graphics artists and other "high end" users. SVG allows arbitrary glyphs in SVG Fonts, resolution independent raster effects through filters, elliptical arcs, masking, gradients. The list of available features is large, this gives enormous power to the content author.

SVG Full 1.2 extends the graphical features further offering vector effects and enhanced compositing. Also removed are the limitations of performing these effects in RGB color spaces. Authors are free to choose the rendering color space using the aptly named, rendering-color-space property.

This paper will discuss the Enhanced Compositing and Extended Color features present in SVG 1.2. It will explain the features and demonstrate their usefulness through examples.

2. What is Compositing?

Compositing is the process by which graphical objects are combined. Alpha compositing uses the alpha values, or channel (bit mask) to represent the coverage of each pixel. The alpha channel is often said to represent the 'opacity'. This coverage information is used to control the compositing of colors.

Simple alpha compositing, like that found by default in SVG 1.1 and in GDI+ and many other graphics engines, composites each object onto the background image using a simplistic formula that has the effect of overlaying the object over the background. Where the objects overlap and coverage is not complete the color of the background may show through the object that has just been rendered. This is known as the over operator in Porter Duff compositing.

The following example shows simple alpha compositing.

3. What is a Color Space?

Color is an extensive and complicated topic that this paper does not endeavour to cover in any detail. A simple introduction or reminder is all that will be provided.

Firstly, two quick definitions:

• A color space, is a set of colors defined by a color model.
• A color model is a abstract (usually mathematical) way of representing colors.

In computer graphics we commonly see two types of color spaces, or models, device independent and device dependent. Device independent color models are pure mathematical models and are used to represent colors in a standard way. Device dependent color spaces are generally defined by measurements of actual output or input colors of a particular device, monitor, printer, scanner, etc... Some examples of color spaces are:

• CIEXYZ (device independent)
• CIELAB (device independent)
• RGB (device dependent), used by monitors.
• CMYK (device dependent), used by printers.

The ICC profile specification describes a standard file format for use in color workflow. It is specified by the International Color Consortium (ICC). The format intends to provide a method to define a device color space and the transformation to and from that color space to other device dependent color spaces. These profiles can be embedded in images or attached to images and ensure that colors can be moved across platforms and vendors with accuracy.

The profiles achieve this by providing a translation to and from a common device independent color space, either XYZ or LAB. Thus each time a color is transformed the following occurs:

4. Compositing and Color in SVG 1.1

4.1 Compositing

SVG 1.1 supported some alpha compositing. Within the normal usage of SVG 1.1 the compositing support is limited to opacity and simple alpha blending between objects. Graphics objects in an SVG 1.1 file were always composited using the "over" operator.

The filter module provides a subset of the Porter Duff compositing operators. Using these operators requires the definition of a filter resource. Defining a filter resource is a relatively complicated task which requires specification of many parameters. The process of creating a filter is best suited to hand editing and currently has limited implementation in editing tools.

The use of filters for Porter Duff compositing also has limitations. The background cannot be easily used in the operation without it being included twice! Notice the example of feComposite in the SVG 1.1 specification uses feFlood with a white fill to eliminate the background from being used twice. In the second set of operations, labelled with "without feFlood", too much blue triangle (the background) is present in the final result. Backgrounds and compositing will be discussed in more detail later. The filter method is also unnecessarily verbose. As will be shown later the SVG 1.2, compositing functionality eliminates these short comings. The feComposite example from SVG 1.1 Specification:

4.2 Color

SVG 1.1 included two predefined color spaces that can be used for color interpolation. These were sRGB, (a web oriented standard defined by the W3C) and a light energy linear RGB color space, referred to in mark-up as linearRGB. The transformation from sRGB to linearRGB is defined in the SVG 1.1 specification.

An ICC Profile can be used to specify input colors. This provides some control over the rendering process, but is insufficient for color matching across a variety of devices. The rendering color space is not controlled by the specfication of input colors.

It is sometimes desirable to simulate a particular device's color behaviour (or color space, etc). In order to do this accurately, SVG needs to simulate the interpolation and combination (compositing) of colors in the device's color space. In general, the device independent sRGB and linearRGB color spaces provided are inadequate for this task.

5. Porter and Duff Compositing

The landmark 1984 paper [3] by Thomas Porter and Tom Duff, who worked for Lucasfilm, defined the algebra of compositing and developed the twelve "Porter Duff" operators. These operators control the results of mixing the four sub-pixel regions formed by the overlapping of graphical objects that have an alpha or pixel coverage channel/value. The operators use all practical combinations of the four regions.

The sub-pixel regions used in the Porter Duff operators. From an SVG 1.2 working draft:

The 'source over' compositing operator is a simple Porter Duff operator. This operator is the default operator in SVG 1.1. This operator places the source over the destination. The color that results from the operation is a combination of the three sub-pixel regions. The source color from the overlapping region, the source color that isn't obscured by the destination color and the destination color that isn't obscured by the source color contribute to the resultant color. The resultant opacity is the combined opacity from all three contributing regions.

The diagram below shows an example of the 'source over' operator with two 50% opaque shapes. Firstly, it shows the two shapes that will be composited together using the 'source over' operator. The next section demonstrates a subpixel view of the region where the two objects overlap. It shows the coverage of the colors input to the compositing operation. The third section indicates which colors from this sub-pixel view are selected by the operator to contribute to the resultant color of the overlapping region. The resulting opacity of the overlapping region of the two shapes will be 75% as all of the sub-pixel regions contribute color and opacity. The calculation of resultant opacities will be described later. The last section of the diagram demonstrates the combination of the two objects using the 'source over' operator.

A Porter Duff operator such as 'source atop', used extensively in upcoming examples, contains contributions from only two of the sub-pixel regions. The 'source atop'(src-atop) operator selects the source color from the overlapping region and the destination color not obscured by the source to produce the resultant color. The resultant opacity is the combined opacity from these two regions.

The diagram below shows an example of the 'source atop' operator with two 50% opaque shapes. It is similar to the previous diagram for 'source over'. Firstly, it shows the two shapes that will be composited together using the 'source atop' operator. The next section demonstrates a subpixel view of the region where the two objects overlap. It shows the coverage of the colors input to the compositing operation. The third section of the diagram indicates which colors from this sub-pixel view are selected by the operator to contribute to the resultant color of the overlapping region. The resulting opacity of the overlapping region of the two shapes will be 50%, as only two of the sub-pixel regions contribute color and opacity. The calculation of resultant opacities will be described later. The last section of the diagram demonstrates the combination of the two objects using the 'source atop' operator. The region where only source color was present is not rendered as the 'source atop' only select source color that overlaps destination color.

The twelve porter duff operators are shown below for opaque and partially transparent objects. The blue rectangle is the source and the orange circle is the destination.

6. More Detail on Porter Duff Operators

This section provides more in depth mathematical detail on the Porter Duff operators. It is not necessary reading for the material that follows.

The equations below are defined in terms of object A, the source object and object B the destination object. 'α' represents the alpha channel or the opacity of the object. These equations represent the four sub-pixel regions used by Porter Duff operators. They were shown graphically in the diagram (regions) that represented the four regions.

The mathematical descriptions of these regions are used to define the twelve operators which provide the distinct combinations of these areas. The alpha channel is used to indicate the coverage of the color at that pixel. The alpha values are then used when combining the colors in the overlapping regions.

The porter-duff operators can be summarised by 3 terms that represent the three regions that may be painted by any of the operators. The fourth region where no source or destination color is present cannot contribute to the resultant color or opacity. The resultant color at any pixel is given by

• A function of the source and destination color (the f(CA, CB) term below), multiplied by the product of the source and destination alpha. This term represents the region where the source and destination images overlap.
• The product of a binary factor (either 1 or 0, the Y term below), the source color and the inverse of the destination opacity. Representing the source color not overlapping the destination.
• The product of a binary factor (either 1 or 0, the Z term below), the destination color and the inverse of the source opacity. Representing the destination color not overlapping the source.

The resultant opacity at any point is given by:

• The product of a binary factor (either 1 or 0, the X term below) and the source and destination alpha. This term represents the region where both source and destination images contribute to the opacity.
• The product of a binary factor (either 1 or 0, the Y term below), the source opacity and the inverse of the destination opacity. Representing the source opacity not overlapping the destination opacity.
• The product of a binary factor (either 1 or 0, the Z term below), the destination opacity and the inverse of the source opacity. Representing the destination opacity not overlapping the source opacity.

These can be shown mathematically:

Resultant Color (Pre-multiplied) = f(CA, CB)αAαB+YCAαA(1-αB)+ZCBαB(1-αA) Resultant Opacity = XαAαB+YαA(1-αB)+ZαB(1-αA)

To summarise:

• f(CA, CB) defines how the overlapping source and destination color are combined.
• X controls whether the overlapping source and destination opacity are part of the result.
• Y controls whether the source color and source opacity not overlapped by the destination contribute to the result.
• Z controls whether the destination color and destination opacity not overlapped by the source contribute to the result.

The following tables lists the 12 Porter and Duff operators. A textual description is also provided explaining how they relate to the equations and terms defined above. In this table Resultant Color (Pre-multiplied) is represented by CR and Resultant Opacity is represented by αR

7. Compositing and Color in SVG 1.2

7.1 Compositing

SVG Full 1.2 introduces a more complete set of compositing and color features. It allows all Porter Duff operators to be specified on any graphical element or group. This is done with the 'comp-op' operator. Other compositing options are provided through the 'clip-to-self' and 'enable-background' attributes.

Following is a simple example of how to use the 'comp-op' attribute in SVG 1.2 to specify the 'src-atop' operator:

The new compositing functionality removes the disadvantages of the feComposite filter. The 'comp-op' attribute is simpler to use, less verbose and provides better control over the background. The SVG 1.1 example of compositing shown earlier in this paper can be demonstrated using SVG 1.2 features (ignoring the arithmetic operator). SVG 1.2 compositing functionality gets the desired results without a 'work around' to remove the background (the feFlood filter in the SVG 1.1 example). The SVG 1.1 feComposite default behaviour can still be obtained. Also note the reduction in the amount of markup necessary.

7.2 Color

SVG Full 1.2 also has enhanced the color functionality available. SVG Full 1.2 allows named colors to be specified using ICC named color profiles in the paint syntax; a standard method of specifying a device color; and the rendering color space can be set to an ICC profile or one of an extended set of predefined color spaces. The interpolation color space (specified by the color-interpolation and color-interpolation-filters attributes) is also extended to arbitrary icc profiles, as well an extended set of predefined color spaces.

8. Group Compositing

SVG 1.2 has introduced a simpler and more complete compositing model that has many advantages over the limited feComposite filter primitive. One of these is better control over the interaction of compositing with the background. Groups can be used to specify how a compositing effect within a group will interact with the content that is already on the page (the background).

The following examples use the SVG below as a starting point. The yellow hexagon is drawn first, followed by the blue circle and lastly the red rectangle.

If an author applied a compositing operation between an object and the background, for instance a src-atop between the rectangle and the background (the yellow hexagon and blue circle). They would specify the mark-up as follows:

And the resultanted rendered image would be:

If the author then decides to group the two front objects (circle and rectangle) and apply a group opacity, the results should be consistent with the previous example. The grouping operation means the results of compositing the circle and rectangle should behaves as one. The group opacity should reduce the opacity of the group as a whole. The grouping operation should not effect their relationship with the background (in this case the yellow hexagon). Performing compositing operations within a group and maintaining an consistent relationship with the background was previously impossible with the filter model. SVG 1.2's compositing model can handle this group opacity situation and give intuitive results. The grouping of the circle and rectangle with a group opacity is shown in the following example.

This effect can only be achieved if the background contribution to the group buffer is managed correctly. The specifics of this background processing will be covered in detail later.

There is an attribute that controls the management of the background in off screen buffers, such as a group buffer. This attribute is called 'enable-background'. It has two values, 'new' and 'accumulate'. These values refer to how the group buffer is initialised. The 'new' value indicates that the group buffer is initialised to be transparent black. This has the effect of clearing the background, creating a 'new' background. The 'accumulate' value indicates that the group buffer is initialised with a copy of the background. This preserves the background information through compositing and filtering operations. 'accumulate' is the default value and the intuitive behaviour was demonstrated above. If no operations are performed on the group, i.e. there is no group opacity, the 'accumulate' behaviour provides exactly the same result as if there was no group present.

The next example shows the same SVG as the previous example, but with the 'enable-background' attribute set to 'new'. This effectively isolates the 'src-atop' operator from the yellow polygon that has already been composited onto the background.

Groups can be nested with differing specifications of 'accumulate' and 'new'. A simple explanation is that accumulated groups will use the background up until the first ancestor group with new specified or the root svg, whichever comes first. The full specification of enable-background can be found in the SVG 1.1 specification.

9. Background Accumulation Process

So just how does this background accumulation work? The background accumulation process is quite complex and this section can be skipped by those without a good understanding of computer graphics. Without the background accumulation and removal process unintuitive results would appear when groups were added, or too much background would be present in the final result.

The specification explains background accumulation and removal with lots of mathematics. See the rendering chapter if you want to check it out. Here the mathematics will be avoided and a graphical example shown. The src-atop operator, enable-background='accumulate'example from the previous section will be broken down into individual drawing operations showing the page buffer, the group buffer and the background buffer.

The first step is compositing the polygon onto the page buffer or equivalent. The page buffer represents the image that forms the final output to the device.

The next step creates a group buffer. The group buffer contains a copy of the page buffer. At this stage the background buffer is also created. It is initialised to be 1, representing that an unaltered copy of the background is in the group buffer. The background buffer is a single channel buffer. It is used to track the effect of compositing operations on background present in the group buffer. It is used in the final step to ensure that the correct amount of background is present in the final result.

The next step composites the first child of the group, the circle into the group buffer. This step also modifies the group buffer to represent the effects of the circle compositing operation. The black circle in the group buffer indicates that background has been removed from the group buffer in that region.

The next child is composited into the group buffer using the src-atop operator. Once again the background buffer is modified to reflect the background that remains in the group buffer. Notice in the region that the circle and rectangle overlap almost all of the background has been removed. All of the child objects in the group have now been composited into the group buffer.

The fifth step in this example removes the background color from the group buffer. After this operation is performed the background buffer is inverted. The background buffer now represents the amount of background that needs to be removed from the page when compositing the group buffer onto the page buffer. It will be used in the final compositing step to correct the amount of background present in the final result.

The group opacity can now be applied to both the group and background buffers.

The group buffer can now be composited with the background using the 'over' compositing operator and the background buffer data. The background buffer is used to control the 'over' operation such that the correct amount of background is removed from the page buffer. Shown below is the result of this compositing operation.

10. The clip-to-self attribute

The clip-to-self attribute was introduced to provide compatibility with Java2D. Compositing functionality in Java 2D is generally performed in the manner described by this attribute. That is that the effects of the compositing operation are limited to the region of the source image. The following image demonstrates the difference between clip-to-self and standard porter-duff compositing. Some of the Porter Duff operators are unchanged, because they normally have no effect outside the source region. The changes can be seen in the clear, src, src-in, dst-in, src-out and dst-atop.

11. Extended Input Color Support

11.1 ICC Colors and Named Colors Feature

Specifying a color using an ICC profile allows input colors to be in any color space. This functionality is available in SVG 1.1. If SVG renderers preserve this information it can be used to deliver more accurate color to the output device.

SVG 1.2 also includes named color profiles for use in specifying paint. Named color profiles take a symbolic name for a color and convert it to either another color space, or a device specific color value. Named colors are often used in print workflows, an example of named colors are Pantonetm colors. Using a named color profile, rather than a vendor extension or device color, allows other vendors renderers to simulate the named color.

11.2 Device Color Feature

The device-color feature standardises the ability for a vendor to specify a device color. Device colors are necessary to represent colors or functionality that are unable to be represented using color profiles, or can be more accuarately represented in another way. A device color is a color in a format that is known to a particular model or class of device, such as a printer. This means that the vendor has built the ability to recognise this particular color representation into the device.

Examples of this may be printers with extra colored inks. Standard color model processing may not be able to account for these extra inks, but by specifying a device color the user agent can instruct the printer to use them where appropriate. Providing a standard method for this within the paint syntax reduces the need for vendor specific extension to the syntax or the language. Authoring tools will be able to create device colors using a similar method for devices from different vendors.

11.3 Example

12. Rendering and Interpolation Color Space

SVG 1.2 Full includes the 'rendering-color-space' property. This allows control over the rendering color space. The rendering color space is the color space in which compositing is performed in. This feature is necessary to preserve color accuracy.

When 'rendering-color-space' is specified on a group, the off-screen buffer created for that group will be in the color space specified by the ICC profile. All input objects must preserved in this color space, or converted to this color space before rendering. Upon completion of rendering all children into the off-screen buffer, the buffer will be converted to the parents compositing space before being composited.

In the following simple example the page buffer will be created in sRGB space, the group buffer will be created in LAB color space. The objects in the group, two rectangles, will have the input colors preserved as LAB and will be rendered into the group buffer. The group buffer will then be converted to sRGB and composited with the background. In the second example the LAB colors input are converted to sRGB prior to rendering. Some small differences in color can be noticed between these two simple examples.

LAB rendering example:

RGB rendering example:

12.1 Comparative Example

The following examples show some effects that can be achieved by working in different render and interpolation color spaces:

The 3 gradients on the left are interpolated in 3 different color spaces. The top gradient is interpolated in the LAB color space. The middle gradient is interpolated in sRGB. The lower gradient is interpolated in linearRGB.

The 2 groups on the right contain a red rectangle with a gradient on the opacity channel, overlaid onto a flat filled green rectangle. Both the gradients are interpolated in sRGB space. The compositing in the top example takes place in LAB, whereas the lower example composites in sRGB.

The LAB color space is known to produce smooth color blends and interpolation between transparent colors. This is because it is perceptually uniform (or sufficiently close to it). The ability to use such color spaces in SVG for rendering increases the flexibility of the language and makes it more appealing to graphics professionals.

13. Color Matching

Rendering color space can also be used to simulate a device color space and provide more accurate color matching. For instance some print devices are capable of rendering in RGB, but a device specific RGB color space. A better simulation of final output can be generated by using this color space in the SVG file, for instance as the rendering color space of the root 'svg' element. This allows all SVG viewers, rather than just a particular vendors print preview functionality to provide an accurate representation of final form artwork.

14. Rendering Color Space and Compositing Examples

The following example shows some more complex usage of compositing and rendering-color-space. This example uses both vector art and raster images.

The example is rendered in the LAB color space. Effects are used to modify colors in the LAB color space. These effects would be significantly more complicated, if impossible in an RGB color space. The effects modify the colors of the images without affecting the luminance.

The raster images are combined using compositing operations and the vector artwork is combined with the background using compositing operations.

If we look at a particular effect in isolation. We can see that a filter in the LAB color space (color-interpolation-filters="lab-profile" is used to modify the color of the image. The image is also composited with gradients to blend it into the other images. A blur is also added for effect.

For comparision here is the unaltered image.

15. Conclusion

The compositing functionality present in SVG 1.2 is significantly improves the functionality available using the feComposite filter. The new functionality allows correct control over how the background is used in compositing operations. This functionality provides better compatibility with other graphics languages and APIs.

The extended color functionality in SVG 1.2 increases the usefulness of SVG for high quality graphics. Control over the rendering color space is necessary for providing accurate reproduction of color across a wide range of devices and circumstances.

Principles of Color Technology 2nd Edition Billmeyer and Saltzman, John Wiley and Sons, 1981.

Java 2D API Graphics Vincent J Hardy, Sun Microsystems Press, 2000.

Compositing Digitial Images Thomas Porter and Tom Duff, Computer Graphics Volume 18, Number 3, July 1984.

File Format For Color Profiles (Version 4.0.0) International Color Consortium, http://www.color.org.

A Standard Default Color Space for the Internet - sRGB http://www.w3.org/Graphics/Color/sRGB.

SVG 1.1 Full Specification http://www.w3.org/TR/SVG11, 2003.

SVG 1.2 Full Specification http://www.w3.org/TR/2004/WD-SVG12-20041027/, 2004.

Adobe PDF Specification, Third Edition Version 1.4 http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf, Adobe Systems Inc, 2001.

XHTML rendition made possible bySchemaSoft'sDocument Interpreter™ technology.