Inkscape में रंग से समूह: पाथ रखें या मिलाएँ?
Inkscape में समान भरण चुनें, Group या Union तय करें और मिलाने से पहले रंगों का ओवरलैप जाँचें। पाथ संपादन योग्य रखें या संरेखित रंग फ़ाइलें निर्यात करें।
इस पेज पर
Inkscape में रंग के अनुसार ऑब्जेक्ट समूहबद्ध करने के लिए एक भरी हुई आकृति चुनें, Edit > Select Same > Fill Color चुनें, फिर Object > Group चुनें। अगर केवल मेल खाते ऑब्जेक्ट का रंग बदलना है, तो चयन के बाद रुक जाएँ। Path > Union तब इस्तेमाल करें जब जानबूझकर उनकी ज्यामिति एक पाथ में मिलानी हो।
कई रंगों वाले चित्र में हिस्से एक-दूसरे पर चढ़े हों तो यह निर्णय महत्वपूर्ण है। समूह अपने सदस्यों को संपादन योग्य रखता है, लेकिन हर लाल हिस्से को एक समूह में रखने से बदल सकता है कि कौन-सा हिस्सा नीले के ऊपर है। पूरी रंग पट्टी को समूहबद्ध करने से पहले एक प्रति सहेजें और इन ओवरलैप की जाँच करें। समान रंग चुनना, ऑब्जेक्ट व्यवस्थित करना, बाहरी रेखाएँ मिलाना और अलग फ़ाइलें निर्यात करना चार अलग काम हैं।
अगले संपादन के हिसाब से ऑपरेशन चुनें
- समान भरण का रंग बदलना: उन्हें चुनें और भरण बदलें।
- कई हिस्सों को साथ खिसकाना या आकार बदलना: उन्हें समूहबद्ध करें।
- ओवरलैप की भीतरी सीमाएँ हटाना: डिलीवरी प्रति पर Union इस्तेमाल करें।
- हर रंग की एक फ़ाइल देना: अलग करते समय साझा कैनवस सुरक्षित रखें।
- एक लाल हिस्से को नीली कलाकृति के पीछे और दूसरे को सामने रखना: स्टैक में अलग स्थान बनाए रखें।
पहले समान भरण चुनें
Inkscape का बुनियादी ट्यूटोरियल Edit > Select Same > Fill Color बताता है। वह स्ट्रोक रंग, स्ट्रोक शैली, भरण और स्ट्रोक तथा ऑब्जेक्ट प्रकार से चयन को भी अलग करता है। जिस गुण को संपादित करना है, उसी के अनुसार मापदंड चुनें।
- SVG की कार्य प्रति खोलें।
- Selector टूल से वास्तविक भरा हुआ ऑब्जेक्ट चुनें। अगर समूह चुना है, तो उसमें प्रवेश करके सदस्य चुनें।
- Edit > Select Same > Fill Color चुनें।
- कुछ बदलने से पहले चुने गए ऑब्जेक्ट जाँचें। ऐसे असंबंधित हिस्से देखें जिनका भरण संयोग से समान हो।
- अगर रंग बदलना ही पूरा काम है, तो नया भरण लगाएँ। वरना नीचे दिया ऑपरेशन चुनें।
समान भरण चुनने का मतलब हर लाल दिखते ऑब्जेक्ट को चुनना नहीं है। ग्रेडिएंट, लाल स्ट्रोक, पारभासी आकृति और सपाट लाल भरण समान दिख सकते हैं, लेकिन उनकी पेंट सेटिंग अलग हो सकती है। अगर ट्रेस में लगभग समान शेड हैं, तो उन्हें व्यवस्थित करने से पहले SVG रंग पट्टी घटाने की प्रक्रिया से तय करें कि वे एक रंग बनने चाहिए या नहीं।
अगर कोई उपयोगी चयन नहीं होता, तो जाँचें कि आपने क्या क्लिक किया। समूह कंटेनर और उसकी सदस्य आकृति अलग ऑब्जेक्ट हैं। Inkscape समूह गाइड समूह में प्रवेश और उसके सदस्यों का संपादन बताती है। एम्बेडेड बिटमैप में चुनने के लिए अलग भरे हुए वेक्टर हिस्से नहीं होते; SVG ऑब्जेक्ट प्रकार का निदान इस स्थिति को पहचानने में मदद करता है।
Group, Union, Combine या अलग फ़ाइलें?
| ऑपरेशन | क्या बदलता है | कब इस्तेमाल करें | बाद में क्या जाँचें |
|---|---|---|---|
| Select Same Fill Color | मौजूदा चयन | समान हिस्सों में एक जैसा रंग संपादन चाहिए | असंबंधित हिस्से चयन में नहीं आए |
| Object > Group | ऑब्जेक्ट का संगठन | हिस्से साथ चलें और अलग-अलग संपादन योग्य रहें | ओवरलैप अभी भी मास्टर जैसा है |
| Path > Union | पाथ की ज्यामिति | ओवरलैप करते भरे क्षेत्र एक बाहरी रेखा बनें | छेद, द्वीप और इच्छित सीमाएँ बची हैं |
| Path > Combine | पाथ की संरचना | कई सबपाथ एक पाथ ऑब्जेक्ट के हों | भरण नियम और ओवरलैप क्षेत्र इच्छित परिणाम देते हैं |
| अलग रंग फ़ाइलें | दस्तावेज़ की डिलीवरी | प्राप्तकर्ता को हर रंग की फ़ाइल चाहिए | हर फ़ाइल में मूल कैनवस और संरेखण बना है |
Inkscape बूलियन ऑपरेशन गाइड Union को Combine से अलग करती है। Union साझा बाहरी रेखा रखता है, जबकि Combine एक पाथ ऑब्जेक्ट के भीतर घटक हिस्से रखता है। Combine, Union का अदल-बदल योग्य शॉर्टकट नहीं है। ओवरलैप करते सबपाथ और उनका भरण नियम अलग दृश्य परिणाम दे सकते हैं।

