> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG feComposite: Grafik mit in, out und xor vergleichen

> Vergleiche SVG-Filtereingaben mit in, out und xor, prüfe Operandenreihenfolge und Teiltransparenz und bewahre Quellpfade, wenn eine sichtbare Öffnung keine bearbeitbare Geometrie ist.

Source: https://perfectvector.com/de/blog/svg-composite-artwork

Language: de
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

SVG-`feComposite` kombiniert zwei gerenderte Eingaben. Bei vollständig undurchsichtigen Eingaben behält `in` die erste Eingabe in der Überlappung, `out` behält sie außerhalb der Überlappung, und `xor` kombiniert beide Eingaben außerhalb ihrer gemeinsamen Überlappung. Diese Operationen ändern die Farbe beim Rendern. Sie schreiben die Quellpfade nicht als bearbeitbare Schnittmenge oder Differenz um.

Dieser Unterschied ist wichtig, wenn eine Überlappung wie eine Öffnung aussieht, die Ausgabe aber tatsächliche Konturen benötigt. Das folgende Beispiel vergleicht zwei selbst erstellte asymmetrische Formen, kehrt die Eingaben um und prüft Teiltransparenz. Bewahre die Quellgrafik neben dem gefilterten Ergebnis auf.

## Benenne beide Eingaben vor der Operatorwahl

Die [MDN-Referenz zu feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) beschreibt eine pixelweise Operation im Bildraum. `in` benennt die erste Eingabe, `in2` die zweite. Gib Zwischenergebnissen ausdrückliche Namen, damit eine geänderte Filterkette nicht unbemerkt die Operanden verändert.

Bei undurchsichtigen Innenflächen lassen sich diese drei Operationen leicht vergleichen:

| Operation | Erste Eingabe A, zweite Eingabe B                                       | Was das Umkehren der Eingaben ändert             |
| --------- | ----------------------------------------------------------------------- | ------------------------------------------------ |
| `in`      | Farbe von A in der Überlappung                                          | Die Überlappung trägt stattdessen Bs Farbe       |
| `out`     | Farbe von A außerhalb von B                                             | Bs Farbe außerhalb von A ist ein anderer Bereich |
| `xor`     | Beide Eingaben außerhalb ihrer gemeinsamen undurchsichtigen Überlappung | Dieselben nicht überlappenden Bereiche bleiben   |

Dasselbe Attribut `operator` erscheint auch an anderen Filterprimitiven mit anderen Werten. Halte den Kompositionskontext ausdrücklich fest. [MDNs operator-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) unterscheidet ihn von Morphologieoperationen.

**Sichtbare Farbe ändern**

