SVG आकृतियों के बीच सफ़ेद अंतराल: कारण पहचानें और ठीक करें
SVG आकृतियों के बीच सफ़ेद सीमारेखाएँ एंटी-अलायसिंग के दृश्य दोष या वास्तविक ज्यामिति अंतराल हो सकती हैं। पाथ बदलने से पहले ज़ूम, पृष्ठभूमि, रास्टर और आउटलाइन परीक्षण करें।
इस पेज पर
- एक-दूसरे को छूते पाथ भी सीमारेखा क्यों दिखाते हैं
- संपादन से पहले 4 परीक्षण करें
- 1. ज़ूम बदलें
- 2. पृष्ठभूमि बदलें
- 3. उच्च-रिज़ॉल्यूशन PNG निर्यात करें
- 4. आउटलाइन या वायरफ़्रेम दृश्य इस्तेमाल करें
- प्रदर्शन की सीमारेखा सुधारें
- वास्तविक ज्यामिति अंतराल सुधारें
- सही सुधार गंतव्य के अनुसार बदलता है
- PerfectVector कहाँ उपयोगी है
- अक्सर पूछे जाने वाले प्रश्न
- स्रोत
SVG आकृतियों के बीच पतली सफ़ेद रेखाएँ अक्सर रेंडरिंग की सीमारेखाएँ होती हैं, फ़ाइल में छेद नहीं। SVG रेंडरिंग मॉडल वेक्टर ग्राफ़िक्स को रास्टराइज़ करते समय एंटी-अलायसिंग इस्तेमाल करने की अनुमति देता है; इसलिए पास-पास के किनारों का अलग-अलग नमूना लेने से किसी विशेष स्केल पर पृष्ठभूमि के रंग की बहुत पतली रेखा दिखाई दे सकती है। किसी दूसरे ज़ूम स्तर या रेंडरर में वह रेखा गायब हो सकती है।
कभी-कभी अंतराल वास्तविक होता है। आकृतियाँ ओवरलैप करने, स्ट्रोक जोड़ने या पाथ मिलाने से पहले 4 जाँचें करें: ज़ूम बदलें, पृष्ठभूमि बदलें, कलाकृति का रास्टर निर्यात करें और आउटलाइन दृश्य में पाथ जाँचें। परिणाम बताते हैं कि प्रदर्शन के नमूनाकरण को सुधारना है या ज्यामिति को।
रेंडरिंग की सीमारेखा या वास्तविक अंतराल?
- ज़ूम के साथ बदलती या गायब होती है: संभवतः प्रदर्शन की सीमारेखा है।
- पृष्ठभूमि के साथ रंग बदलता है: किनारों के बीच पृष्ठभूमि का नमूना लिया जा रहा है।
- आउटलाइन दृश्य में नहीं है: वेक्टर की सीमाएँ शायद पहले से मिलती हैं।
- उच्च-रिज़ॉल्यूशन रास्टर निर्यात में दिखती है: निर्यात की सटीकता और ज्यामिति को अधिक ध्यान से जाँचें।
- मेश, कट पूर्वावलोकन या पाथ के माप में बनी रहती है: इसे वास्तविक ज्यामिति समस्या मानें।
एक-दूसरे को छूते पाथ भी सीमारेखा क्यों दिखाते हैं
स्क्रीन वेक्टर आकृतियों को पिक्सेल ग्रिड पर रेंडर करती है। किनारा किसी पिक्सेल के बीच से गुज़रता है, तो एंटी-अलायसिंग उस पिक्सेल में आकृति और पृष्ठभूमि के रंग मिलाकर किनारे को चिकना दिखाती है। अलग-अलग रेंडर की गई 2 आकृतियाँ अपनी सीमा के पिक्सेल में अलग-अलग मिश्रण कर सकती हैं, भले ही उनके वेक्टर निर्देशांक मिलते हों।
स्केल एक और परिवर्तनशील बात जोड़ता है। किसी आकार पर पिक्सेल की सीमा पर ठीक बैठने वाला साझा निर्देशांक दूसरे आकार पर पिक्सेल के बीच आ सकता है। निर्यात के दौरान राउंडिंग भी 1 सीमा को थोड़ा हिला सकती है। इसीलिए रेखा केवल 67% ज़ूम पर दिखाई दे सकती है, 100% पर गायब हो सकती है और छोटे वेब थंबनेल में फिर लौट सकती है।
SVG गणितीय रूप से अब भी सही हो सकता है। परीक्षण से पहले ज्यामिति संपादित करने से ऐसे ओवरलैप बन सकते हैं जो पारदर्शी, प्रिंट, कट या एनीमेशन उपयोग में दिखाई दें।
मुख्य अंतर यह है कि वास्तविक आउटलाइन का किनारा साझा है या नहीं। रेंडरिंग की सीमारेखा एक-दूसरे को छूती ज्यामिति के ऊपर दिख सकती है; वास्तविक अंतराल स्वयं आउटलाइन के बीच दिखाई देता रहता है।
संपादन से पहले 4 परीक्षण करें
1. ज़ूम बदलें
SVG को कई ज़ूम स्तरों पर देखें, जिनमें 100% और बहुत अधिक ज़ूम शामिल हों। बड़ा करने पर वास्तविक अंतराल पाथ के बीच बना रहता है। नमूनाकरण की सीमारेखा अक्सर झिलमिलाती है, उसकी मोटाई बदलती है या वह गायब हो जाती है।
केवल ज़ूम पर निर्भर न रहें। कुछ ज्यामिति अंतराल पिक्सेल से भी छोटे होते हैं और उनका रूप भी बदल सकता है।
2. पृष्ठभूमि बदलें
SVG को सफ़ेद, काली और किसी चमकीले रंग की पृष्ठभूमि पर रखें। पतली रेखा पृष्ठभूमि का रंग लेती है, तो रेंडरर अलग-अलग नमूना लिए गए किनारों के बीच पृष्ठभूमि दिखा रहा है। यह नमूनाकरण की सीमारेखा या वास्तविक पारदर्शी अंतराल, दोनों में से कुछ भी हो सकता है, इसलिए आउटलाइन की जाँच जारी रखें।
3. उच्च-रिज़ॉल्यूशन PNG निर्यात करें
अंतिम आयामों के 2 या 4 गुना आकार पर निर्यात करें, फिर छोटा किए गए आउटपुट को जाँचें। उच्च-रिज़ॉल्यूशन निर्यात में सीमारेखा गायब हो जाए, तो समस्या संभवतः स्केल पर निर्भर रास्टराइज़ेशन थी। वह बनी रहे और मापने योग्य हो जाए, तो निर्देशांक और निर्यात की सटीकता जाँचें।
4. आउटलाइन या वायरफ़्रेम दृश्य इस्तेमाल करें
भराव बंद करें और वास्तविक सीमाएँ जाँचें। पड़ोसी नोड चुनें और उनके निर्देशांकों की तुलना करें। पाथ बिल्कुल मिलते हों, तो दिखाई देने वाली रेखा रेंडरर की समस्या है। सिरे या किनारे मेल न खाते हों, तो ज्यामिति सुधारें।
पाथ संपादन की अधिक विस्तृत जानकारी के लिए SVG कैसे संपादित करें देखें। एक प्रति सुरक्षित रखें, क्योंकि सबसे अच्छा सुधार फ़ाइल के उपयोग पर निर्भर करता है।
प्रदर्शन की सीमारेखा सुधारें
ऐसी सपाट कलाकृति में, जहाँ पड़ोसी भराव के बीच कोई पारदर्शिता नहीं होनी चाहिए, छोटा नियंत्रित ओवरलैप आम तौर पर सबसे भरोसेमंद सुधार है। नीचे वाली या अधिक गहरी आकृति को उसके पड़ोसी के नीचे थोड़ा फैलाएँ। ओवरलैप सामान्य आकार पर दिखाई नहीं देना चाहिए और बाहरी सिलुएट नहीं बदलना चाहिए।
अन्य विकल्प ये हैं:
- आकृति के समान रंग का बहुत पतला स्ट्रोक जोड़ें और उसे इस तरह संरेखित करें कि वह सीमारेखा ढके।
- सभी पड़ोसी हिस्सों के पीछे मेल खाती आधार आकृति रखें।
- राउंडिंग ने साझा किनारे अलग कर दिए हों, तो SVG निर्यात के निर्देशांकों की सटीकता बढ़ाएँ।
- अंतिम फ़ाइल PNG हो, तो बड़ा रास्टर रेंडर करें और फिर उसका आकार घटाएँ।
SVG की shape-rendering प्रॉपर्टी ज्यामिति की सटीकता या अधिक स्पष्ट किनारों का अनुरोध कर सकती है, लेकिन MDN बताता है कि यह रेंडरिंग का संकेत है, हर रेंडरर में सभी सीमारेखाएँ गायब होने की गारंटी नहीं। पूरी फ़ाइल पर यह संकेत लागू करने से पहले crispEdges कब मदद करता है और कहाँ नहीं देखें।
1 सुधार चुनें, फिर वास्तविक गंतव्य में उसे जाँचें। कई सुधार एक साथ लगाने से ओवरलैप वाली जगहों पर गहरी उभरी धारियाँ या फूलाव बन सकते हैं।
वास्तविक ज्यामिति अंतराल सुधारें
आउटलाइन दृश्य या आगे की प्रक्रिया का आउटपुट छेद की पुष्टि करे, तो:
- इच्छित नोड को एक ही निर्देशांक पर स्नैप करें।
- पड़ोसी किनारों को तब तक फैलाएँ जब तक वे वास्तव में मिलें।
- केवल तभी सिरे जोड़ें जब डिज़ाइन में 1 लगातार पाथ होना चाहिए।
- दोहराए गए या अनचाहे खंड हटाएँ।
- पर्याप्त निर्देशांक सटीकता के साथ फिर निर्यात करें।
- फ़ाइल फिर खोलें और चारों परीक्षण दोहराएँ।
अंतराल ढकने के लिए सफ़ेद आकृति इस्तेमाल करने से बचें। वह केवल सफ़ेद पृष्ठभूमि पर लक्षण छिपाती है और फ़ाइल में अतिरिक्त ऑब्जेक्ट बनी रहती है।
अंतराल नॉइज़ वाले रास्टर को ट्रेस करने से आए हों, तो पूरे डिज़ाइन में अनेक पतली कतरनें और लगभग मिलते किनारे हो सकते हैं। हर एक को सुधारने में अधिक साफ़ स्रोत दोबारा ट्रेस करने से अधिक समय लग सकता है।
सही सुधार गंतव्य के अनुसार बदलता है
| गंतव्य | सुरक्षित प्राथमिकता |
|---|---|
| सपाट पड़ोसी भराव वाला वेब चित्र | रेंडरर परीक्षण के बाद छोटा ओवरलैप या पीछे आधार आकृति |
| पारदर्शी लोगो | दिखाई देने वाले आधार आयत के बिना सुधार या नियंत्रित ओवरलैप |
| PNG निर्यात | उच्च-रिज़ॉल्यूशन रास्टराइज़ेशन और फिर आकार घटाना पर्याप्त हो सकता है |
| Cricut या लेज़र कट | इच्छित कट ज्यामिति इस्तेमाल करें; सजावटी ओवरलैप अतिरिक्त कट बना सकता है |
| CAD या 3D प्रिंट | पुष्टि करें कि बनी हुई सतह या मेश में दरार नहीं है |
| एनीमेशन के हिस्से | ऑब्जेक्ट अलग रखें और केवल वहाँ ओवरलैप करें जहाँ गति अब भी सही काम करे |
CAD सतह या आगे बने मेश में बनी रहने वाली दरार, ब्राउज़र की 1-पिक्सेल सीमारेखा से वास्तविक प्रभाव में अलग है। आगे की ज्यामिति अलग हो जाती हो, तो स्रोत पाथ या रूपांतरण की सहनशीलता सुधारें। केवल ब्राउज़र थंबनेल में रेखा दिखती हो, तो उत्पादन की ज्यामिति पहले से सही हो सकती है।
कट से पहले SVG की जाँच सूची मशीन के अनुसार समीक्षा बताती है। सीमारेखाओं के बजाय स्क्रीन पर धुँधलापन या छिपे पिक्सेल की समस्या हो, तो पिक्सेल वाले SVG के कारण पहचानें।
PerfectVector कहाँ उपयोगी है
PNG या JPG से बने ट्रेस में अंतराल जगह-जगह बिखरे हों, तो दर्जनों पाथ में सुधार लगाने से पहले रास्टर स्रोत पर वापस जाएँ। स्पष्ट संपीड़न ब्लॉक साफ़ करें, अनचाही पृष्ठभूमि हटाएँ और मूल के सबसे स्पष्ट किनारे सुरक्षित रखें। फिर छवि-से-वेक्टर प्रक्रिया से दिखाई देने वाले क्षेत्रों को संपादन योग्य पाथ के रूप में दोबारा बनाएँ और पूर्वावलोकन जाँचें।
PerfectVector नहीं जान सकता कि समान रंग वाले 2 क्षेत्रों को एनीमेशन, कटिंग या जोड़ने के लिए अलग रहना चाहिए या नहीं। पूर्वावलोकन में सिलुएट और खाली जगह जाँचें, फिर डाउनलोड किए गए SVG को उसके वास्तविक गंतव्य में परखें। दोबारा ट्रेस करना तब उपयोगी है जब स्रोत के टुकड़ों में बँटने से अंतराल बने हों; तब नहीं, जब केवल 1 ब्राउज़र सही पड़ोसी ज्यामिति पर एंटी-अलायसिंग कर रहा हो।
अक्सर पूछे जाने वाले प्रश्न
SVG पाथ के बीच सफ़ेद रेखाएँ क्यों हैं? ब्राउज़र या ऐप पास-पास के किनारों पर अलग-अलग एंटी-अलायसिंग कर रहा हो सकता है, जिससे कुछ स्केल पर पृष्ठभूमि दिखाई देती है। पाथ अब भी बिल्कुल मिल सकते हैं। संपादन से पहले ज़ूम, पृष्ठभूमि, रेंडरर और आउटलाइन दृश्य बदलकर जाँचें।
मैं SVG में एंटी-अलायसिंग की सीमारेखाएँ कैसे हटाऊँ? सपाट पड़ोसी भराव के लिए छोटा नियंत्रित ओवरलैप, समान रंग का बहुत पतला स्ट्रोक या पीछे आधार आकृति जोड़ें। अंतिम प्रदर्शन आकारों पर परिणाम जाँचें। कट, CAD, पारदर्शी या एनीमेशन वाली कलाकृति के लिए ये सुधार बिना जाँच के इस्तेमाल न करें।
क्या सभी पाथ मिलाने से अंतराल हट जाएँगे? ऐसा हो सकता है, लेकिन इससे अलग रंगों और संपादन की संरचना भी हट जाती है। पाथ केवल तभी मिलाएँ जब उन्हें 1 आकृति होना चाहिए। अनेक रंगों वाली कलाकृति में आम तौर पर अलग ऑब्जेक्ट चाहिए, इसलिए किनारे मिलाना या नियंत्रित ओवरलैप अधिक सुरक्षित है।
अंतराल केवल SVG छोटा होने पर क्यों दिखाई देते हैं? स्केलिंग वेक्टर सीमाओं को पिक्सेल ग्रिड के सापेक्ष हिलाती है। कुछ आकारों पर दोनों पड़ोसी किनारे एक ही पिक्सेल पंक्ति या कॉलम में पृष्ठभूमि से मिलते हैं। बड़ा रेंडर या थोड़ा ओवरलैप पृष्ठभूमि दिखने से रोक सकता है।
क्या छोटे SVG अंतराल 3D प्रिंटिंग या कटिंग में मायने रखते हैं? वे तब मायने रखते हैं जब सतह, मेश या टूलपाथ तक बने रहें। केवल स्क्रीन पर दिखाई देने वाली सीमारेखा खराब ज्यामिति का प्रमाण नहीं है। आगे की प्रक्रिया का पूर्वावलोकन जाँचें और बनी हुई वस्तु को बदलने वाली किसी भी दरार या खुले कंटूर को सुधारें।
स्रोत
- W3C — SVG 2 रेंडरिंग मॉडल — SVG पेंटिंग क्रम, क्लिपिंग, कंपोज़िटिंग और एंटी-अलायसिंग का वर्णन करता है।
- MDN —
shape-rendering— SVG आकृतियों के लिए उपलब्ध रेंडरिंग संकेतों का दस्तावेज़ीकरण करता है। - W3C — SVG 2 निर्देशांक प्रणालियाँ — स्केल पर निर्भर रेंडरिंग के पीछे निर्देशांक, व्यूपोर्ट और रूपांतरण मॉडल परिभाषित करता है।
टुकड़ों में बँटे रास्टर ट्रेस में वास्तविक अंतराल हों, तो उसे संपादन योग्य वेक्टर पाथ के रूप में दोबारा बनाएँ और पूर्वावलोकन जाँचें। पाथ पहले से मिलते हों, तो फ़ाइल सुरक्षित रखें और गंतव्य के अनुसार केवल सबसे छोटा प्रदर्शन सुधार करें।
Blog से और
SVG z-index काम नहीं कर रहा? पाथ की परतों का क्रम ठीक करें
SVG z-index से पाथ सामने न आए तो तत्वों का क्रम जाँचें। उसी प्रतीक को क्रम बदलने से पहले और बाद में मिलाएँ, फिर समूह और एक्सपोर्ट फ़ाइलें सत्यापित करें।
Konva SVG आयात: छवि या संपादन योग्य पाथ चुनें
Konva में SVG चित्र को एक छवि या अलग संपादन योग्य पाथ के रूप में लोड करें। रंग बदलना, स्केलिंग और PNG निर्यात जाँचें, फिर आगे संपादन के लिए मूल SVG रखें।