SVG Group Opacity

SVG Import (external impl.)
Overview
Download
Source code
Features
Restrictions
FAQ
TODO
OpenDocument
Gradients
Group opacity
Elliptic arcs
Path semantics
Coordinate systems

SVG and OpenDocument support translucent graphics elements. Through a translucent element, the background shines through by a certain amount. However, the nomenclature is to speak of more or less opaque graphics elements. This is true for both formats. Opacity is measured in percentages from 100 (fully translucent).

Opacity in SVG

SVG supports three flavors of opacity, stroke, fill and group opacity. The meaning of the former two is obvious: Informally, stroke opacity applies to "one dimensional" graphics elements (e.g. a line or the border of a path or polygon), while fill opacity addresses "two dimensional" graphic elements (e.g. the area of a closed path). Both stroke and fill opacity only deal with single primitive graphic elements. The third flavor, group opacity, describes how a group of graphic primitives is blended into its common background. The following figures help illustrate the difference.

Figure 1: Stroke and fill opacity.

Figure 1 shows two squares printed over a blue rectangular bar. The left square is printed with a red border an no fill, while the right square has no border but is filled with green. The red square has a stroke opacity value of 50% and the green square has the same value as fill opacity setting. This means that the blue background bar shows through both the border and the filled area.

Figure 2: Overlapping elements with stroke and fill opacity.

Figure 2 shows what happens, if the border and the area are overlapped. On the left side, there is only partial overlapping. In contrast, the image on the right is a single square with a stroke color of red, a fill color of green and both, a stroke and fill opacity setting of 50%.

Here, one observes that not only the blue background shows through both the border and the area, but that the area also shows through the border. While this result might be the desired one on the left, the image on the right visually does not correspond to a green square with red border that is painted transparently as a whole over a blue background bar. Instead, the observer looks "inside" the square and perceives how this square is composed from its parts: the area with overlapping border.

Figure 3: Group opacity.

Group opacity as shown in Figure 3 can be used to achieve the desired result of transparent images that are composed of overlapping parts. On the left, the border and the area form a group that is styled with a group opacity setting of 50 (instead of a combined fill and stroke opacity). This produces the desired effect of showing a composed complex image transparently over some background.

Opacity in OpenDocument

Unfortunately, OpenDocument supports stroke and fill opacity but has no form of expressing group opacity. Therefore, an opacity setting in OpenDocument always applies to an individual shape only. It is neither possible to specify an opacity value for a group of objects nor for a shape with its border as a whole. As consequence, the simplest form of a square with a border (as shown on the right side of Figure 3) cannot be painted transparently over a background in OpenDocument.

Figure 4: Group opacity translated into OpenDocument primitives.

The only way of achieving the effects of Figure 3 in an OpenDocument document is to decompose the image, which should be painted transparently, into non-overlapping parts as shown in Figure 4 (the red border is only sketched with dashed lines). This decomposition can be achieved manually in by successively subtracting shapes with higher Z-order from those with lower Z-order. While this is possible in principle for shapes filled with solid colors, caution is necessary for shapes filled with gradients (see also SVGGradients). The decomposed shape also becomes difficult to edit.

Consequences for SVG Import

Stroke and fill opacity property settings in SVG can directly be converted into OpenDocument styles. For group opacity however, there is no direct translation. There are two options that differ in their emphasis on reproduction quality and "editability" of the result:

1. Groups of objects that have a group opacity setting below 100% can be decomposed into non-overlapping areas with a corresponding fill opacity setting.
2. The group opacity could be multiplied to all fill and stroke opacity properties of the objects contained in the group by leaving their shapes intact.

The first option produces results that are more similar to the source SVG image. However, due to rounding and rendering inaccuracies, the result might not be perfect, because it depends on the perfect alignment of shapes to avoid gaps between them. Also, the resulting OpenDocument image will no longer be reasonably editable. The second option will result in serious visual differences between the SVG source and the OpenDocument result, but the image will stay editable in .

Current status

Currently, the second (and most simple) option of pre-multiplying group opacity values to fill and stroke opacity settings of group members is implemented.

Further steps

User input is required to decide, whether the results currently achievable are sufficient. -- Bernhard Haumacher - 21 Aug 2005

Discussion

IMO, SVG import should result in images that are useful for editing them. Perfect rendering of unmodified SVG images should be dealt with in Issue:49991. -- Bernhard Haumacher - 21 Aug 2005