Compositing Filter Primitives

Inkscape » Filter Effects » Compositing Filter Primitives

These primitives composite two or more graphics. The graphics may be from an object, a background, or the output of another primitive.

	Note
Inkscape v0.46 has a problem in using one of these filters. When using either Background Image or Background Alpha as an input to the filter, the “enabled-background” tag must be added to the SVG file (this tells SVG renderers to keep a copy of the background in memory). This is not done. A work-around is to use the Layers dialog to add a Blend filter to a Layer. The Layer blend can then be removed, leaving the necessary tag in place.

Note

Inkscape v0.46 has a problem in using one of these filters. When using either Background Image or Background Alpha as an input to the filter, the “enabled-background” tag must be added to the SVG file (this tells SVG renderers to keep a copy of the background in memory). This is not done. A work-around is to use the Layers dialog to add a Blend filter to a Layer. The Layer blend can then be removed, leaving the necessary tag in place.

	Note
The SVG 1.1 specification has a problem when an object is composited with a background that is not fully opaque. The background is included twice (once with the composited image and once as a background). There are three ways to deal with this problem. The first is to avoid using a Background Image or Background Alpha as a filter input. The second is to replace a transparent background with a solid background (you can use the Dropper Tool to replace a transparent Fill with an equivalent solid Fill [turn off “Pick alpha” in the Tool Controls]). The third is to use the Flood filter to create a solid white background and include this as the first input to a Merge filter (if using a Merge filter, include the flood first; if using a Blend or Composite filter, add a Merge filter with the first input being the output from the Flood filter and the second input being the output from the Blend or Composite filter). This solution runs into trouble when it is desired that the overall image have transparency. The SVG 1.2 standard corrects this deficiency. The red circle is combined with the background using the Merge filter. The background gray squares have transparency of 50%. On the left, the area within the filter region is too dark, a result of the background being added in twice. On the right, the filter region was first filled with white using the Flood filter.

Note

The SVG 1.1 specification has a problem when an object is composited with a background that is not fully opaque. The background is included twice (once with the composited image and once as a background). There are three ways to deal with this problem. The first is to avoid using a Background Image or Background Alpha as a filter input. The second is to replace a transparent background with a solid background (you can use the Dropper Tool to replace a transparent Fill with an equivalent solid Fill [turn off “Pick alpha” in the Tool Controls]). The third is to use the Flood filter to create a solid white background and include this as the first input to a Merge filter (if using a Merge filter, include the flood first; if using a Blend or Composite filter, add a Merge filter with the first input being the output from the Flood filter and the second input being the output from the Blend or Composite filter). This solution runs into trouble when it is desired that the overall image have transparency. The SVG 1.2 standard corrects this deficiency.

The red circle is combined with the background using the Merge filter. The background gray squares have transparency of 50%. On the left, the area within the filter region is too dark, a result of the background being added in twice. On the right, the filter region was first filled with white using the Flood filter.

Blend

The Blend primitive blends two overlapping objects or an object with its background by doing a pixel-by-pixel combination using one of five defined blend modes. The five modes are listed below. Except for the Normal mode, the result is independent of which object is on top.

For each mode, the mathematical definition is given. In the definitions, a corresponds to an object on top of b. c is the RGB color of the object while q is the opacity. Both c and q range from 0 to 1. Each of the RGB colors is combined independently.

Normal: Top object in front of bottom object as if filter not present. (In fact Inkscape removes the Blend filter primitive when “Normal” is selected for a blend added to a Layer with the Layers dialog.) cr = (1−qa)×cb + ca).
Multiply: Top object filters light from bottom object/image. (Like looking through a transparency with color of top object at bottom object.) Examples: Blue object over red object yields black since the blue object filters out all the red light. Cyan object over purple object yields blue since the cyan filters out the red but allows the blue to pass. cr = (1−qa)×cb + (1−qb)×ca + ca×cb.
Screen: Top object adds light to bottom object. (As if both top and bottom objects are projected independently onto a screen.) Examples: Blue object over red object yields purple. Cyan object over purple object yields white since cyan contains green and blue and purple contains red and blue. Thus red, green, and blue are present in equal amounts. (Why doesn't the result contain more blue? Because both cyan and purple already contain the maximum amount of blue.) cr = cb + ca − ca×cb.
Darken: Top object darkens bottom object. cr = Minimum ( (1−qa)×cb + ca, (1−qb)×ca + cb ).
Lighten: Top object lightens bottom object. cr = Maximum ( (1−qa)×cb + ca, (1−qb)×ca + cb ).

Top: The blue and red squares contain linear Gradients that range from full opacity to full transparency over a white or black background. Bottom: Blue squares overlaying red squares with different Blend modes.

Three circles on top of each other. The same Blend has been applied individually to each circle in a set. Note that the circles are on either a white or black background with maximum opacity.

An illustration of the difference between the Screen (left) and Lighten (right) Blend modes. Each circle has a red value of 128 (50%) and an opacity of 128 (50%). If the opacity was set to 255 (100%), the two figures would be identical.

The Blend filter primitive can also be applied to a Layer through the Layers dialog. In this case, input one is the selected object while input two is set to the Background Image.

Composite

The Composite filter primitive allows two overlapping objects or an object and background to be merged pixel-by-pixel according to a mode-dependent rule. See the introduction to this section for problems when using a background as one of the inputs.

The possible modes are:

Over: The upper object is placed over the lower object. This is equivalent to the normal way overlapping objects are drawn.
In: The bottom object determines which part of the top object is visible.
Out: The bottom object determines which part of the top object is hidden.
Atop: The bottom object determines what part of the top object is visible. The bottom object is also visible.
XOR: The non-overlapping regions of the top and bottom objects are visible.
Arithmetic. The inputs K1, K2, K3, and K4 are used in the equation: result = K1×i₁×i₂ + K2×i₁ + K3×i₂ + K4 to determine the output; i₁ and i₂ are the input values of the two source objects.

Examples of the different modes available in the Composite filter primitive. The first input is the blue square. The second input, the red square, is derived from the blue square using the Color Matrix and Offset filter primitives. The parameters for the Arithmetic mode are all set to 0.5.

Merge

The Merge filter allows the combining of two or more objects or outputs of filter primitives. It works by layering one image on top of another, much as regular objects are layered on top of each other in z-order, or, for the case of two inputs, as the Composite filter primitive using the “Over” mode.

When the Merge filter is added to a complex filter an unassigned input node is created. As each input is assigned, another empty input node is created. This empty node is not included in the SVG tree structure.