Difference between revisions of "SVG Group Opacity"

Revision as of 01:33, 26 November 2005

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 understanding the difference.

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 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.

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 does only know of 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, also 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.

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 hardly editable.

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

test-flavors-of-opacity1.png stroke and fill opacity

test-flavors-of-opacity2.png overlapping elements with stroke and fill opacity

test-flavors-of-opacity3.png group opacity

test-flavors-of-opacity4.png group opacity translated into %OOo% primitives