![Schematischer Vergleich überlappender farbiger Grafik und einer Komposition mit ungefärbter Überlappung](https://perfectvector.com/blog/svg-composite-artwork/overlap-and-paint.webp)

*Illustration: Überlappende Eingaben können einen Bereich ungefüllt lassen. Diese dekorativen Silhouetten und Pfeile sind schematisch. Die genauen Operatoren, Alphaproben und unveränderten Pfade unten stammen aus einer selbst erstellten, ausgeführten Browser-Testdatei.*

## Richte die zweite Grafik ausdrücklich aus

Unser erster Operand A ist ein blaugrüner gestufter Block. B ist ein ockerfarbenes schiefes Drachenviereck. Beide verwenden dieselbe viewBox `0 0 240 160`. B reicht über As lokalen Begrenzungsrahmen hinaus. As Grenzen als Filterbereich anzunehmen wäre daher ein schlechter Ausgangspunkt.

Der Filter verwendet `filterUnits="userSpaceOnUse"` für seinen ausdrücklichen Bereich `x=0`, `y=0`, `width=240`, `height=160`. [MDNs filterUnits-Referenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) erklärt diese Koordinatenwahl. Wir setzen außerdem `primitiveUnits="userSpaceOnUse"` und geben der zweiten Eingabe dieselben Vollrahmenkoordinaten.

B ist eine eigenständige SVG-Daten-URL, die über `feImage` mit dem Ergebnisnamen `operandB` eingebunden wird. Das führt sie dem Filter als Bildeingabe zu. Es fügt Bs Pfad nicht als neues direktes Kindelement der gefilterten Grafik ein. Die [MDN-Referenz zu feImage](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) beschreibt dieses Verhalten als Bildeingabe.

Der Filter wählt ausdrücklich `sRGB`. Der Standard für diese Filterprimitive ist `linearRGB`, wie die feComposite-Referenz dokumentiert. Weder dieser Standard noch der Operatorname liefert eine Pfadbearbeitungsoperation.

## Führe den vollständigen selbst erstellten Vergleich aus

Speichere dies als `starter.html` und stelle den Ordner über lokales HTTP bereit, etwa mit `python3 -m http.server 8766 --bind 127.0.0.1`. Öffne `http://127.0.0.1:8766/starter.html`. Verwende bei Bedarf einen anderen freien Port.

Die Seite erstellt zwei Originale und sieben gefilterte Fälle in jeweils zwei ausdrücklich gewählten Größen. Jede Filter-ID enthält Fall und Breite, sodass mehrere Inline-SVGs im selben Dokument eindeutige Verweise haben. Jeder Link zum Speichern des SVGs erhält den eigenständigen Filter und seine kodierte B-Eingabe.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG composite artwork</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 18px; }
  figure { margin: 0; }
  svg { display: block; background: white; border: 1px solid #bbb; }
  figcaption { margin: 6px 0; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Original operands and rendered composites</h1>
<main id="cases"></main>
<pre id="report"></pre>
<script>
  const A = 'M24 24 H132 V56 H192 V136 H24 Z';
  const B = 'M92 8 L216 84 L92 152 L60 84 Z';
  const svgNS = 'http://www.w3.org/2000/svg';
  const cases = [
    { id: 'a' }, { id: 'b' },
    { id: 'a-in-b', operator: 'in' },
    { id: 'a-out-b', operator: 'out' },
    { id: 'a-xor-b', operator: 'xor' },
    { id: 'b-in-a', operator: 'in', reverse: true },
    { id: 'b-out-a', operator: 'out', reverse: true },
    { id: 'b-xor-a', operator: 'xor', reverse: true },
    { id: 'a-out-half-b', operator: 'out', opacity: 0.5 },
  ];
  function documentSVG(test, width) {
    const height = width * 2 / 3;
    const id = test.id + '-' + width;
    const second = '<svg xmlns="' + svgNS + '" width="240" height="160" viewBox="0 0 240 160">'
      + '<path d="' + B + '" fill="#d4a53a" opacity="' + (test.opacity ?? 1) + '"/></svg>';
    const href = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(second);
    const first = test.reverse ? 'operandB' : 'SourceGraphic';
    const other = test.reverse ? 'SourceGraphic' : 'operandB';
    const defs = test.operator ? '<defs><filter id="' + id + '" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="240" height="160" color-interpolation-filters="sRGB">'
      + '<feImage href="' + href + '" x="0" y="0" width="240" height="160" preserveAspectRatio="none" result="operandB"/>'
      + '<feComposite in="' + first + '" in2="' + other + '" operator="' + test.operator + '"/></filter></defs>' : '';
    return '<svg xmlns="' + svgNS + '" width="' + width + '" height="' + height + '" viewBox="0 0 240 160">'
      + defs + '<path d="' + (test.id === 'b' ? B : A) + '" fill="' + (test.id === 'b' ? '#d4a53a' : '#176b5b')
      + '"' + (test.operator ? ' filter="url(#' + id + ')"' : '') + '/></svg>';
  }
  async function run() {
    const results = [];
    for (const width of [120, 240]) {
      for (const test of cases) {
        const source = documentSVG(test, width);
        const svg = new DOMParser().parseFromString(source, 'image/svg+xml').documentElement;
        const figure = document.createElement('figure');
        const caption = document.createElement('figcaption');
        caption.textContent = test.id + ', ' + width + ' × ' + width * 2 / 3;
        figure.append(document.importNode(svg, true), caption);
        document.getElementById('cases').append(figure);
        const path = figure.querySelector('path');
        const bbox = path.getBBox();
        const image = new Image();
        image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
        await image.decode();
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = width * 2 / 3;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0);
        const sample = (x, y) => [...ctx.getImageData(Math.floor(x * width / 240), Math.floor(y * width / 240), 1, 1).data];
        const hash = [...new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(path.getAttribute('d'))))]
          .map(v => v.toString(16).padStart(2, '0')).join('');
        const download = document.createElement('a');
        download.href = image.src;
        download.download = test.id + '-' + width + '.svg';
        download.textContent = 'Save SVG';
        figure.append(download);
        results.push({ id: test.id, width, height: canvas.height, d: path.getAttribute('d'), dSHA256: hash,
          bbox: { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height },
          directPaths: svg.querySelectorAll('path').length, filterImages: svg.querySelectorAll('feImage').length,
          aOnly: sample(40, 40), bOnly: sample(200, 84), overlap: sample(120, 84), outside: sample(230, 150) });
      }
    }
    document.getElementById('report').textContent = JSON.stringify({ A, B, results }, null, 2);
  }
  run();
