निर्यात के बाद SVG स्ट्रोक गायब: कारण खोजें

निर्यात के बाद SVG स्ट्रोक गायब हो जाए, तो पहले पता लगाएँ कि पाथ की ज्यामिति अब भी मौजूद है या नहीं। गायब लगने वाली रेखा में स्ट्रोक का रंग न हो सकता है, उसका रंग पृष्ठभूमि से मिल सकता है, वह नए स्केल पर बहुत पतली हो सकती है, viewBox के बाहर हो सकती है या पेज के किनारे क्लिप हो सकती है। उसमें ऐसा ब्रश, बदलती चौड़ाई वाला प्रोफ़ाइल, फ़िल्टर या CSS नियम भी इस्तेमाल हो सकता है जिसे गंतव्य ऐप समझ नहीं पाता।

तुरंत कलाकृति को दोबारा ट्रेस न करें और हर ऑब्जेक्ट को एक्सपैंड न करें। संपादन योग्य स्रोत सुरक्षित रखें, परीक्षण के लिए एक प्रति बनाएँ और समस्या वाली 1 रेखा को अलग करके जाँचें। सबसे छोटा सुधार आम तौर पर मूल संरचना का अधिक हिस्सा बचाता है।

जल्दी कारण पहचानें

1. वर्तमान ब्राउज़र और एक वेक्टर संपादक में वही SVG खोलें।
2. गायब रेखा चुनें और पुष्टि करें कि उसका पाथ और नोड अब भी मौजूद हैं।
3. परीक्षण प्रति में स्ट्रोक का रंग बहुत स्पष्ट रखें, अपारदर्शिता पूरी करें और स्ट्रोक को अस्थायी रूप से अधिक चौड़ा करें।
4. उसे पेज के किनारे से दूर ले जाएँ और क्लिप, मास्क तथा फ़िल्टर को 1-1 करके बंद करें।
5. रूपांतरण हटाएँ या जाँचें कि वे स्ट्रोक की चौड़ाई को कैसे प्रभावित करते हैं।
6. यदि केवल 1 गंतव्य में समस्या आती है, तो वहाँ भेजने वाली प्रति में असमर्थित दृश्य रूप को बदलें।

स्ट्रोक के 4 परिणाम

पहले जाँचें कि पाथ अब भी मौजूद है या नहीं

SVG की एक प्रति टेक्स्ट संपादक में खोलें और <path>, <line>, <polyline>, <circle> या <rect> जैसे सामान्य आकृति तत्व खोजें। फिर वेक्टर संपादक में गायब ऑब्जेक्ट चुनें और आउटलाइन या वायरफ़्रेम दृश्य पर जाएँ।

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

संपादन करने से पहले 2 रेंडरर के परिणामों की तुलना करें। Chrome में दिखाई देने वाला लेकिन डेस्कटॉप संपादक में गायब स्ट्रोक आयात की किसी सीमा या CSS पर निर्भरता का संकेत देता है। हर जगह गायब रेखा में अमान्य रंग सेटिंग, क्लिपिंग, गलत सीमाओं या अनुपस्थित ज्यामिति की संभावना अधिक होती है। केवल रेखाओं के बजाय पूरा दस्तावेज़ खाली हो, तो खाली SVG के कारण पहचानने की विस्तृत जाँच करें।

स्ट्रोक विशेष रूप से Penpot में गायब होता हो, तो फ़ाइल भेजने के इस चरण में समस्या अलग करने के लिए Penpot SVG आयात की जाँचें करें।

कारण 1: स्ट्रोक में दिखाई देने वाला रंग नहीं है

SVG भराव और स्ट्रोक को अलग-अलग रंग गुण मानता है। कोई पाथ मौजूद हो सकता है, फिर भी उसकी रेखा दिखाई न दे। MDN भराव व स्ट्रोक मार्गदर्शिका stroke, stroke-width और अपारदर्शिता जैसे मुख्य गुण बताती है।

चुने गए ऑब्जेक्ट और उसे विरासत में मिली स्टाइल में इन बातों की जाँच करें:

