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

# SVG feComposite: in, out ve xor Çizimlerini Karşılaştırın

> in, out ve xor ile SVG filtre girdilerini karşılaştırın, işlenen sırasını ve kısmi alfayı sınayın, görsel açıklık düzenlenebilir geometri olmadığında kaynak yolları koruyun.

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

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

SVG `feComposite`, işlenmiş iki girdiyi birleştirir. Tam opak girdilerde `in` ilk girdinin boyamasını örtüşmede, `out` örtüşme dışında tutar; `xor` iki girdiyi ortak örtüşme dışında birleştirir. Bu işlemler boyamayı işleme sırasında değiştirir. Kaynak yollarını düzenlenebilir kesişim veya farka yeniden yazmaz.

Örtüşme açıklık gibi göründüğünde ancak teslim gerçek konturlar gerektirdiğinde bu ayrım önemlidir. Aşağıdaki örnek iki özgün asimetrik şekli karşılaştırır, girdileri ters çevirir ve kısmi saydamlığı kontrol eder. Kaynak çizimi filtreli sonucun yanında koruyun.

## İşleci seçmeden önce iki girdiyi adlandırın

[MDN feComposite başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite), görüntü uzayında piksel bazlı işlemi açıklar. `in` ilk girdiyi, `in2` ikinciyi adlandırır. Filtre zinciri değişikliği işlenenleri sessizce değiştirmesin diye ara sonuçlara açık adlar verin.

Opak iç kısımlarda bu üç işlem kolay karşılaştırılır:

| İşlem | İlk girdi A, ikinci girdi B               | Girdileri ters çevirmenin değiştirdiği     |
| ----- | ----------------------------------------- | ------------------------------------------ |
| `in`  | Örtüşmedeki A boyaması                    | Örtüşme bunun yerine B boyamasını taşır    |
| `out` | B dışındaki A boyaması                    | A dışındaki B boyaması farklı bir bölgedir |
| `xor` | Ortak opak örtüşmenin dışındaki iki girdi | Aynı örtüşmeyen bölgeler kalır             |

Aynı `operator` özniteliği farklı değerlerle başka filtre ilkellerinde de bulunur. Bileşim bağlamını açık tutun; [MDN operator başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) bunu morfoloji işlemlerinden ayırır.

**Görünür boyamayı değiştirin**