</script>
</html>
```

Der Code behält denselben direkten A-Pfad, auch wenn die Operatoreingaben umgekehrt werden. Beispielsweise ändert `b-in-a` das `feComposite` zu `in="operandB"` und `in2="SourceGraphic"`. Es ersetzt das gefilterte Quellelement nicht durch B. Dadurch wird die Operandenreihenfolge sichtbar, ohne As zugrunde liegende Geometrie zu ändern.

Die Pixelprüfung hier liest ein Canvas aus, das aus jedem erzeugten SVG bemalt wurde. Die herunterladbare Ausgabe bleibt das gefilterte SVG. Sie ist weder ein neuer boolescher Pfad noch eine PerfectVector-Konvertierung.

## Vergleiche Farbe und Geometrie getrennt

Wir führten genau diese Seite in einer Chrome-Umgebung bei `120 × 80` und `240 × 160` aus, speicherten alle 18 SVGs und öffneten sie im selben Browser erneut als Bilder. Die Darstellungsgrößen sind ausdrückliche Eingaben, keine Aussage über zwei physische Geräte.

Drei innere Abtastpositionen verwenden das ursprüngliche Koordinatensystem: nur A `(40,40)`, nur B `(200,84)` und Überlappung `(120,84)`. Mit undurchsichtigen Operanden wurden die folgenden Alphawerte bei beiden Größen beobachtet:

| Filtereingaben und Operator | Alpha nur A | Alpha nur B | Alpha der Überlappung |
| --------------------------- | ----------- | ----------- | --------------------- |
| A `in` B                    | 0           | 0           | 255                   |
| A `out` B                   | 255         | 0           | 0                     |
| A `xor` B                   | 255         | 255         | 0                     |
| B `in` A                    | 0           | 0           | 255                   |
| B `out` A                   | 0           | 255         | 0                     |
| B `xor` A                   | 255         | 255         | 0                     |

Die `in`-Zeilen teilen eine undurchsichtige Überlappung, unterscheiden sich aber in der Farbe. Mit A zuerst war sie blaugrün `(23,107,91,255)`, mit B zuerst ockerfarben `(212,165,58,255)`. Die Außenprobe `(230,150)` blieb durchgehend transparent. Das sind ausgewählte Innenpixel, kein vollständiger Test der Kantenabdeckung oder Kompatibilität.

Jede gefilterte Datei hatte weiterhin As exakte ursprüngliche `d`-Zeichenfolge und denselben SHA-256-Wert. Ihr lokales geometrisches `getBBox()` blieb `x=24`, `y=24`, `width=168`, `height=112`. Dieser Rahmen beschreibt den Quellpfad. Er ist nicht der Begrenzungsrahmen der sichtbaren Filterpixel. Auch der kodierte B-Pfad blieb unverändert. Ein Filterergebnis kann daher anders aussehen, während beide erstellten Konturen erhalten bleiben.

Die gespeicherten Originale haben einen direkten Pfad und kein Filterbild. Jede gefilterte Datei hat einen direkten A-Pfad sowie ein `feImage`, das Bs separates Ein-Pfad-SVG trägt. Es wird kein gewöhnliches Raster-`image`-Element eingefügt. Eine gerenderte Bildraumoperation und Vektorquelloperanden können nebeneinander existieren. Das Quellinventar allein bedeutet nicht, dass das Ergebnis bearbeitbare kombinierte Geometrie geworden ist.

## Teiltransparenz verändert die Bedeutung einer Öffnung

Der letzte Fall macht B halb undurchsichtig, während A undurchsichtig bleibt, und wendet dann A `out` B an. Die Überlappung wurde nicht leer. In beiden Größen war das beobachtete RGBA `(22,106,90,127)`: teilweise transparentes Blaugrün mit Rundung aus Rendering und Auslesung.

Bei `out` ist das Ausgabealpha das erste Alpha multipliziert mit eins minus dem zweiten Alpha. Bei `in` ist es ihr Produkt. Die [Filter-Effects-Kompositionsdefinition](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) definiert diese Operationen mit vormultiplizierten Farben und Alpha. Ein undurchsichtiges B kann As überlappende Farbe entfernen. Ein teilweise transparentes B lässt einen Teil davon stehen.

Prüfe das Ergebnis vor dem tatsächlichen Hintergrund. Ein heller Bereich auf Weiß kann durchscheinende Farbe statt eines vollständig transparenten Lochs sein. Auch geglättete Kantenpixel musst du visuell prüfen. Die Innenprobe verspricht nicht, dass jeder Grenzpixel Alpha null hat. Für eine separate Aufgabe zur Neuzuordnung der Deckkraft siehe den [SVG-Alphaschwellen-Leitfaden](https://perfectvector.com/de/blog/svg-alpha-threshold).

## Liefere einen Filtereffekt oder erstelle echte Konturen

Behalte diesen Filter, wenn der empfangende Renderer die visuelle Komposition reproduzieren soll. Bewahre die ursprünglichen Dateien A und B auf und prüfe das erneut geöffnete gefilterte SVG an seinem tatsächlichen Ziel. Unser erfolgreiches Wiederöffnen im Browser zertifiziert keine anderen Renderer oder Produktionsmaschinen.

Benötigt die Ausgabe auswählbare kombinierte Konturen oder eine schneidefertige Öffnung, führe im vorgesehenen Ablauf eine echte Pfadbearbeitung oder boolesche Operation durch und prüfe sie. Die hier veränderte sichtbare Farbe erzeugt diese Geometrie nicht. Der [Leitfaden zu clipPath und mask](https://perfectvector.com/de/blog/svg-clippath-vs-mask) behandelt einen verwandten Sichtbarkeitsunterschied. Der [Leitfaden zum Aufheben von SVG-Gruppierungen](https://perfectvector.com/de/blog/svg-wont-ungroup) hilft, wenn die angezeigte Grafik nicht das erwartete bearbeitbare Objekt ist.

Liegt dein Clipart nur als Pixel vor und brauchst du bearbeitbare Quellformen, [bereite mit PerfectVector ein Clipart-SVG vor](https://perfectvector.com/de/clipart-to-svg), prüfe Konturen und Öffnungen und behalte die Masterdatei. Wende den vorgesehenen Filter oder die Pfadoperation separat an und prüfe sie. Vektorisierung macht aus der visuellen Überlappung dieses Filters keine geprüfte Fertigungskontur.

## Häufige Fragen

**Löscht feComposite out die überlappende Pfadgeometrie?**
Nein. Es ändert die gerenderte Farbe anhand des Alphas der zweiten Eingabe. In unseren gefilterten Dateien blieben ursprüngliche A-Pfaddaten und lokale Geometriegrenzen unverändert, selbst dort, wo überlappende Farbe transparent wurde.

**Warum verändert der Tausch von in und in2 das Ergebnis?**
Sie bezeichnen erste und zweite Eingabe. In erhält die Farbe der ersten Eingabe innerhalb der Deckkraft der zweiten. Out erhält die erste außerhalb davon. Unsere umgekehrten in-Fälle teilen die undurchsichtige Überlappung, zeigen aber andere Farben. Umgekehrte out-Fälle behalten andere Bereiche.

**Macht xor eine Überlappung immer vollständig leer?**
Die vollständig undurchsichtige innere Überlappung war in unseren xor-Fällen leer. Teilalpha und geglättete Kanten benötigen eine eigene Prüfung. Mengendiagramme undurchsichtiger Formen beschreiben nicht jeden durchscheinenden Pixel.

**Kann ich die gefilterte Öffnung direkt als bearbeitbaren Schnittpfad weitergeben?**
Ein sichtbares Filterergebnis ist keine neu erstellte boolesche Geometrie. Behalte die ursprünglichen Formen, erstelle und prüfe die benötigten Konturen im vorgesehenen Pfadablauf und prüfe empfangende Anwendung und Produktionsanforderungen separat.

## Quellen

1. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) – Rollen der Bildraumeingaben, Operatorbeschreibungen und standardmäßiger Filterfarbraum.
2. [MDN: operator](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) – Kompositionsoperatorwerte und separater Morphologiekontext.
3. [MDN: filterUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) – Koordinatensystem des Filterbereichs.
4. [MDN: feImage](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) – Bildeingabe in die Filterpipeline.
5. [W3C: Filter-Effects-Komposition](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) – Kompositionsdefinitionen für vormultiplizierte Farbe und Alpha.

***

Du beginnst mit eigenem Rasterclipart? [Erstelle eine bearbeitbare SVG-Masterdatei](https://perfectvector.com/de/clipart-to-svg), prüfe Konturen und Öffnungen und bewahre sie auf, während du die gewählte visuelle Komposition oder das separat erstellte Pfadergebnis am Ziel prüfst.

## Explore

- [Read the HTML article](https://perfectvector.com/de/blog/svg-composite-artwork)
- [SVG dauerhaft zuschneiden, ohne versteckte Pfade](https://perfectvector.com/de/blog/permanent-crop-svg.md)
- [Inkscape: Objekt in Pfad oder Kontur in Pfad?](https://perfectvector.com/de/blog/inkscape-stroke-vs-object-to-path.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)