• stroke="none";
• गायब stroke के साथ fill="none";
• stroke-width="0" या बहुत छोटी चौड़ाई;
• opacity="0" या stroke-opacity="0";
• स्ट्रोक का ऐसा रंग जो पेज या आसपास की आकृति से मिलता हो;
• ऑब्जेक्ट या उसके पैरेंट ग्रुप पर display="none" या visibility="hidden";
• ऐसी CSS क्लास जो प्रस्तुति एट्रिब्यूट को ओवरराइड करती हो।

परीक्षण प्रति में संतृप्त रंग लगाएँ, अपारदर्शिता 100% करें और स्ट्रोक को कई गुना चौड़ा करें। मोटी आउटलाइन भराव वाले अक्षरों का सामने वाला भाग ढक दे, तो पाथ बदलने से पहले SVG स्ट्रोक और भराव के पेंट क्रम की तुलना करें। उसके पीछे विपरीत रंग का आयत रखें। रेखा दिखाई देने लगे, तो इच्छित रंग वापस लगाएँ और ऐसी चौड़ाई चुनें जो भेजी जाने वाली फ़ाइल के अंतिम आकार पर स्पष्ट रहे।

याद रखें कि तत्व पर घोषित स्टाइल भी अधिक विशिष्ट स्टाइलशीट नियम से ओवरराइड हो सकती है। मार्कअप कुछ और कहता हो लेकिन ब्राउज़र कुछ और दिखाता हो, तो ब्राउज़र के डेवलपर टूल में गणना की गई स्टाइल देखें।

कारण 2: रेखा पेज या फ़्रेम के किनारे क्लिप हो रही है

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

ऑब्जेक्ट को अंदर ले जाकर या अस्थायी रूप से viewBox बढ़ाकर इसका परीक्षण करें। गायब हिस्सा लौट आए, तो दिखाई देने वाली कलाकृति के आसपास सोच-समझकर हाशिया जोड़ें। बिना गणना के कैनवास बढ़ाते न रहें; अधिकतम स्ट्रोक चौड़ाई, सिरों, जोड़ों और प्रभावों के लिए पर्याप्त जगह की गणना करें।

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

केवल 1 कोना गायब हो, तो ऊँचे stroke-miterlimit के साथ होने वाली अंतःक्रिया देखें। तीखा माइटर पाथ से बहुत दूर तक फैल सकता है। जोड़ को गोल या bevel में बदलना व्यूपोर्ट बढ़ाने से अधिक उपयुक्त हो सकता है, लेकिन केवल तभी जब इच्छित डिज़ाइन बना रहे।

कारण 3: स्केल या रूपांतरण से स्ट्रोक का रूप भ्रामक हो गया है

रूपांतरण ऑब्जेक्ट की ज्यामिति और उसके दिखाई देने वाले स्ट्रोक, दोनों को बदल सकता है। जिस रेखा की चौड़ाई बनाते समय के आकार पर ठीक थी, वह आयात के बाद बाल जैसी पतली हो सकती है, विशेषकर जब प्राप्त करने वाला ऐप इकाइयों या नेस्टेड रूपांतरणों को अलग तरीके से समझता है।

SVG में पाथ और उसके पैरेंट ग्रुप पर transform="scale(...)" की जाँच करें। दस्तावेज़ के viewBox, width और height की तुलना करें, फिर 100% ज़ूम और अंतिम भौतिक आकार पर परीक्षण करें। पूरा डिज़ाइन गलत आयामों पर आयात हो, तो मनमानी स्ट्रोक चौड़ाई से भरपाई करने के बजाय ज्ञात आकार वाले SVG के स्केल परीक्षण से दस्तावेज़ की मैपिंग सुधारें।

SVG में vector-effect="non-scaling-stroke" का भी समर्थन है। MDN के vector-effect संदर्भ के अनुसार, इसका सामान्य non-scaling-stroke मान रेंडर किए गए स्ट्रोक की चौड़ाई को तत्व के रूपांतरणों के साथ बदलने से रोकता है। यह इंटरफ़ेस आरेखों और नक्शों में उपयोगी हो सकता है; इच्छित आयातक में परिणाम जाँचें, क्योंकि ब्राउज़र के बाहर समर्थन ऐप के अनुसार बदलता है।

