SVG/Element/feComposite

Das feComposite-Element kombiniert zwei Eingangsgrafiken. Dafür stehen mehrere Algorithmen ("Operatoren") zur Auswahl. Sie werden nach der Attribut-Übersicht beschrieben und auch demonstriert.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
filter

erlaubte Inhalte

Metadaten, animate, set, script

Attribute

Name	Inhalt	Standardwert	Bedeutung
in	CDATA		Eingangsgrafik
in2	CDATA		zweite Eingangsgrafik
operator	over, in, out, atop, xor, arithmetic		Art der Überlagerung
k1, k2, k3, k4	NUMBER		Werte bei operator="arithmetic"

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

  <filter id="compOver" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="cloud.svg" result="img" />
    <feComposite operator="over" in="SourceGraphic" in2="img" />
  </filter>

Siehe auch

• SVG/Tutorials/Filter

Weblinks

• W3C (Spezifikation): feCompositeElement
• wikibooks.org: Urfilter_feComposite
• Wikipedia: Porter-Duff Composition, abgerufen 13.01.2026

Live-Beispiel

Beispiel ansehen …

<defs>
  <filter id="compOver" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="over" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compIn" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="in" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compOut" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="out" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compAtop" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="atop" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compXor" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="xor" in="SourceGraphic" in2="img" />	
  </filter>
  
  <filter id="compArith" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage href="Cloud.svg" result="img" />
    <feComposite operator="arithmetic" in="SourceGraphic" in2="img" k1="0" k2=".5" k3=".7" k4="0" />
  </filter>
</defs>

<use href="#doppeldecker" transform="translate(10,50)" filter="url(#compOver)" />

In den Beispielen werden zwei Grafiken mit feComposite zu einer zusammengefasst: Der Doppeldecker ist eine Vektorgrafik, die mit use aufgerufen wird, die Wolke ist weiteres SVG-Bild, das mit feImage aufgerufen wird.

Das operator-Attribut wird mit den möglichen Werten belegt.

Beschreibung der Operatoren

Die möglichen Werte des operator-Attributs implementieren bestimmte Standardalgorithmen, wie sie 1984 von Porter und Duff beschrieben wurden. Da sie auf Berechnungen mit Transparenzwerten basieren, spricht man hier vom Alpha Compositing.

Diese Algorithmen sind relativ einfach und nicht mit den Farbmisch-Operatoren identisch, wie sie von SVG/Element/feBlend genutzt werden. Die Porter-Duff Operatoren gehen Pixel für Pixel vor und mischen die Rot-, Grün- und Blau-Farbwerte von in und in2. Diese Farbangaben werden in der folgenden Beschreibung durch C₁ und C₂ zusammengefasst. Der Alpha-Anteil des Ergebnisses wird als αₑ bezeichnet und aus den Transparenzanteilen α₁ und α₂ der Eingangsbilder errechnet.

Zum besseren Verständnis: SVG-Filter arbeiten typischerweise mit vormultiplizierten Farbwerten. Damit ist gemeint, dass jeder Farbwert mit dem Alphawert des Bildpunkts multipliziert wird, bevor der Filtereffekt angewendet wird. Bei C₁ und C₂ werden allerdings die nicht-multiplizierten Farbwerte verwendet. Auf Grund der Porter-Duff Formeln kommt dann am Ende die vormultiplizierte Farbe für das Ergebnisbild heraus.

Jeder Porter-Duff Operator besitzt eine Formel für die Ergebnisfarbe cₑ (kleingeschrieben, weil mit αₑ vormultipliziert) und die Ergebnistransparenz αₑ. Die Farbwerte werden pro Farbkanal getrennt berechnet!

in

cₑ = α₁ x C₁ x α₂
αₑ = α₁ × α₂

Man sieht die Bildpunkte aus in, aber nur dort, wo der Alpha-Wert von in2 größer als 0 ist (je näher an 1, desto deutlicher)

out

cₑ = α₁ x C₁ x (1 - α₂)
αₑ = α₁ × (1 - α₂)

Man sieht die Bildpunkte aus in, aber nur dort, wo der Alpha-Wert von in2 kleiner als 1 ist (je näher an 0, desto deutlicher)

over

cₑ = α₁ x C₁ + α₂ x C₂ x (1 - α₁)
αₑ = α₁ + α₂ × (1 - α₁)

Dort, wo in einen Transparenzwert von 1 hat, sieht man nur in. Ist der Transparenzwert kleiner, scheinen dort der Bildpunkt von in2 durch. Falls in2 ebenfalls Transparenz besitzt, kann der Hintergrund durchscheinen

atop

cₑ = α₁ x C₁ x α₂ + α₂ x C₂ x (1 - α₁)
αₑ = α₁ x α₂ + α₂ × (1 - α₁) = α₂

Ähnlich wie over, aber für die Farbmischung wird die Transparenz von in2 der Transparenz von in hinzugefügt, d. h. das Ergebnis besitzt den Transparenzwert von in2.

xor

cₑ = α₁ x C₁ x (1 - α₂) + α₂ x C₂ x (1 - α₁)
αₑ = α₁ x (1 - α₂) + α₂ × (1 - α₁)

Wenn die Eingangsbilder nur Alphawerte von 0 und 1 haben, wird diese Composition wie ein entweder-oder Effekt. Gezeichnet wird, wo nur eins der beiden Bilder sichtbare Punkte hat. Wenn auch teilweise transparente Pixel vorkommen, entstehen Mischformen.

lighter

cₑ = α₁ x C₁ + α₂ x C₂
αₑ = α₁ + α₂

Die Farb- und Transparenzwerte werden einfach addiert. Wenn eins der beiden Eingabebilder eine einfarbige Fläche ist, kann man damit ein Bild aufhellen oder die Transparenz reduzieren.

arithmetic

Keine Porter-Duff Operation

Laut Spezifikation werden die Farben komponentenweise miteinander verrechnet. Die Formel verwendet die Attribute k1 bis k4 des feComposite-Filters, i₁ und i₂ stehen für Farbkomponenten aus den Eingabebildern:
ergebnis = k₁ × i₁ × i₂ + k₂ × i₁ + k₃ × i₂ + k₄