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

# SVG feComposite: Bandingkan Gambar in, out, dan xor

> Bandingkan masukan filter SVG dengan in, out, dan xor, uji urutan operand serta alfa parsial, dan simpan path sumber saat bukaan visual bukan geometri yang bisa diedit.

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

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

SVG `feComposite` menggabungkan dua masukan yang dirender. Untuk masukan sepenuhnya buram, `in` mempertahankan pewarnaan masukan pertama di area tumpang tindih, `out` mempertahankannya di luar tumpang tindih, dan `xor` menggabungkan kedua masukan di luar tumpang tindih bersama. Operasi ini mengubah pewarnaan saat rendering. Operasi tidak menulis ulang path sumber menjadi irisan atau selisih yang bisa diedit.

Perbedaan itu penting saat tumpang tindih tampak seperti bukaan tetapi hasil penyerahan membutuhkan kontur sungguhan. Contoh berikut membandingkan dua bentuk asimetris asli, membalik masukan, dan memeriksa transparansi parsial. Simpan gambar sumber bersama hasil berfilter.

## Beri nama kedua masukan sebelum memilih operator

[Referensi feComposite MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) menjelaskan operasi per piksel dalam ruang gambar. `in` menamai masukan pertama; `in2` menamai yang kedua. Beri hasil antara nama eksplisit agar perubahan rangkaian filter tidak diam-diam mengubah operand.

Untuk bagian dalam yang buram, ketiga operasi mudah dibandingkan:

| Operasi | Masukan pertama A, kedua B                         | Perubahan saat masukan dibalik                  |
| ------- | -------------------------------------------------- | ----------------------------------------------- |
| `in`    | Pewarnaan A di area tumpang tindih                 | Area tumpang tindih membawa pewarnaan B         |
| `out`   | Pewarnaan A di luar B                              | Pewarnaan B di luar A merupakan wilayah berbeda |
| `xor`   | Kedua masukan di luar tumpang tindih buram bersama | Wilayah yang tidak tumpang tindih tetap sama    |

Atribut `operator` yang sama juga muncul pada primitive filter lain dengan nilai berbeda. Perjelas konteks komposit; [referensi operator MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) membedakannya dari operasi morfologi.

**Ubah pewarnaan yang terlihat**