non-scaling-stroke को सार्वभौमिक समाधान मानकर न जोड़ें। तय करें कि रेखा को कलाकृति के साथ स्केल होना चाहिए या नहीं। प्रिंट के लिए लोगो बड़ा किया जाता है, तो आम तौर पर उसके स्ट्रोक भी बड़े होने चाहिए। नक्शे को ज़ूम करते समय रेखा की चौड़ाई 1 स्क्रीन पिक्सेल ही रखनी हो, तो स्केल न होने वाला स्ट्रोक जानबूझकर चुना गया हो सकता है।

कारण 4: गंतव्य ऐप उस दृश्य रूप को दोहरा नहीं सकता

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

एक डुप्लिकेट प्रति पर सुविधाएँ घटाकर परीक्षण करें:

1. साधारण स्ट्रोक को बनाए रखते हुए फ़िल्टर हटाएँ;
2. पैटर्न या ब्रश की जगह साधारण ठोस स्ट्रोक लगाएँ;
3. बदलती चौड़ाई हटाएँ;
4. नेस्टेड रूपांतरणों को समतल करें;
5. केवल उस ऑब्जेक्ट को न्यूनतम SVG के रूप में निर्यात करें;
6. उस फ़ाइल को गंतव्य ऐप में खोलें।

जिस पहले सरलीकरण से रेखा वापस दिखाई देती है, वह असमर्थित सुविधा की पहचान करता है। फिर आप पूरे दस्तावेज़ को समतल करने के बजाय ऐसा विकल्प चुन सकते हैं जो अलग-अलग ऐप में काम करे।

बाहरी CSS और संसाधन भी अलग-अलग ऐप में उपयोग करने के लिए जोखिम हैं। वेबसाइट में एम्बेड किया गया SVG पेज से क्लास नियम या कस्टम प्रॉपर्टी विरासत में ले सकता है, जबकि वही फ़ाइल अकेले खोलने पर ऐसा नहीं होता। दूसरी ओर, डेस्कटॉप संपादक उन सिलेक्टर को हटा सकता है जिन्हें वह अपने ऑब्जेक्ट मॉडल से जोड़ नहीं पाता। स्वतंत्र रूप से भेजी जाने वाली फ़ाइल में ऐसी स्व-समाहित स्टाइल इस्तेमाल करें जिसका लक्ष्य ऐप में आयात होना परीक्षण से साबित हो।

लाइव स्ट्रोक या आउटलाइन पाथ?

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

गंतव्य ऐप किसी आवश्यक ब्रश या बदलती चौड़ाई के दृश्य रूप को सुरक्षित न रख सके, या विक्रेता स्पष्ट रूप से भराव वाली ज्यामिति माँगे, तो भेजने वाली प्रति के स्ट्रोक आउटलाइन करें। Adobe का वस्तु विस्तार दस्तावेज़ स्ट्रोक को घटक वस्तुओं में बदलना बताता है।

लाइव स्ट्रोक वाली मास्टर फ़ाइल सुरक्षित रखें, क्योंकि एक्सपैंड करने से:

• नोड की संख्या और फ़ाइल का आकार बढ़ सकता है;
• चौड़ाई बदलने में अधिक समय लग सकता है;
• ओवरलैप जटिल ज्यामिति में बदल सकते हैं;
• अलग-अलग हिस्से बन सकते हैं जिन्हें जोड़ना आवश्यक हो;
• प्लॉटिंग, उत्कीर्णन या एनीमेशन में खुले पाथ का अर्थ बदल सकता है।

जब पेन प्लॉटर या उत्कीर्णन प्रक्रिया में टूल से केंद्र पाथ पर 1 बार चलने की अपेक्षा हो, तब एक्सपैंड करना विशेष रूप से जोखिमपूर्ण है। आउटलाइन किया गया स्ट्रोक मशीन को 2 सीमाएँ देता है। इस प्रक्रिया के लिए सिंगल-लाइन SVG की मार्गदर्शिका देखें।

गंतव्य के अनुसार समाधान

उसी गंतव्य में परीक्षण करें जहाँ फ़ाइल इस्तेमाल होगी, केवल उसी विक्रेता के किसी दूसरे संपादक में नहीं। ब्राउज़र, डिज़ाइन कैनवास, प्रिंट प्रक्रिया, कटर और CAD आयातक SVG की अलग-अलग सुविधाओं का समर्थन कर सकते हैं।

सुरक्षित सुधार क्रम

