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

# SVG feComposite: in, out और xor कलाकृति तुलना करें

> in, out और xor से SVG फ़िल्टर इनपुट तुलना करें, operand क्रम और आंशिक अल्फ़ा जाँचें और दृश्य खुला भाग संपादन योग्य ज्यामिति न हो तो स्रोत पाथ बचाएँ।

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

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

SVG `feComposite` दो रेंडर इनपुट मिलाता है। पूरी तरह अपारदर्शी इनपुट में `in` पहले इनपुट को ओवरलैप में, `out` उसे ओवरलैप के बाहर और `xor` दोनों को साझा ओवरलैप के बाहर रखता है। ऑपरेशन रेंडर के समय पेंट बदलते हैं। स्रोत पाथ को संपादन योग्य intersection या difference में दोबारा नहीं लिखते।

ओवरलैप खुला भाग दिखे लेकिन डिलीवरी में असली रूपरेखा चाहिए तो यह अंतर महत्वपूर्ण है। नीचे दो मूल असममित आकृतियाँ तुलना की हैं, इनपुट उलटे हैं और आंशिक पारदर्शिता जाँची है। स्रोत कलाकृति फ़िल्टर परिणाम के साथ रखें।

## ऑपरेटर चुनने से पहले दोनों इनपुट नाम दें

[MDN feComposite संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) image space में पिक्सेल-दर-पिक्सेल ऑपरेशन बताता है। `in` पहला और `in2` दूसरा इनपुट नाम देता है। मध्यवर्ती परिणाम स्पष्ट नाम दें ताकि फ़िल्टर श्रृंखला बदलने से operand चुपचाप न बदलें।

अपारदर्शी भीतरी भाग में तीन ऑपरेशन आसानी से तुलना होते हैं:

| ऑपरेशन | पहला इनपुट A, दूसरा B                     | इनपुट उलटने पर क्या बदलता है       |
| ------ | ----------------------------------------- | ---------------------------------- |
| `in`   | ओवरलैप में A का पेंट                      | ओवरलैप में अब B का पेंट            |
| `out`  | B के बाहर A का पेंट                       | A के बाहर B का पेंट अलग क्षेत्र है |
| `xor`  | साझा अपारदर्शी ओवरलैप के बाहर दोनों इनपुट | वही बिना-ओवरलैप क्षेत्र रहते हैं   |

यही `operator` गुण दूसरे फ़िल्टर प्रिमिटिव में अलग मानों के साथ है। कंपोज़िटिंग संदर्भ स्पष्ट रखें; [MDN operator संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) इसे morphology ऑपरेशन से अलग करता है।

**दिखता पेंट बदलें**