![Perbandingan konseptual gambar berwarna yang bertumpuk dan komposit dengan area tumpang tindih tidak dicat](https://perfectvector.com/blog/svg-composite-artwork/overlap-and-paint.webp)

*Ilustrasi: masukan bertumpuk dapat membiarkan suatu wilayah tidak dicat. Siluet dekoratif dan panah ini bersifat konseptual; operator, sampel alfa, dan path yang tidak berubah di bawah berasal dari contoh uji peramban asli yang dijalankan.*

## Sejajarkan gambar kedua secara eksplisit

Operand pertama A adalah blok bertangga hijau kebiruan. B adalah layang-layang miring oker. Keduanya memakai viewBox `0 0 240 160` yang sama. B melampaui kotak pembatas lokal A, sehingga memakai batas A sebagai wilayah filter merupakan asumsi awal yang kurang tepat.

Filter memakai `filterUnits="userSpaceOnUse"` untuk wilayah eksplisit `x=0`, `y=0`, `width=240`, `height=160`. [Referensi filterUnits MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) menjelaskan pilihan koordinat tersebut. Kami juga menetapkan `primitiveUnits="userSpaceOnUse"` dan memberi masukan kedua koordinat bingkai penuh yang sama.

B adalah data URL SVG mandiri yang diteruskan melalui `feImage`, dengan nama hasil `operandB`. Ini membawa B ke filter sebagai masukan gambar; bukan memasukkan path B sebagai anak langsung baru pada gambar yang difilter. [Referensi feImage MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) menjelaskan perilaku masukan gambarnya.

Filter secara eksplisit memilih `sRGB`. Nilai bawaan primitive ini adalah `linearRGB`, seperti dijelaskan referensi feComposite. Nilai bawaan maupun nama operator itu tidak menyediakan operasi pengeditan path.

## Jalankan perbandingan asli yang lengkap

Simpan sebagai `starter.html` dan sajikan folder melalui HTTP lokal, misalnya dengan `python3 -m http.server 8766 --bind 127.0.0.1`. Buka `http://127.0.0.1:8766/starter.html`; gunakan port kosong lain jika perlu.

Halaman membuat dua gambar asli ditambah tujuh kasus berfilter pada masing-masing dari dua ukuran eksplisit. Setiap ID filter menyertakan kasus dan lebarnya agar beberapa SVG inline dalam dokumen yang sama memiliki referensi unik. Setiap tautan Simpan SVG mempertahankan filter mandiri beserta masukan B yang dikodekan.

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

Kode mempertahankan path A langsung yang sama meskipun masukan operator dibalik. Misalnya, `b-in-a` mengubah `feComposite` menjadi `in="operandB"` dan `in2="SourceGraphic"`; bukan mengganti elemen sumber yang difilter dengan B. Ini memperlihatkan urutan operand tanpa mengubah geometri A dasarnya.

Pemeriksaan piksel di sini membaca canvas yang dilukis dari setiap SVG yang dihasilkan. Hasil yang dapat diunduh tetap SVG berfilter. Hasil itu bukan path Boolean baru atau konversi PerfectVector.

## Bandingkan pewarnaan dan geometri secara terpisah

Kami menjalankan halaman ini persis dalam satu lingkungan Chrome pada `120 × 80` dan `240 × 160`, menyimpan seluruh 18 SVG, dan membukanya kembali sebagai gambar dalam peramban yang sama. Ukuran tampilan merupakan masukan eksplisit, bukan klaim tentang dua perangkat fisik.

Tiga posisi sampel bagian dalam memakai sistem koordinat asli: hanya A `(40,40)`, hanya B `(200,84)`, dan tumpang tindih `(120,84)`. Nilai alfa berikut diamati pada kedua ukuran dengan operand buram:

| Masukan filter dan operator | Alfa hanya A | Alfa hanya B | Alfa tumpang tindih |
| --------------------------- | ------------ | ------------ | ------------------- |
| 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                   |

Baris `in` berbagi tumpang tindih buram tetapi warnanya berbeda: A lebih dulu berwarna hijau kebiruan `(23,107,91,255)`; B lebih dulu oker `(212,165,58,255)`. Sampel luar `(230,150)` tetap transparan sepanjang pengujian. Ini piksel bagian dalam terpilih, bukan pengujian cakupan tepi atau kompatibilitas lengkap.

Setiap berkas berfilter masih memiliki string `d` asli A secara persis dan SHA-256 yang cocok. `getBBox()` geometris lokalnya tetap `x=24`, `y=24`, `width=168`, `height=112`. Kotak itu mendeskripsikan path sumber; bukan kotak pembatas piksel filter yang terlihat. Path B yang dikodekan juga tetap sama. Jadi hasil filter bisa terlihat berbeda sementara kedua kontur yang dibuat tetap utuh.

Gambar asli tersimpan memiliki satu path langsung tanpa gambar filter. Setiap berkas berfilter memiliki satu path A langsung ditambah satu `feImage` yang membawa SVG satu-path B terpisah. Tidak ada elemen `image` raster biasa yang ditambahkan. Operasi ruang gambar yang dirender dan operand sumber vektor dapat berdampingan; inventaris sumber saja tidak berarti hasilnya menjadi geometri gabungan yang bisa diedit.

## Opasitas parsial mengubah arti bukaan

Kasus terakhir membuat B setengah buram sambil menjaga A buram, lalu menerapkan A `out` B. Area tumpang tindih tidak menjadi kosong. Pada kedua ukuran, RGBA yang diamati adalah `(22,106,90,127)`: hijau kebiruan sebagian transparan, dengan pembulatan dari rangkaian rendering/pembacaan.

Untuk `out`, alfa keluaran adalah alfa pertama dikalikan satu dikurangi alfa kedua. Untuk `in`, nilainya merupakan hasil kali keduanya. [Definisi komposit Filter Effects](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) mendefinisikan operasi ini dengan warna dan alfa yang telah dikalikan sebelumnya. B buram dapat menghilangkan pewarnaan A yang bertumpuk; B sebagian transparan meninggalkan sebagian pewarnaan tersebut.

Periksa hasil pada latar sebenarnya. Wilayah pucat di atas putih bisa merupakan pewarnaan tembus pandang, bukan lubang sepenuhnya transparan. Piksel tepi ber-antialias juga perlu diperiksa secara visual; sampel bagian dalam bukan janji bahwa setiap piksel batas memiliki alfa nol. Untuk pekerjaan pemetaan ulang opasitas terpisah, lihat [panduan ambang alfa SVG](https://perfectvector.com/id/blog/svg-alpha-threshold).

## Serahkan efek filter atau buat kontur sungguhan

Pertahankan filter ini jika renderer penerima harus mereproduksi komposit visual. Simpan berkas A dan B asli serta periksa SVG berfilter yang dibuka kembali di tujuan sebenarnya. Keberhasilan pembukaan kembali di peramban kami tidak menjamin renderer atau mesin produksi lain.

Jika penyerahan membutuhkan kontur gabungan yang bisa dipilih atau bukaan siap potong, lakukan dan periksa pengeditan path atau operasi Boolean sungguhan dalam alur yang dimaksud. Pewarnaan terlihat yang berubah di sini tidak membuat geometri itu. [Panduan clipPath versus mask](https://perfectvector.com/id/blog/svg-clippath-vs-mask) menjelaskan perbedaan visibilitas terkait; [panduan membongkar grup SVG](https://perfectvector.com/id/blog/svg-wont-ungroup) membantu saat gambar yang ditampilkan bukan objek yang bisa diedit seperti yang Anda harapkan.

Jika clipart hanya tersedia sebagai piksel dan Anda membutuhkan bentuk sumber yang bisa diedit, [siapkan SVG clipart dengan PerfectVector](https://perfectvector.com/id/clipart-to-svg), periksa kontur dan bukaannya, lalu simpan master. Terapkan serta verifikasi filter atau operasi path yang dimaksud secara terpisah. Vektorisasi tidak menjadikan tumpang tindih visual filter ini kontur manufaktur yang terverifikasi.

## Pertanyaan umum

**Apakah feComposite out menghapus geometri path yang bertumpuk?**
Tidak. Operasi mengubah pewarnaan yang dirender memakai alfa masukan kedua. Dalam berkas berfilter kami, data path A asli dan batas geometri lokal tetap sama meskipun pewarnaan bertumpuk menjadi transparan.

**Mengapa menukar in dan in2 mengubah hasil?**
Keduanya mengidentifikasi masukan pertama dan kedua. In mempertahankan pewarnaan masukan pertama dalam opasitas masukan kedua; out mempertahankan yang pertama di luarnya. Kasus in terbalik kami berbagi area tumpang tindih buram tetapi memperlihatkan warna berbeda, sedangkan kasus out terbalik mempertahankan wilayah berbeda.

**Apakah xor selalu membuat tumpang tindih sepenuhnya kosong?**
Bagian dalam tumpang tindih yang sepenuhnya buram kosong pada kasus xor kami. Alfa parsial dan tepi ber-antialias membutuhkan pemeriksaan sendiri; diagram himpunan bentuk buram tidak menggambarkan setiap piksel tembus pandang.

**Bisakah saya langsung mengirim bukaan berfilter sebagai path potong yang bisa diedit?**
Hasil filter visual bukan geometri Boolean yang baru dibuat. Simpan bentuk asli, buat dan periksa kontur yang diperlukan dalam alur path yang dimaksud, serta verifikasi aplikasi penerima dan persyaratan produksi secara terpisah.

## Sumber

1. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Peran masukan ruang gambar, deskripsi operator, dan ruang warna filter bawaan.
2. [MDN: operator](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) — Nilai operator komposit dan konteks morfologi terpisah.
3. [MDN: filterUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) — Sistem koordinat wilayah filter.
4. [MDN: feImage](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) — Masukan gambar ke rangkaian filter.
5. [W3C: Komposit Filter Effects](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) — Definisi komposit warna dan alfa yang telah dikalikan sebelumnya.

***

Memulai dari clipart raster Anda sendiri? [Buat master SVG yang bisa diedit](https://perfectvector.com/id/clipart-to-svg), periksa kontur dan bukaannya, lalu simpan sambil memeriksa komposit visual pilihan atau hasil path yang dibuat terpisah di tujuan.

## Explore

- [Read the HTML article](https://perfectvector.com/id/blog/svg-composite-artwork)
- [Potong SVG Permanen Tanpa Jalur Tersembunyi](https://perfectvector.com/id/blog/permanent-crop-svg.md)
- [Inkscape Object to Path vs Stroke to Path: Apa Bedanya?](https://perfectvector.com/id/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)