पहले वे जाँचें करें जिन्हें वापस लिया जा सकता है, फिर संरचना बदलने की ओर बढ़ें:

1. संपादन योग्य स्रोत सुरक्षित रखें और एक डुप्लिकेट प्रति बनाएँ;
2. पुष्टि करें कि ज्यामिति मौजूद है;
3. 2 रेंडरर के परिणामों की तुलना करें;
4. स्ट्रोक का रंग, चौड़ाई और अपारदर्शिता स्पष्ट रूप से सेट करके जाँचें;
5. पृष्ठभूमि से कंट्रास्ट और विरासत में मिली CSS की जाँच करें;
6. पेज की सीमाएँ, क्लिप, मास्क और नेस्टेड व्यूपोर्ट जाँचें;
7. रूपांतरण और अंतिम आकार पर रेंडरिंग जाँचें;
8. असमर्थित दृश्य रूपों को 1-1 करके सरल करें;
9. भेजने वाली प्रति में केवल आवश्यक स्ट्रोक आउटलाइन करें;
10. भेजे जाने वाले SVG को फिर खोलें और स्रोत से उसकी तुलना करें।

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

PerfectVector कहाँ उपयोगी है

PerfectVector केवल तब उपयोगी है जब मूल वेक्टर ज्यामिति खो गई हो या अनुपयोगी हो और सबसे अच्छा बचा हुआ स्रोत रास्टर छवि हो। यह किसी उपयुक्त सपाट लोगो, आइकन या चित्र को संपादन योग्य वेक्टर आकृतियों के रूप में दोबारा बना सकता है।

यह CSS सुधारता नहीं है, निर्यात में छूटे लाइव स्ट्रोक को लौटाता नहीं है और असमर्थित ब्रश को उसकी संपादन योग्य केंद्ररेखा सुरक्षित रखते हुए बदलता नहीं है। पाथ अब भी मौजूद हो, तो वेक्टर संपादक में उसका रंग, सीमाएँ, रूपांतरण या दृश्य रूप सुधारें। इससे स्क्रीनशॉट ट्रेस करने की तुलना में अधिक जानकारी बचती है।

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

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

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

SVG किनारे स्ट्रोक क्यों कटता है? स्ट्रोक केंद्र पाथ से बाहर फैलता है, इसलिए viewBox की सीमा पर मौजूद पाथ अपनी आधी स्ट्रोक चौड़ाई खो सकता है। सिरों, जोड़ों, फ़िल्टर, क्लिप और मास्क के लिए भी अतिरिक्त हाशिया आवश्यक हो सकता है। पाथ को अंदर ले जाएँ या पूरे दृश्य रूप के आसपास सोच-समझकर व्यूपोर्ट और क्लिप का आकार तय करें।

क्या मुझे निर्यात से पहले SVG स्ट्रोक एक्सपैंड करने चाहिए? केवल तब, जब गंतव्य ऐप स्ट्रोक के किसी आवश्यक दृश्य रूप को सुरक्षित न रख सके या स्पष्ट रूप से भराव वाली ज्यामिति माँगे। भेजने वाली प्रति एक्सपैंड करें और संपादन योग्य लाइव स्ट्रोक वाली मास्टर फ़ाइल सुरक्षित रखें। एक्सपैंड करने से ज्यामिति बढ़ती है, और जब प्लॉटर या उत्कीर्णन टूल को 1 केंद्ररेखा पर चलना हो, तब यह उपयुक्त नहीं है।

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

स्रोत

1. W3C — SVG 2 पेंटिंग — भराव, स्ट्रोक, स्ट्रोक की चौड़ाई, सिरे, जोड़ और वेक्टर प्रभाव परिभाषित करता है।
2. W3C — SVG 2 निर्देशांक प्रणालियाँ — व्यूपोर्ट, viewBox, इकाइयों और रूपांतरणों का दस्तावेज़ीकरण करता है।
3. MDN — vector-effect — non-scaling-stroke का व्यवहार समझाता है।
4. Adobe Illustrator — ऑब्जेक्ट को ग्रुप और एक्सपैंड करना — स्ट्रोक को संपादन योग्य घटक ऑब्जेक्ट में एक्सपैंड करने का दस्तावेज़ीकरण करता है।

---

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