![Örtüşen renkli çizim ile örtüşmesi boyanmamış bileşimin kavramsal karşılaştırması](https://perfectvector.com/blog/svg-composite-artwork/overlap-and-paint.webp)

*İllüstrasyon: örtüşen girdiler bir bölgeyi boyanmamış bırakabilir. Dekoratif siluetler ve oklar kavramsaldır; aşağıdaki tam işleçler, alfa örnekleri ve değişmeyen yollar çalıştırılmış özgün tarayıcı testinden gelir.*

## İkinci çizimi açıkça hizalayın

İlk işlenenimiz A koyu turkuaz basamaklı bloktur. B, eğik aşı boyası renginde uçurtmadır. İkisi de aynı `0 0 240 160` viewBox kullanır. B, A'nın yerel sınırlama kutusunu aşar; dolayısıyla A sınırlarını filtre bölgesi kabul etmek zayıf başlangıç varsayımı olurdu.

Filtre açık `x=0`, `y=0`, `width=240`, `height=160` bölgesi için `filterUnits="userSpaceOnUse"` kullanır. [MDN filterUnits başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) koordinat seçimini açıklar. Ayrıca `primitiveUnits="userSpaceOnUse"` ayarlar, ikinci girdiye aynı tam çerçeve koordinatlarını veririz.

B, `operandB` sonuç adıyla `feImage` üzerinden verilen bağımsız SVG veri URL'sidir. Bu, B'yi filtreye görsel girdisi olarak getirir; B yolunu filtreli çizimin yeni doğrudan alt öğesi olarak eklemez. [MDN feImage başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage), görsel girdisi davranışını açıklar.

Filtre açıkça `sRGB` seçer. feComposite başvurusunun belgelediği gibi bu ilkellerin varsayılanı `linearRGB`'dir. Ne bu varsayılan ne de işleç adı yol düzenleme işlemi sağlar.

## Eksiksiz özgün karşılaştırmayı çalıştırın

Bunu `starter.html` olarak kaydedip klasörü yerel HTTP üzerinden, örneğin `python3 -m http.server 8766 --bind 127.0.0.1` ile sunun. `http://127.0.0.1:8766/starter.html` açın; gerekirse başka boş bağlantı noktası kullanın.

Sayfa iki açık boyutun her birinde iki özgün çizim ve yedi filtreli durum oluşturur. Aynı belgedeki birden fazla satır içi SVG benzersiz başvurular taşısın diye her filtre kimliği durumunu ve genişliğini içerir. Her SVG Kaydet bağlantısı bağımsız filtreyi ve kodlanmış B girdisini korur.

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

Kod, işleç girdileri ters çevrildiğinde bile aynı doğrudan A yolunu korur. Örneğin `b-in-a`, `feComposite` girdilerini `in="operandB"` ve `in2="SourceGraphic"` yapar; filtreli kaynak öğesini B ile değiştirmez. Böylece alttaki A geometrisini değiştirmeden işlenen sırası görünür olur.

Buradaki piksel incelemesi, üretilen her SVG'den boyanmış canvas'ı okur. İndirilebilir teslim çıktısı hâlâ filtreli SVG'dir. Yeni Boole yolu veya PerfectVector dönüşümü değildir.

## Boyamayı ve geometriyi ayrı karşılaştırın

Bu sayfayı tek Chrome ortamında `120 × 80` ve `240 × 160` boyutlarında aynen çalıştırdık, 18 SVG'nin tamamını kaydedip aynı tarayıcıda görsel olarak yeniden açtık. Gösterilen boyutlar iki fiziksel cihaz iddiası değil, açık girdilerdir.

Üç iç örnek konumu özgün koordinat sistemini kullanır: yalnız A `(40,40)`, yalnız B `(200,84)` ve örtüşme `(120,84)`. Opak işlenenlerle iki boyutta da şu alfa değerleri gözlendi:

| Filtre girdileri ve işleç | Yalnız A alfası | Yalnız B alfası | Örtüşme alfası |
| ------------------------- | --------------- | --------------- | -------------- |
| 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              |

`in` satırları opak örtüşmeyi paylaşır, ancak renkleri farklıdır: A ilk olduğunda koyu turkuaz `(23,107,91,255)`, B ilk olduğunda aşı boyası `(212,165,58,255)` oldu. Dış örnek `(230,150)` boyunca saydam kaldı. Bunlar seçilmiş iç piksellerdir; tam kenar kapsama veya uyumluluk testi değildir.

Her filtreli dosya hâlâ A'nın tam özgün `d` dizgesini ve eşleşen SHA-256'yı taşıyordu. Yerel geometrik `getBBox()` değeri `x=24`, `y=24`, `width=168`, `height=112` kaldı. Bu kutu kaynak yolu tanımlar; görünür filtre piksel sınırlama kutusu değildir. Kodlanmış B yolu da değişmedi. Dolayısıyla iki özgün kontur bozulmadan filtre sonucu farklı görünebilir.

Kaydedilen özgün dosyalarda tek doğrudan yol vardır, filtre görseli yoktur. Her filtreli dosyada tek doğrudan A yolu ve B'nin ayrı tek yollu SVG'sini taşıyan bir `feImage` vardır. Normal raster `image` öğesi eklenmez. İşlenmiş görüntü uzayı işlemi ile vektör kaynak işlenenleri birlikte bulunabilir; yalnızca kaynak dökümü, sonucun düzenlenebilir birleşik geometriye dönüştüğü anlamına gelmez.

## Kısmi opaklık açıklığın anlamını değiştirir

Son durum B'yi yarı opak yapıp A'yı opak bırakır, ardından A `out` B uygular. Örtüşme boşalmadı. İki boyutta da gözlenen RGBA, `(22,106,90,127)` idi: işleme/geri okuma hattındaki yuvarlamayla kısmen saydam koyu turkuaz.

`out` için çıktı alfası, ilk alfanın bir eksi ikinci alfayla çarpımıdır. `in` için iki alfanın çarpımıdır. [Filter Effects bileşim tanımı](https://www.w3.org/TR/filter-effects-1/#feCompositeElement), işlemleri önceden çarpılmış renk ve alfa kullanarak tanımlar. Opak B, A'nın örtüşen boyamasını kaldırabilir; kısmen saydam B bir bölümünü bırakır.

Sonucu gerçek arka planda inceleyin. Beyaz üzerindeki soluk bölge tam saydam delik değil, yarı saydam boya olabilir. Kenar yumuşatılmış pikseller de görsel kontrol gerektirir; iç örnek her sınır pikselinin sıfır alfa taşıdığının vaadi değildir. Ayrı opaklık yeniden eşleme işi için [SVG alfa eşiği kılavuzuna](https://perfectvector.com/tr/blog/svg-alpha-threshold) bakın.

## Filtre efektini teslim edin veya gerçek konturlar oluşturun

Alıcı işleyici görsel bileşimi yeniden üretmeliyse bu filtreyi koruyun. Özgün A ve B dosyalarını saklayın ve yeniden açılmış filtreli SVG'yi gerçek hedefinde inceleyin. Tarayıcıdaki başarılı yeniden açmamız başka işleyicileri veya üretim makinelerini onaylamaz.

Teslim, seçilebilir birleşik konturlar veya kesime hazır açıklık gerektiriyorsa amaçlanan iş akışında gerçek yol düzenlemesi veya Boole işlemi yapıp inceleyin. Burada değişen görünür boyama bu geometriyi oluşturmaz. [clipPath ve mask kılavuzu](https://perfectvector.com/tr/blog/svg-clippath-vs-mask), ilgili görünürlük ayrımını yapar; [SVG grup çözme kılavuzu](https://perfectvector.com/tr/blog/svg-wont-ungroup), gösterilen çizim beklediğiniz düzenlenebilir nesne olmadığında yardımcı olur.

Küçük resminiz yalnızca piksellerden oluşuyorsa ve düzenlenebilir kaynak şekilleri gerekiyorsa [PerfectVector ile küçük resim SVG'si hazırlayın](https://perfectvector.com/tr/clipart-to-svg), konturları ve açıklıkları inceleyin, ana dosyayı koruyun. Amaçlanan filtreyi veya yol işlemini ayrı uygulayıp doğrulayın. Vektörleştirme, bu filtrenin görsel örtüşmesini doğrulanmış üretim konturuna dönüştürmez.

## Sık sorulan sorular

**feComposite out örtüşen yol geometrisini siler mi?**
Hayır. İkinci girdinin alfasıyla işlenen boyamayı değiştirir. Filtreli dosyalarımızda örtüşen boya saydam olduğunda bile özgün A yol verileri ve yerel geometrik sınırlar değişmedi.

**in ve in2 değerlerini değiştirmek sonucu neden değiştiriyor?**
İlk ve ikinci girdiyi tanımlarlar. In, ilk girdinin boyamasını ikincinin opaklığında tutar; out ilkini onun dışında tutar. Ters in durumlarımız opak örtüşmeyi paylaşır ancak farklı renk gösterir; ters out durumları farklı bölgeleri korur.

**xor her zaman tamamen boş örtüşme yapar mı?**
Tam opak iç örtüşme xor durumlarımızda boştu. Kısmi alfa ve kenar yumuşatılmış kenarlar ayrı inceleme gerektirir; opak şekil küme şemaları her yarı saydam pikseli açıklamaz.

**Filtreli açıklığı doğrudan düzenlenebilir kesim yolu olarak gönderebilir miyim?**
Görsel filtre sonucu yeni oluşturulmuş Boole geometrisi değildir. Özgün şekilleri koruyun, gereken konturları amaçlanan yol iş akışında oluşturup inceleyin ve alıcı uygulamayı ve üretim gereksinimlerini ayrı doğrulayın.

## Kaynaklar

1. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Görüntü uzayı girdi rolleri, işleç açıklamaları ve varsayılan filtre renk uzayı.
2. [MDN: operator](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) — Bileşim işleç değerleri ve ayrı morfoloji bağlamı.
3. [MDN: filterUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) — Filtre bölgesi koordinat sistemi.
4. [MDN: feImage](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) — Filtre hattına görsel girdisi.
5. [W3C: Filter Effects bileşimi](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) — Önceden çarpılmış renk ve alfa bileşim tanımları.

***

Kendi raster küçük resminizden mi başlıyorsunuz? [Düzenlenebilir SVG ana dosyası oluşturun](https://perfectvector.com/tr/clipart-to-svg), konturlarını ve açıklıklarını inceleyin, ardından seçilen görsel bileşimi veya ayrı oluşturulmuş yol sonucunu hedefte kontrol ederken ana dosyayı koruyun.

## Explore

- [Read the HTML article](https://perfectvector.com/tr/blog/svg-composite-artwork)
- [SVG'yi gizli yollar bırakmadan kalıcı kırpın](https://perfectvector.com/tr/blog/permanent-crop-svg.md)
- [Inkscape: Object to Path ve Stroke to Path Farkı](https://perfectvector.com/tr/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)