SVG के छेद क्यों भरते हैं और उन्हें कैसे वापस लाएं

SVG का छेद तब भर जाता है जब फ़ाइल या गंतव्य अंदरूनी कंटूर को भरी हुई आकृति के बाहर का क्षेत्र मानना बंद कर देता है। सामान्य कारण हैं: संयुक्त पाथ को अलग कर देना, अंदरूनी कंटूर का अलग भरी हुई वस्तु के रूप में सेव होना, भरण नियम या पाथ दिशा बदलना, आयातक का यह संबंध खो देना, या SVG बनने से पहले ही रास्टर ट्रेस का छेद बंद कर देना।

पहले SVG ब्राउज़र में छेदें। छेद वहीं भरा हो तो फ़ाइल सुधारें। ब्राउज़र सही हो लेकिन दूसरा ऐप छेद भरे तो संभावित दोष आयात चरण है।

पहले खोजें छेद कहाँ गायब हुआ

ज्यामिति बदलने से पहले 2 रेंडरर इस्तेमाल करें:

1. SVG की प्रति सेव करें।
2. उसे सीधे Chrome, Safari, Firefox या दूसरे ब्राउज़र में छेदें।
3. हल्की और गहरी दोनों पृष्ठभूमि पर रखें।
4. वही फ़ाइल गंतव्य ऐप में छेदें।
5. केवल कुल सिल्हूट नहीं, उसी छेद की तुलना करें।

यह तुलना खराब SVG और गंतव्य-विशिष्ट आयात समस्या अलग करती है। इससे आयात से पहले सही फ़ाइल को मनमानी पाथ क्रियाओं से नुकसान भी नहीं होता।

सफ़ेद आकृति छेद नहीं है

असली छेद SVG के पीछे जो हो, दिखाता है। सफ़ेद आकृति केवल सफ़ेद कैनवास पर खाली लगती है। वेब इंटरफ़ेस आर्टवर्क के लिए SVG pointer-events गाइड दिखाती है कि छेद, रंगा क्षेत्र और अलग क्लिक लक्ष्य क्लिक पर कैसे प्रतिक्रिया देते हैं।

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

पारदर्शी छेद के लिए संयुक्त पाथ लें या बाहरी से अंदरूनी आकृति घटाएं। मास्क भी पारदर्शिता दे सकता है, लेकिन कई उत्पादन ऐप मास्क की तुलना में सरल पाथ ज्यामिति को अधिक भरोसेमंद तरीके से संभालते हैं। स्क्रिप्ट प्रक्रिया में Paper.js से आयात पाथ काटना और जोड़ना आजमाएं, फिर निर्यात SVG दोबारा छेदकर छेद देखें।

गोबो आर्टवर्क में सही पारदर्शी छेद के बाद भी सामग्री निर्णय अलग है। स्टील बनाम ग्लास गोबो तुलना वही अक्षर O स्टील जोड़ लेआउट और ग्लास-समर्थित डिज़ाइन में दिखाती है और बताती है कि प्रक्षेपित हल्के और गहरे क्षेत्र उलटने से यह बदल जाता है कि किन हिस्सों को जुड़ा रहना चाहिए।

संयुक्त पाथ छेद का संबंध रखते हैं

अक्षर O, छल्ला और बीच से कटा हुआ लोगो अक्सर 1 ऐसे पाथ तत्व का इस्तेमाल करते हैं जिसमें कई बंद उप-पाथ होते हैं। बाहरी कंटूर सिल्हूट तय करता है; घिरा उप-पाथ अक्षर की खाली जगह या कटआउट देता है। SVG पाथ मॉडल 1 पाथ के भीतर कई उप-पाथ रखने की अनुमति देता है।

इसीलिए Ungroup, Break Apart और Release Compound Path एक-दूसरे के बदले इस्तेमाल किए जाने वाले आदेश नहीं हैं। संयुक्त पाथ अलग करने से अंदरूनी कंटूर सामान्य भरी वस्तु बन सकता है। ज्यामिति मौजूद रहती है, लेकिन उसका बाहरी कंटूर से संबंध खो जाता है।

प्रति पर वापस बनाएं:

1. बाहरी सीमा और केवल छेद बनने वाले कंटूर चुनें।
2. Make Compound Path, Combine या समकक्ष आदेश लें।
3. बनी वस्तु को एक भरण दें।
4. भरण नियम देखें।
5. सेव SVG ब्राउज़र और गंतव्य ऐप में दोबारा छेदें।

Adobe के वर्तमान संयुक्त पाथ दस्तावेज़ में यही मॉडल है: घटक पाथ भरण नियम से भरे और पारदर्शी क्षेत्र तय करते हैं।