डिज़ाइन पर काम जारी हो तो समूह बनाना उपयोगी सामान्य विकल्प है। सदस्य उपलब्ध रहते हैं और बाद में कंटेनर को Ungroup कर सकते हैं। Union मूल ओवरलैप सीमाएँ हटा देता है। Ungroup मिली हुई पाथ से वे सीमाएँ वापस नहीं बना सकता; फिर ज़रूरत पड़ सकती हो तो मास्टर रखें।
Union का यह मतलब भी नहीं कि अलग द्वीप एक सतत आकृति बन जाएँगे। एक पाथ में असंबद्ध सबपाथ हो सकते हैं। समूह और कई द्वीपों वाला पाथ समान दिख सकते हैं, जबकि अलग संपादन की अनुमति देते हैं।
एक रंग को कई समूह क्यों चाहिए हो सकते हैं
ऐसे बैज की कल्पना करें जिसमें नीली पट्टी के पीछे लाल खंड हो और उसी पट्टी के सामने दूसरी लाल धारी हो। दोनों लाल हिस्सों का भरण समान है, लेकिन पेंट क्रम में उनकी जगह अलग है।
यह छोटा SVG वही व्यवस्था बनाता है। इसे .svg फ़ाइल के रूप में सहेजें और ब्राउज़र या एडिटर में खोलें:
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="180" viewBox="0 0 240 180">
<path id="red-back" fill="#ea5d52" d="M20 20H145V90H20Z"/>
<path id="blue-middle" fill="#376aa7" d="M90 40H165V155H90Z"/>
<path id="red-front" fill="#ea5d52" d="M65 105H200V140H65Z"/>
<path id="gold-accent" fill="#dba83a" d="M185 35L215 75H170Z"/>
</svg>इस साधारण SVG में बाद की आकृतियाँ पहले वाली के ऊपर पेंट होती हैं। SVG रेंडरिंग मॉडल दस्तावेज़ क्रम और समूहों के रेंडर होने का तरीका समझाता है।
हमने इस उदाहरण के चार संस्करण बनाए और ब्राउज़र में जाँचे। हर संस्करण में वही चार पाथ परिभाषाएँ और निर्देशांक रहे। केवल समूह कंटेनरों के भीतर उनका स्थान बदला:
| दस्तावेज़ की व्यवस्था | दिखाई देने वाला परिणाम |
|---|---|
| पीछे लाल, बीच में नीला, सामने लाल, सुनहरा विवरण | नीला लाल खंड को ढकता है; लाल धारी नीले को ढकती है |
| दोनों लाल पाथ नीले से पहले एक समूह में | नीला लाल धारी को भी ढकता है |
| दोनों लाल पाथ नीले के बाद एक समूह में | लाल खंड भी नीले को ढकता है |
| एक लाल समूह नीले से पहले और दूसरा बाद में | मूल ओवरलैप जस के तस रहते हैं |
विधि: ये हाथ से बनाए गए SVG दस्तावेज़ ट्री थे, Inkscape से कैप्चर किए गए आउटपुट नहीं। उदाहरण पेंट क्रम की बाधा दिखाता है; यह नहीं बताता कि Inkscape का कोई विशिष्ट Group कार्य स्टैक में कौन-सी जगह चुनेगा।
एक समूह किसी सदस्य को समान स्तर के नीले ऑब्जेक्ट से पहले और दूसरे को उसी ऑब्जेक्ट के बाद नहीं रख सकता। इस डिज़ाइन के लिए दो लाल समूह रखें या ऑब्जेक्ट अलग छोड़ें। लक्ष्य केवल रंग बदलना हो तो समूह बनाए बिना समान भरण का चयन इस्तेमाल करें। निर्यात के बाद ओवरलैप बदलने पर SVG स्टैकिंग क्रम गाइड व्यापक निदान बताती है।
संपादन योग्य मास्टर रखते हुए सुरक्षित समूह बनाएँ
- बिना बदलाव वाला मास्टर और एक कार्य प्रति सहेजें।
- समान भरण चुनें और नोट करें कि कौन-से ऑब्जेक्ट चुने गए।
- जाँचें कि अन्य रंग इन ऑब्जेक्ट को कहाँ काटते हैं। अगर समान रंग के हिस्से स्टैक में किसी दूसरे ऑब्जेक्ट के दोनों ओर हैं, तो एक वैश्विक समूह से बचें।
- Object > Group से ऐसा उपसमूह बनाएँ जो स्टैक की एक जगह साझा कर सके। ज़रूरत पर दूसरे उपसमूह के लिए दोहराएँ।
- सामान्य आकार पर और हर ओवरलैप में कलाकृति की मास्टर से तुलना करें।
- समूह में प्रवेश कर एक सदस्य चुनें और पुष्टि करें कि अलग संपादन अभी उपलब्ध है।
- डिलीवरी से पहले सहेजें, फिर खोलें और गंतव्य ऐप में जाँचें।
बिना ओवरलैप वाली आकृतियों के सरल संग्रह में हर रंग का एक समूह सुविधाजनक हो सकता है। उलझे हुए अक्षरों, बैज या परतदार चित्रों में रंग पट्टी के बजाय डिज़ाइन के हिस्सों के अनुसार समूह संभालना आसान हो सकता है।
Union तभी चुनें जब डिज़ाइन को मिली हुई ज्यामिति चाहिए। एक प्रतिलिपि पर इच्छित भरे पाथ चुनें, Path > Union चुनें और परिणाम की बाहरी रेखा व छेद जाँचें। केवल उपलब्ध होने के कारण हर समान भरण न चुनें: छोटे विवरण और बड़े बैकग्राउंड का रंग समान हो सकता है, फिर भी उन्हें स्वतंत्र संपादन चाहिए हो सकता है।
जब हर रंग की अलग फ़ाइल देनी हो
अलग फ़ाइलें डिलीवरी की ज़रूरत हल करती हैं; वे पूरे मास्टर का संपादन योग्य संगठन सुरक्षित नहीं रखतीं। हर आउटपुट में मूल चौड़ाई, ऊँचाई, viewBox और ऑब्जेक्ट की जगह रखें। किनारे तक कसकर क्रॉप करने से साझा पंजीकरण संदर्भ खो जाता है।
इस प्रक्रिया के लिए संरेखित SVG रंग पृथक्करण गाइड देखें। इस बैज को अलग करने से पहले यह भी तय करें कि छिपी ज्यामिति का क्या होगा। मास्टर में लाल खंड नीले के नीचे तक जाता है। केवल लाल वाली फ़ाइल पूरा खंड दिखा सकती है, क्योंकि उसे ढकने वाला नीला ऑब्जेक्ट मौजूद नहीं है। केवल Group छिपा क्षेत्र घटाता नहीं और उत्पादन के लिए तैयार रंग पृथक्करण नहीं बनाता।
अगर कलाकृति PNG या JPG से शुरू होती है
स्रोत रास्टर लोगो या सपाट चित्र हो तो PerfectVector इस संपादन चरण से पहले काम आता है। इसकी चित्र से वेक्टर प्रक्रिया उपयुक्त कलाकृति को SVG पाथ में बदल सकती है, जिन्हें आप Inkscape में जाँचकर व्यवस्थित कर सकते हैं। वेक्टराइज़ेशन दिखाई देने वाले चित्र से ज्यामिति प्राप्त करता है; यह डिज़ाइनर के नाम वाले समूह वापस नहीं बनाता और न तय करता है कि समान रंग के कौन-से हिस्से मिलें।
मौजूदा संपादन योग्य SVG हो तो एडिटर में रहें। स्क्रीनशॉट को दोबारा ट्रेस करने से उपयोगी पाथ, छेद और स्टैकिंग सूचना खो सकती है। ट्रेसिंग चाहिए या नहीं, यह स्पष्ट न हो तो इमेज वेक्टराइज़ेशन की व्याख्या बताती है कि रूपांतरण क्या बदलता है।
फ़ाइल देने से पहले तीन बातें सत्यापित करें: ओवरलैप मास्टर जैसा है, हर संपादन योग्य समूह का एक सदस्य अभी चुना जा सकता है, और Union से बनी डिलीवरी आकृति में इच्छित छेद व द्वीप हैं। यह मानने के बजाय कि हर ऐप एडिटर के संगठन को समान समझेगा, आयात की गई फ़ाइल जाँचें।
अक्सर पूछे जाने वाले प्रश्न
Inkscape में समान भरण वाले सभी ऑब्जेक्ट कैसे चुनें? एक भरा हुआ ऑब्जेक्ट चुनें, फिर Edit > Select Same > Fill Color चुनें। संपादन से पहले चयन जाँचें; समान भरण डिज़ाइन के किसी असंबंधित हिस्से का भी हो सकता है।
क्या रंग के अनुसार समूह बनाने से पाथ मिल जाते हैं? नहीं। Object > Group सदस्य ऑब्जेक्ट को एक कंटेनर के भीतर रखता है। Path > Union उनकी ज्यामिति एक पाथ में मिलाता है और ओवरलैप सीमाएँ हटा सकता है।
समान रंग समूहबद्ध करने के बाद ओवरलैप क्यों बदल गया? समान रंग के हिस्से स्टैक में दूसरे रंग के आसपास अलग जगहों पर रहे हो सकते हैं। उन्हें एक समूह में रखने से कंटेनर को स्टैक में एक स्थान मिलता है। कई समूह बनाए रखें या समूह बनाए बिना चयन का रंग बदलें।
क्या Ungroup से Union को उलट सकते हैं? नहीं। Ungroup समूह कंटेनर हटाता है; वह मिले हुए पाथ से मूल ऑब्जेक्ट वापस नहीं लाता। वे सीमाएँ महत्वपूर्ण हों तो Undo इस्तेमाल करें या संपादन योग्य मास्टर पर लौटें।
स्रोत
- Inkscape — बुनियादी ट्यूटोरियल — भरण रंग से ऑब्जेक्ट चयन बताता है और अन्य समान गुणों को अलग करता है।
- Inkscape — ऑब्जेक्ट समूहबद्ध करना — समूह, नेस्टेड समूह, अलग सदस्य का संपादन और Ungroup समझाता है।
- Inkscape — बूलियन ऑपरेशन — Union, Combine और अलग सबपाथ में अंतर बताता है।
- W3C — SVG 2 रेंडरिंग मॉडल — बैज उदाहरण में इस्तेमाल दस्तावेज़ पेंट क्रम और समूह रेंडरिंग परिभाषित करता है।
अगर शुरुआती कलाकृति PNG या JPG है, तो PerfectVector से अपना चित्र SVG में बदलें, फिर क्या समूहबद्ध या मिलाना है यह तय करने से पहले Inkscape में एक रंग चयन और हर ओवरलैप जाँचें।
Blog से और

Paper.js SVG बूलियन: आयात किए चित्र काटें और जोड़ें
Paper.js में SVG पाथ आयात करें, ओवरलैप आकार जोड़ें, वास्तविक खुला हिस्सा काटें और छोटे, दोहराए जा सकने वाले ब्राउज़र उदाहरण से निर्यात फ़ाइल जाँचें।

Fabric.js SVG आयात: कैनवस पर चित्र संपादन योग्य रखें
SVG को Fabric.js में संपादन योग्य ऑब्जेक्ट की तरह आयात करें, एक हिस्से का रंग बदलें और जाँची SVG प्रति निर्यात करें। परीक्षित उदाहरण अपनाएँ और स्रोत की समस्याओं को API की त्रुटियों से अलग पहचानें।