![ओवरलैप रंगीन कलाकृति और बिना पेंट वाले ओवरलैप की कंपोज़िट तुलना का वैचारिक चित्रण](https://perfectvector.com/blog/svg-composite-artwork/overlap-and-paint.webp)

*चित्रण: ओवरलैप इनपुट क्षेत्र बिना पेंट छोड़ सकते हैं। सजावटी आकृतियाँ और तीर वैचारिक हैं; नीचे सटीक ऑपरेटर, अल्फ़ा नमूने और अपरिवर्तित पाथ मूल चलाए ब्राउज़र परीक्षण से हैं।*

## दूसरी कलाकृति स्पष्ट संरेखित करें

हमारा पहला operand A टील रंग का सीढ़ीनुमा खंड है। B गेरुआ तिरछी पतंग है। दोनों का viewBox `0 0 240 160` है। B, A के स्थानीय बाउंडिंग बॉक्स से बाहर जाता है, इसलिए A की सीमा को फ़िल्टर क्षेत्र मानना खराब शुरुआती धारणा होगी।

फ़िल्टर स्पष्ट `x=0`, `y=0`, `width=240`, `height=160` क्षेत्र के लिए `filterUnits="userSpaceOnUse"` लेता है। [MDN filterUnits संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) निर्देशांक चुनाव समझाता है। हम `primitiveUnits="userSpaceOnUse"` भी सेट करके दूसरे इनपुट को वही पूरे-फ़्रेम निर्देशांक देते हैं।

B स्वयंपूर्ण SVG data URL है जिसे `feImage` से, `operandB` परिणाम नाम सहित, दिया है। इससे वह फ़िल्टर में image इनपुट आता है; उसका पाथ फ़िल्टर कलाकृति का नया सीधा child नहीं बनता। [MDN feImage संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) image इनपुट व्यवहार बताता है।

फ़िल्टर स्पष्ट `sRGB` चुनता है। इन प्रिमिटिव का सामान्य मान `linearRGB` है, जैसा feComposite संदर्भ बताता है। वह सामान्य मान या ऑपरेटर नाम पाथ संपादन ऑपरेशन नहीं देता।

## पूरी मूल तुलना चलाएँ

इसे `starter.html` सहेजकर फ़ोल्डर स्थानीय HTTP से सर्व करें, जैसे `python3 -m http.server 8766 --bind 127.0.0.1`। `http://127.0.0.1:8766/starter.html` खोलें; ज़रूरत पर दूसरा खाली पोर्ट लें।

पेज दो मूल और सात फ़िल्टर मामले दो स्पष्ट आकारों पर बनाता है। हर फ़िल्टर ID में मामला और चौड़ाई हैं ताकि एक दस्तावेज़ के कई inline SVG के संदर्भ अलग हों। हर Save SVG लिंक स्वयंपूर्ण फ़िल्टर और एन्कोड B इनपुट रखता है।

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

ऑपरेटर इनपुट उलटने पर भी कोड वही सीधा A पाथ रखता है। जैसे `b-in-a`, `feComposite` को `in="operandB"` और `in2="SourceGraphic"` करता है; फ़िल्टर स्रोत एलिमेंट B से नहीं बदलता। इससे मूल A ज्यामिति बदले बिना operand क्रम दिखता है।

यहाँ पिक्सेल निरीक्षण हर बनाए SVG से पेंट canvas पढ़ता है। डाउनलोड योग्य परिणाम अभी फ़िल्टर SVG है। नया Boolean पाथ या PerfectVector रूपांतरण नहीं।

## पेंट और ज्यामिति अलग तुलना करें

हमने ठीक यही पेज एक Chrome परिवेश में `120 × 80` और `240 × 160` पर चलाया, सभी 18 SVG सहेजे और उसी ब्राउज़र में चित्र की तरह फिर खोले। दिखे आकार स्पष्ट इनपुट हैं, दो भौतिक उपकरणों का दावा नहीं।

तीन भीतरी नमूने मूल निर्देशांक तंत्र लेते हैं: केवल A `(40,40)`, केवल B `(200,84)` और ओवरलैप `(120,84)`। अपारदर्शी operand के साथ दोनों आकारों पर ये अल्फ़ा मिले:

| फ़िल्टर इनपुट और ऑपरेटर | केवल A अल्फ़ा | केवल B अल्फ़ा | ओवरलैप अल्फ़ा |
| ----------------------- | ------------- | ------------- | ------------- |
| 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` पंक्तियों का अपारदर्शी ओवरलैप समान, रंग अलग है: A-पहले टील `(23,107,91,255)` और B-पहले गेरुआ `(212,165,58,255)`। बाहर का नमूना `(230,150)` हर समय पारदर्शी रहा। ये चुने भीतरी पिक्सेल हैं, पूरा किनारा-कवरेज या संगतता परीक्षण नहीं।

हर फ़िल्टर फ़ाइल में A की बिल्कुल मूल `d` स्ट्रिंग और मेल खाता SHA-256 रहा। स्थानीय ज्यामितीय `getBBox()`, `x=24`, `y=24`, `width=168`, `height=112` रहा। बॉक्स स्रोत पाथ बताता है, दिखे फ़िल्टर-पिक्सेल का बाउंडिंग बॉक्स नहीं। एन्कोड B पाथ भी नहीं बदला। इसलिए दोनों बनाई रूपरेखाएँ सुरक्षित रहते हुए फ़िल्टर परिणाम अलग दिख सकता है।

सहेजे मूल में एक सीधा पाथ और फ़िल्टर image नहीं है। हर फ़िल्टर फ़ाइल में एक सीधा A पाथ और B का अलग एक-पाथ SVG रखने वाला एक `feImage` है। साधारण रास्टर `image` एलिमेंट नहीं जुड़ता। रेंडर image-space ऑपरेशन और वेक्टर स्रोत operand साथ हो सकते हैं; केवल स्रोत गिनती का मतलब परिणाम संपादन योग्य संयुक्त ज्यामिति बनना नहीं।

## आंशिक अपारदर्शिता खुले भाग का मतलब बदलती है

आख़िरी मामले में A अपारदर्शी रहता है, B आधा अपारदर्शी होता है, फिर A `out` B लगता है। ओवरलैप खाली नहीं हुआ। दोनों आकारों पर RGBA `(22,106,90,127)` था: आंशिक पारदर्शी टील, रेंडर/रीडिंग प्रक्रिया की राउंडिंग सहित।

`out` में आउटपुट अल्फ़ा पहले अल्फ़ा को एक घटा दूसरा अल्फ़ा से गुणा करने पर है। `in` में दोनों का गुणनफल। [Filter Effects कंपोज़िटिंग परिभाषा](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) premultiplied रंग और अल्फ़ा से ऑपरेशन बताती है। अपारदर्शी B, A का ओवरलैप पेंट हटा सकता है; आंशिक पारदर्शी B कुछ छोड़ता है।

वास्तविक बैकड्रॉप पर परिणाम जाँचें। सफ़ेद पर हल्का क्षेत्र पूरी तरह पारदर्शी छेद के बजाय पारभासी पेंट हो सकता है। एंटीएलियास किनारे भी देखें; भीतरी नमूना हर सीमा पिक्सेल के अल्फ़ा शून्य होने का वादा नहीं। अलग opacity remapping काम के लिए [SVG alpha-threshold गाइड](https://perfectvector.com/hi/blog/svg-alpha-threshold) देखें।

## फ़िल्टर प्रभाव दें या वास्तविक रूपरेखाएँ बनाएँ

गंतव्य रेंडरर को दृश्य कंपोज़िट दोहराना हो तो फ़िल्टर रखें। मूल A और B सुरक्षित रखें और वास्तविक गंतव्य में फिर खोला फ़िल्टर SVG जाँचें। हमारा सफल ब्राउज़र पुनःखोलना दूसरे रेंडरर या उत्पादन मशीन प्रमाणित नहीं करता।

डिलीवरी को चुनी जा सकने वाली संयुक्त रूपरेखा या कटर-तैयार खुला भाग चाहिए तो इच्छित प्रक्रिया में वास्तविक पाथ संपादन या Boolean ऑपरेशन करके जाँचें। यहाँ बदला दिखता पेंट वह ज्यामिति नहीं बनाता। [clipPath बनाम mask गाइड](https://perfectvector.com/hi/blog/svg-clippath-vs-mask) संबंधित दृश्यता अंतर बताती है; [SVG ungrouping गाइड](https://perfectvector.com/hi/blog/svg-wont-ungroup) तब मदद करती है जब दिखी कलाकृति अपेक्षित संपादन योग्य ऑब्जेक्ट न हो।

Clipart केवल पिक्सेल हो और संपादन योग्य स्रोत आकृति चाहिए तो [PerfectVector से clipart SVG तैयार करें](https://perfectvector.com/hi/clipart-to-svg), रूपरेखाएँ और खुले भाग जाँचें और मास्टर रखें। इच्छित फ़िल्टर या पाथ ऑपरेशन अलग लगाकर सत्यापित करें। वेक्टराइज़ेशन इस फ़िल्टर के दृश्य ओवरलैप को सत्यापित निर्माण रूपरेखा नहीं बनाता।

## अक्सर पूछे जाने वाले प्रश्न

**क्या feComposite out ओवरलैप पाथ ज्यामिति मिटाता है?**
नहीं। दूसरे इनपुट के अल्फ़ा से रेंडर पेंट बदलता है। हमारी फ़िल्टर फ़ाइलों में मूल A पाथ डेटा और स्थानीय ज्यामिति सीमा समान रही, वहाँ भी जहाँ ओवरलैप पेंट पारदर्शी हुआ।

**in और in2 बदलने से परिणाम क्यों बदलता है?**
वे पहला और दूसरा इनपुट पहचानते हैं। In पहले का पेंट दूसरे की अपारदर्शिता में रखता है; out पहले को उसके बाहर। हमारे उलटे in मामले वही अपारदर्शी ओवरलैप लेकिन अलग रंग दिखाते हैं, जबकि उलटे out अलग क्षेत्र रखते हैं।

**क्या xor हमेशा पूरी तरह खाली ओवरलैप बनाता है?**
हमारे xor मामलों में पूरी अपारदर्शी भीतरी ओवरलैप खाली था। आंशिक अल्फ़ा और एंटीएलियास किनारों की अपनी जाँच चाहिए; अपारदर्शी आकृतियों के set diagram हर पारभासी पिक्सेल नहीं बताते।

**क्या फ़िल्टर खुला भाग सीधे संपादन योग्य कट पाथ दे सकते हैं?**
दृश्य फ़िल्टर परिणाम नई बनाई Boolean ज्यामिति नहीं है। मूल आकृतियाँ रखें, इच्छित पाथ प्रक्रिया में ज़रूरी रूपरेखाएँ बनाएँ व जाँचें और प्राप्तकर्ता ऐप व उत्पादन आवश्यकताएँ अलग सत्यापित करें।

## स्रोत

1. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Image-space इनपुट भूमिकाएँ, ऑपरेटर और सामान्य फ़िल्टर रंग स्थान।
2. [MDN: operator](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/operator) — कंपोज़िट ऑपरेटर मान और अलग morphology संदर्भ।
3. [MDN: filterUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/filterUnits) — फ़िल्टर क्षेत्र निर्देशांक तंत्र।
4. [MDN: feImage](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage) — फ़िल्टर प्रक्रिया का image इनपुट।
5. [W3C: Filter Effects कंपोज़िटिंग](https://www.w3.org/TR/filter-effects-1/#feCompositeElement) — Premultiplied रंग व अल्फ़ा कंपोज़िट परिभाषाएँ।

***

अपना रास्टर clipart है? [संपादन योग्य SVG मास्टर बनाएँ](https://perfectvector.com/hi/clipart-to-svg), रूपरेखाएँ व खुले भाग जाँचें, फिर चुना दृश्य कंपोज़िट या अलग बनाया पाथ परिणाम गंतव्य में जाँचते हुए मास्टर रखें।

## Explore

- [Read the HTML article](https://perfectvector.com/hi/blog/svg-composite-artwork)
- [छिपे पाथ छोड़े बिना SVG स्थायी रूप से क्रॉप करें](https://perfectvector.com/hi/blog/permanent-crop-svg.md)
- [Inkscape: Object to Path बनाम Stroke to Path](https://perfectvector.com/hi/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)