केवल रूप नहीं, संबंध वापस लाएं

मुहर आर्टवर्क में कौन-से क्षेत्र भरे रहें तय करने से पहले उभरी बनाम धँसी मिट्टी मुहर ज्यामिति देखें।

nonzero बनाम evenodd जाँचें

SVG के दो भरण नियम हैं। SVG 2 पेंटिंग विनिर्देश nonzero शुरुआती मान और evenodd दूसरा विकल्प तय करता है।

• nonzero पाथ को पार करने की गिनती में दिशा के अनुसार धनात्मक या ऋणात्मक संकेत का इस्तेमाल करता है। गलत दिशा का अंदरूनी कंटूर भरण घटाने के बजाय जोड़ सकता है।
• evenodd पाथ को पार करने की संख्या गिनता है। 2 बार घिरा हुआ बिंदु बाहर माना जाता है, इसलिए एक सरल अंदरूनी कंटूर अपनी दिशा चाहे जो हो, छेद बन जाता है।

इस छोटे पाथ में समान दिशा के 2 आयत हैं। evenodd से बीच पारदर्शी रहता है:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

डिज़ाइन से मेल खाता हो तो नियम बदलना उपयोगी है, लेकिन यह हर समस्या का समाधान नहीं है। दोनों कंटूर अब भी एक ही आकृति के उप-पाथ होने चाहिए। 2 असंबंधित वस्तुओं पर fill-rule="evenodd" लगाने से एक वस्तु दूसरी में छेद नहीं बनाती।

अगर आप nonzero रखते हैं और आपके संपादक में दिशा उलटने का आदेश है, तो केवल अंदरूनी कंटूर की दिशा उलटें। Illustrator संयुक्त पाथ के लिए दोनों भरण विकल्प और पाथ दिशा नियंत्रण देता है। उलटने से पहले प्रति सेव करें, क्योंकि स्वयं को काटते पाथ और कई भीतर की खाली जगह सरल छल्ले से अलग नतीजा दे सकते हैं।

SVG सही लेकिन आयातक गलत हो

कुछ कटिंग, CAD, 3D और एनीमेशन टूल SVG की सुविधाओं के केवल एक व्यावहारिक सीमित हिस्से का समर्थन करते हैं। ब्राउज़र संयुक्त पाथ सही दिखा सकता है जबकि गंतव्य हर कंटूर को ठोस वस्तु के रूप में आयात कर सकता है।

मरम्मत का यह क्रम लें:

1. स्रोत संपादक से सरल प्रति सेव करें।
2. अगर टेक्स्ट आयात समस्या का कारण है, तो उस प्रति में संपादन योग्य टेक्स्ट को रूपरेखाओं में बदलें।
3. केवल जरूरत पर मास्क, क्लिप और दृश्य प्रभाव सादे पाथ से बदलें।
4. हर इच्छित छेद को उसके बाहरी कंटूर के साथ 1 संयुक्त पाथ में रखें।
5. बार-बार बदलने के बजाय evenodd और nonzero सोच-समझकर जाँचें।
6. आयातक अब भी छेद भरे तो दोनों सीमाएँ आयात करके गंतव्य में अंदरूनी प्रोफ़ाइल घटाएं।

एक्सट्रूज़न में गंतव्य को चुनी जाने योग्य बंद प्रोफ़ाइल भी पहचाननी चाहिए। SVG एक्सट्रूज़न निदान छेद बचने के बाद खुले अंतिम बिंदु, दोहराव और प्रोफ़ाइल वैधता बताता है।

ट्रेसिंग ने छेद बंद किया हो

रास्टर स्रोत बहुत छोटा, धुंधला या कम कंट्रास्ट वाला हो, तो ट्रेसर छोटे अक्षर की अंदरूनी खाली जगह बंद कर सकता है या संकरा अंतर मिला सकता है। यह ज्यामिति की समस्या है, भरण नियम की नहीं: अंदरूनी सीमा SVG में आई ही नहीं।

रास्टर स्रोत पर लौटें और:

• धुंधलापन जोड़े बिना बड़ा करें या फिर कैप्चर करें;
• जरूरी छेद के आसपास अंतर बढ़ाएं;
• अंतर के पास संपीड़न शोर हटाएं;
• नियंत्रण हों तो चिकनापन या रंग मिलाना घटाएं;
• अंतिम आउटपुट आकार पर नए ट्रेस की तुलना करें।

यहीं PerfectVector मदद कर सकता है। मूल रास्टर हो और नया SVG ट्रेस चाहिए तो इमेज से वेक्टर प्रक्रिया लें। डाउनलोड से पहले हर अक्षर की खाली जगह और नकारात्मक क्षेत्र देखें। अगर संपादक में संयुक्त पाथ अलग करने से पहले तक SVG सही था, तो उसी SVG को सुधारें; दोबारा ट्रेस करने से खोया हुआ संपादन इतिहास वापस नहीं आएगा।

