एक्सपोर्ट के बाद SVG के रंग क्यों बदलते हैं: कारण पहचानें

एक्सपोर्ट के बाद SVG का रंग तब बदलता है जब स्रोत का दिखाई देने वाला रूप और दी गई फ़ाइल अलग-अलग तरीकों से समझे जा रहे हों। एक्सपोर्टर रंग मानों को बदल सकता है। कोई वेबसाइट CSS के ज़रिए fill को बदल सकती है या पैरेंट से currentColor का मान ले सकती है। ग्रेडिएंट, अपारदर्शिता सेटिंग, ब्लेंड मोड या फ़िल्टर ऐसी सुविधा पर निर्भर हो सकता है जिसे गंतव्य अलग तरह से संभालता है। कभी-कभी एक्सपोर्ट किया गया मार्कअप सही होता है और केवल एक इम्पोर्टर अलग परिणाम देता है।

हर हेक्स मान बदलने से शुरुआत न करें। पहले वह बिंदु खोजें जहाँ रूप बदलता है। इससे पता चलेगा कि SVG की मरम्मत करनी है, एक्सपोर्ट बदलना है, डिलीवरी की कॉपी सरल बनानी है या चित्र को दूसरे फ़ॉर्मेट में रखना है।

लक्षण के अनुसार पहली जाँच चुनें

पहले कहाँ देखें

5 मिनट में समस्या अलग करें

1. संपादन योग्य मास्टर को न बदलें

जाँच के लिए एक डुप्लिकेट सहेजें। एकमात्र संपादन योग्य कॉपी में प्रभावों को समतल न करें, हर ऑब्जेक्ट को आउटलाइन में न बदलें और रंग न बदलें। ये बदलाव कारण छिपा सकते हैं और बाद में फ़ाइल संशोधित करना कठिन बना सकते हैं।

2. एक्सपोर्ट किए SVG को 2 जगह खोलें

तुलना के निष्पक्ष आधार के लिए वर्तमान ब्राउज़र इस्तेमाल करें, फिर उसी फ़ाइल को वास्तविक गंतव्य में खोलें या इम्पोर्ट करें। एक जैसी पृष्ठभूमि पर दोनों की तुलना स्रोत चित्र से करें।

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

ब्राउज़र तुलना का उपयोगी आधार है; यह प्रमाण नहीं कि हर डिज़ाइन या उत्पादन ऐप वही सुविधाएँ इम्पोर्ट करेगा।

3. रंग भरने के निर्देश जाँचें

SVG को टेक्स्ट एडिटर में खोलें और ये खोजें:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

अभी आप संरचना खोज रहे हैं, उसे दोबारा लिख नहीं रहे। सीधे लिखा fill="#2F6BFF", fill="currentColor" या fill="url(#paint0)" से अलग जाँच दिशा बताता है।

यदि आप पहली बार SVG मार्कअप खोल रहे हैं, तो SVG संपादित करने की विस्तृत मार्गदर्शिका कोड और दृश्य एडिटर के तरीके समझाती है।

4. एक विफल ऑब्जेक्ट सरल करें

सबसे छोटे ऐसे ऑब्जेक्ट को नए दस्तावेज़ में कॉपी करके एक्सपोर्ट करें जिसका रंग अब भी बदलता है। एक बार में एक सुविधा हटाएँ: पहले फ़िल्टर, फिर ब्लेंड मोड, फिर ग्रेडिएंट, फिर समूह की अपारदर्शिता। जिस सुविधा को हटाते ही परिणाम ठीक होता है, वही असमर्थित या संदर्भ पर निर्भर सुविधा है।

यह सीमित जाँच पूरे चित्र को समतल करने से सुरक्षित है, क्योंकि इससे आपको डिलीवरी की एक स्पष्ट सीमा पता चलती है।

कारण 1: एक्सपोर्टर ने रंग-स्थान बदला

हेक्स रंग और परिचित rgb() सिंटैक्स sRGB रंग बताते हैं। आधुनिक CSS, color() के ज़रिए Display P3 जैसे अधिक व्यापक रंग-सरगम वाले रंग-स्थान भी व्यक्त कर सकती है, जैसा CSS Color Module Level 4 में परिभाषित है। इसलिए डिज़ाइन ऐप में ऐसा स्रोत रंग हो सकता है जिसे sRGB हेक्स मान बनने से पहले रूपांतरित करना पड़े; इससे संख्याएँ बदल सकती हैं या सीमा से बाहर का रंग सीमित हो सकता है।

समस्या इस क्रम में जाँचें:

1. स्रोत दस्तावेज़ का रंग-स्थान और चुने ऑब्जेक्ट का संख्यात्मक मान नोट करें;
2. बिना अपारदर्शिता या प्रभाव वाला एक सपाट ऑब्जेक्ट एक्सपोर्ट करें;
3. SVG को टेक्स्ट के रूप में खोलकर लिखा हुआ fill या stroke पढ़ें;
4. एक्सपोर्ट की संख्या की तुलना स्रोत से करें;
5. वही फ़ाइल गंतव्य में जाँचें।