अक्षरांकन में भी स्रोत-पहले तरीका उपयोगी है। हाथ से अक्षरांकन वेक्टर गाइड पूरी ड्रॉइंग का चरित्र मिटाए बिना छोटी खाली जगह खुली रखना बताती है।

सुरक्षित अंतिम जाँच

सुधारी SVG भेजने से पहले:

• हल्की, गहरी और पारदर्शी पृष्ठभूमि पर देखें;
• लक्ष्य चुनकर एक इच्छित संयुक्त पाथ पक्का करें;
• संपादक या SVG स्रोत में भरण नियम देखें;
• हर अक्षर की अंदरूनी खाली जगह, छल्ला और घिरा हुआ खाली क्षेत्र जाँचें;
• बिना सेव कैनवास पर भरोसे के बजाय निर्यात फिर छेदें;
• सटीक गंतव्य ऐप जाँचें;
• संपादन योग्य स्रोत और सरल दी जाने वाली प्रति अलग रखें।

अगर अब वस्तु एक साथ चयनित होती है, तो यह सही व्यवहार हो सकता है। संयुक्त पाथ जानबूझकर 1 वस्तु के रूप में बनाया जाता है। फिर अलग करने से पहले SVG समूह अलग करने की गाइड लें।

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

Break Apart के बाद छेद क्यों भरे? Break Apart ने अंदरूनी कंटूर बाहरी संयुक्त पाथ से अलग किए। जो पहले छेद थे, वे सामान्य भरी हुई वस्तुएँ बन गए। आदेश वापस करें या हर बाहरी कंटूर सही अंदरूनी कंटूर से मिलाएं, फिर भरण नियम जाँचें।

SVG छेद के लिए fill-rule="evenodd" लेना चाहिए? evenodd भीतर के कंटूर में सुविधाजनक है क्योंकि दिशा नतीजा नहीं तय करती। फिर भी यह 1 आकृति के भीतर काम करता है; यह अलग वस्तु को नहीं घटाता। स्रोत और गंतव्य इच्छित दिशा बचाते हों तो nonzero रखें।

ब्राउज़र में सही SVG ऐप में ठोस क्यों है? हो सकता है कि आयातक संयुक्त पाथ, भरण नियम, मास्क या कंटूर दिशा को सुरक्षित न रखे। एक प्रति को सरल पाथों तक सीमित करें, फिर दोबारा जाँचें। जरूरत पर बाहरी-अंदरूनी सीमाएँ आयात करके गंतव्य में छेद घटाएं।

ऊपर सफ़ेद आकृति रखकर छेद बना सकता हूँ? वह केवल सफ़ेद पृष्ठभूमि पर नकली छेद है। सफ़ेद वस्तु भरी रहती है, इसलिए दूसरी ठोस वस्तु की तरह प्रिंट, कट या आयात हो सकती है। पृष्ठभूमि दिखनी हो तो संयुक्त पाथ, घटाव या पारदर्शिता संरचना लें।

क्या PerfectVector मौजूदा SVG के भरे छेद सुधार सकता है? उपयुक्त रास्टर पर लौटकर स्पष्ट इच्छित छेद वाला नया ट्रेस चाहिए तो PerfectVector उपयोगी है। यह ऐसे संयुक्त पाथ को नहीं सुधारता जिसे संपादक ने अलग कर दिया हो या आयातक ने अनदेखा कर दिया हो। वे संबंध वेक्टर संपादक या गंतव्य में सुधारें।

स्रोत

1. W3C — SVG 2 पेंटिंग — nonzero, evenodd और शुरुआती भरण मान परिभाषित करता है।
2. W3C — SVG पाथ — पाथ, उप-पाथ और बंद ज्यामिति परिभाषित करता है।
3. Adobe Illustrator — संयुक्त पाथ बनाएं — संयुक्त छेद, भरण नियम और घटक दिशा उलटना बताता है।
4. PerfectVector — इमेज से वेक्टर — उस स्थिति में इस्तेमाल होने वाली वर्तमान रास्टर से SVG प्रक्रिया, जब दोबारा ट्रेस करना उचित हो।

रास्टर ट्रेस में छेद खोया हो तो साफ़ स्रोत से नया वेक्टर बनाएं और फ़ाइल देने से पहले हर अक्षर की अंदरूनी खाली जगह देखें। ब्राउज़र संस्करण सही हो तो वही ज्यामिति रखें और केवल विफल आयात सुधारें।