यदि फ़ाइल में मान बदल गया है, तो रूपांतरण एक्सपोर्ट के दौरान हुआ। लक्ष्य रंग-स्थान सोच-समझकर चुनें और फिर एक्सपोर्ट करें। यदि मान समान है लेकिन रूप अलग है, तो CSS, प्रभाव, पृष्ठभूमि या इम्पोर्टर के व्यवहार की जाँच करें।

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

कारण 2: currentColor या CSS ने रंग बदला

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

currentColor जानबूझकर अप्रत्यक्ष रंग देता है। MDN का SVG रंग संदर्भ बताता है कि यह fill, stroke, ग्रेडिएंट स्टॉप और अन्य रंग गुणों को मान देता है। आसपास के टेक्स्ट का रंग अपनाने वाले आइकन के लिए यह उपयोगी है, लेकिन इसका अर्थ यह भी है कि उस बिंदु पर फ़ाइल का कोई स्थायी रंग नहीं है।

डिलीवरी की इन दो रणनीतियों में से एक अपनाएँ:

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

कई इनलाइन SVG में paint0, clip0 या gradient1 जैसे ID हों तो उन्हें अद्वितीय बनाएँ और उनके संदर्भ साथ में अपडेट करें। केवल id न बदलें; हर url(#id) अब भी सही परिभाषा तक पहुँचना चाहिए।

यदि आपका लक्ष्य एक्सपोर्ट से बदला रंग ठीक करने के बजाय जानबूझकर रंग बदलना है, तो SVG के रंग सुरक्षित ढंग से बदलने की अलग मार्गदर्शिका अपनाएँ।

कारण 3: ग्रेडिएंट या रंग संदर्भ टूट गया

SVG ग्रेडिएंट और पैटर्न रंग देने वाली परिभाषाएँ हैं। आकृति fill="url(#brandGradient)" जैसे संदर्भ से उन्हें बुलाती है, जबकि ग्रेडिएंट परिभाषा आम तौर पर <defs> में रहती है। SVG 2 रंग-सर्वर विनिर्देश यह भी परिभाषित करता है कि ग्रेडिएंट निर्देशांक और रूपांतरण परिणाम को कैसे प्रभावित करते हैं।

तीन जाँचें अधिकांश संरचनात्मक विफलताएँ पकड़ती हैं:

1. हर url(#id) की मिलती हुई परिभाषा हो;
2. कई SVG को एक पृष्ठ या दस्तावेज़ में जोड़ने के बाद ID अद्वितीय रहें;
3. गंतव्य फ़ाइल के रंग प्रकार, इकाइयाँ, रूपांतरण और ग्रेडिएंट स्टॉप सुरक्षित रखे।

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

कारण 4: अपारदर्शिता और ब्लेंडिंग ने दृश्य परिणाम बदला

दिखाई देने वाला पिक्सेल हमेशा संग्रहीत भराव नहीं होता। fill-opacity आकृति के भराव को प्रभावित करता है, समूह के बच्चों को मिलाने के बाद समूह की opacity लागू होती है, और ब्लेंड मोड स्रोत को उसकी पृष्ठभूमि के साथ मिलाता है। W3C कम्पोज़िटिंग और ब्लेंडिंग विनिर्देश रेंडरिंग का क्रम और पृष्ठभूमि पर निर्भर ब्लेंड सूत्र परिभाषित करता है।

इसके दो व्यावहारिक परिणाम हैं:

• कोई रंग मान बदले बिना वही SVG सफ़ेद, काले या रंगीन पृष्ठ पर अलग दिख सकता है।
• समूह की अपारदर्शिता को समूह से हटाकर हर बच्चे पर लगाने से ओवरलैप बदल सकता है, क्योंकि कम्पोज़िटिंग का क्रम अलग हो जाता है।

वास्तविक पृष्ठभूमि पर जाँचें। फिर डुप्लिकेट में mix-blend-mode, फ़िल्टर, मास्क और समूह की अपारदर्शिता एक-एक करके हटाएँ। यदि गंतव्य कोई आवश्यक प्रभाव सुरक्षित नहीं रख सकता, तो सरल वेक्टर प्रस्तुति या समतल डिलीवरी एसेट में से चुनें। डिज़ाइन के असंबंधित हिस्से समतल न करें।

चित्र के पीछे सफ़ेद या रंगीन आयत एक अलग मामला है। पारदर्शी पृष्ठभूमि वाले SVG की मार्गदर्शिका बताती है कि वास्तविक पृष्ठभूमि आकृति और खाली कैनवास में अंतर कैसे करें।

कारण 5: गंतव्य ने SVG का केवल कुछ हिस्सा इम्पोर्ट किया

SVG वेब मानक है, लेकिन कई डेस्कटॉप, प्रिंट, कटिंग, प्रस्तुति और साइट बनाने वाले टूल उसे अपने ऑब्जेक्ट मॉडल में बदलते हैं। समर्थन ऐप और रिलीज़ के अनुसार अलग हो सकता है। जब तक वर्तमान आधिकारिक दस्तावेज़ ऐसा न कहें और आपका सटीक संस्करण उससे न मिले, तब तक “यह ऐप कभी ग्रेडिएंट का समर्थन नहीं करता” जैसा नियम न मानें।

इसके बजाय नियंत्रित इम्पोर्ट जाँच करें:

1. ठोस भराव वाला एक पाथ इम्पोर्ट करें;
2. मूल ग्रेडिएंट जोड़ें;
3. अपारदर्शिता जोड़ें;
4. ब्लेंड या फ़िल्टर जोड़ें;
5. परिणाम बदलने वाले पहले संस्करण पर रुकें।

अब उस गंतव्य की सीमा पता है। पूरा मास्टर रखें और जाँची गई सीमा के भीतर रहने वाली डिलीवरी कॉपी एक्सपोर्ट करें। यदि स्ट्रोक गायब होते हैं, तो हर लाइन को भराव में बदलने के बजाय स्ट्रोक के एक्सपोर्ट की विशेष जाँच अपनाएँ।

सबसे छोटा सुरक्षित सुधार चुनें

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

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

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

डिलीवरी जाँच सूची

• संपादन योग्य मास्टर रखें और डुप्लिकेट में सुधार करें।
• समान पृष्ठभूमि पर एक्सपोर्ट फ़ाइल की ब्राउज़र और वास्तविक गंतव्य में तुलना करें।
• जाँचें कि लिखे हुए fill और stroke मान बदले हैं या नहीं।
• currentColor, सामान्य क्लास और दोहराए गए ID खोजें।
• हर url(#id) संदर्भ का उसकी परिभाषा से मिलान करें।
• समूह की अपारदर्शिता, ब्लेंड मोड, फ़िल्टर और मास्क अलग-अलग जाँचें।
• केवल उस सुविधा को सरल करें जिसे गंतव्य दोहरा नहीं सकता।
• पिछले संस्करण की जगह देने से पहले अंतिम डिलीवरी फ़ाइल फिर खोलें या इम्पोर्ट करें।

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

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

क्या SVG फ़ाइलें हमेशा RGB होती हैं? सामान्य हेक्स और rgb() रंग sRGB होते हैं, जबकि आधुनिक CSS Display P3 जैसे स्थान भी व्यक्त कर सकती है। डिज़ाइन और प्रिंट ऐप एक्सपोर्ट या इम्पोर्ट के दौरान उन रंगों को बदल सकते हैं। लिखा हुआ रंग जाँचें और CMYK या स्पॉट रंग वाले काम में प्रिंटर का माँगा उत्पादन फ़ॉर्मेट इस्तेमाल करें।

एक्सपोर्ट के बाद मेरा SVG काला क्यों हो गया? जाँचें कि फ़ाइल currentColor इस्तेमाल करती है, कोई CSS नियम खो गया है या गायब ग्रेडिएंट अथवा रंग ID का संदर्भ देती है। काला रंग मूल भराव बदलने के बजाय विरासत में मिला रंग या वैकल्पिक परिणाम का लक्षण हो सकता है। स्वतंत्र फ़ाइल की तुलना एम्बेड या इम्पोर्ट किए संस्करण से करें।

रंग गलत दिखने पर क्या हर हेक्स मान बदल देना चाहिए? नहीं। पहले पता करें कि एक्सपोर्ट में मान बदले हैं या नहीं। यदि संख्याएँ सही हैं, तो उन्हें बदलने से CSS, रंग संदर्भ, ब्लेंड, पृष्ठभूमि या इम्पोर्टर की समस्या छिप सकती है और फ़ाइल दूसरी जगह कम सटीक हो सकती है।

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

स्रोत

1. W3C — SVG 2 स्टाइलिंग — SVG में CSS स्टाइलिंग, क्लास और स्टाइल एट्रिब्यूट, प्रस्तुति एट्रिब्यूट, कैस्केड व्यवहार और विरासत परिभाषित करता है।
2. MDN — SVG का color एट्रिब्यूट — बताता है कि currentColor भराव, स्ट्रोक, ग्रेडिएंट स्टॉप और संबंधित गुणों को रंग मान कैसे देता है।
3. W3C — SVG 2 रंग-सर्वर — रैखिक और त्रिज्यीय ग्रेडिएंट, रंग संदर्भ, निर्देशांक प्रणाली, रूपांतरण और रंग इंटरपोलेशन परिभाषित करता है।
4. W3C — CSS Color Module Level 4 — sRGB रंग सिंटैक्स और Display P3 समेत अधिक व्यापक रंग-सरगम वाले पूर्वनिर्धारित रंग-स्थान परिभाषित करता है।
5. W3C — कम्पोज़िटिंग और ब्लेंडिंग स्तर 1 — SVG और CSS के लिए अपारदर्शिता समूह, कम्पोज़िटिंग क्रम, पृष्ठभूमि और ब्लेंड मोड परिभाषित करता है।

यदि बचा हुआ सबसे अच्छा स्रोत PNG या JPG है, तो PerfectVector से उसे SVG के रूप में फिर बनाएँ, फिर पुरानी फ़ाइल बदलने से पहले स्वतंत्र ब्राउज़र और अंतिम गंतव्य में परिणाम की तुलना करें।