क्या PNG से SVG में ट्रांसपेरेंट बैकग्राउंड बना रहता है?

ट्रांसपेरेंट इनपुट, ट्रांसपेरेंट आउटपुट

PNG और WebP में अल्फ़ा चैनल रखा जा सकता है — हर पिक्सेल की ओपेसिटी। JPEG में नहीं। जब आप PNG या WebP अपलोड करते हैं, तो ट्रेसर अल्फ़ा को पढ़ता है और सिर्फ़ उन्हीं पिक्सेल को रंग देता है जो आधे से ज़्यादा अपारदर्शी हों। उससे कम वाले पिक्सेल किसी रंग में नहीं आते और उनसे कोई पाथ नहीं बनता, इसलिए कटआउट लोगो के आसपास की खाली जगह SVG में भी खाली रहती है। आउटपुट <svg> में कोई बैकग्राउंड रेक्टेंगल नहीं होता; आप इसे जिस भी चीज़ पर रखें, वह पीछे से दिखती है।

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

आधे-ट्रांसपेरेंट पिक्सेल दो स्टेप में संभाले जाते हैं। पहला, आधी ओपेसिटी की सीमा पर हर पिक्सेल या तो किसी रंग में आता है या नहीं: लोगो का हल्का, एंटी-एलियास किया हुआ किनारा वहीं कटता है, इसलिए आउटलाइन वहां बनती है जहां किनारा आधा ढका हो। दूसरा, हर रंग अपनी स्याही की ओपेसिटी रखता है, जो हल्के किनारे पर नहीं, बल्कि उसकी शेप के अंदर नापी जाती है। ठोस स्याही पूरी अपारदर्शी लिखी जाती है, इसलिए ट्रांसपेरेंट लोगो पर काला टेक्स्ट काला ही रहता है, हल्का ग्रे नहीं होता। जो रंग सोर्स में आर-पार दिखता है — जैसे हल्का ड्रॉप शैडो या रंगीन ओवरले — वह उसी ओपेसिटी के साथ fill-opacity के रूप में लिखा जाता है, इसलिए शैडो एक फ़्लैट, बराबर आधी-ट्रांसपेरेंट शेप के रूप में ट्रेस होता है (जैसे 54 % ओपेसिटी पर)। ट्रेस जो नहीं रख सकता, वह है फ़ेड खुद: शैडो का हल्का बाहरी हिस्सा, जो आधी ओपेसिटी से कम है, छूट जाता है, और जो शेप बनती है उसका किनारा धीरे-धीरे फ़ेड होने की जगह साफ़ होता है और ओपेसिटी एक जैसी।

हमारे ऊदबिलाव लोगो का ट्रांसपेरेंट PNG, जिसमें हल्का ड्रॉप शैडो जोड़ा गया है (बाएं), उससे ट्रेस किया गया SVG चेकरबोर्ड पर (बीच में) और एक रंग पर (दाएं)। कोई बैकग्राउंड बॉक्स नहीं है, आंखों का सफ़ेद हिस्सा बचा है, और शैडो 60 % ओपेसिटी वाली फ़्लैट शेप बन गया, जहां PNG में फ़ेड था वहां साफ़ किनारों के साथ।

बैकग्राउंड हटाने के बाद भी सफ़ेद डिटेल क्यों बची रहती हैं

“बैकग्राउंड हटाएं” तस्वीर के किनारों से अंदर की ओर काम करता है। यह इमेज के बॉर्डर के साथ एक पट्टी देखता है, उन एक या दो रंगों को लेता है जो उसका कम से कम 15 % हिस्सा ढकते हैं, और किनारों से शुरू करके उन रंगों के — और उनसे मिलते-जुलते रंगों के — हर जुड़े हुए पिक्सेल को ट्रांसपेरेंट मार्क करता है। फिर यह वह हल्की झालर भी साफ़ करता है जहां वह बैकग्राउंड आर्टवर्क से मिलता है (हटाए गए हिस्से के ठीक बगल के पिक्सेल, जो अब भी बैकग्राउंड के रंग के करीब हैं), और वे छोटे धब्बे भी जो इमेज के किनारे को छूते हैं। जो कुछ बॉर्डर से जुड़ा नहीं है, उसे छुआ नहीं जाता — “A” के अंदर का सफ़ेद हिस्सा, बैज की सफ़ेद चमक, दो धारियों के बीच का सफ़ेद गैप।

ऐसा जानबूझकर किया गया है: गहरे आर्टवर्क से घिरी सफ़ेद लोगो डिटेल बैकग्राउंड हटाने के बाद भी रहती है। अगर आपने दूसरे टूल को हर सफ़ेद पिक्सेल मिटाते देखा है, तो वह अलग तरीका है (कलर कीइंग), और इसी वजह से कहीं और “बैकग्राउंड हटाने” पर डिज़ाइन खोखला हो सकता है।

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

सफ़ेद बैकग्राउंड पर सफ़ेद आर्टवर्क

ट्रेसर एक जैसे रंगों को अलग नहीं कर सकता। सफ़ेद कैनवस पर एक्सपोर्ट किया गया सफ़ेद आइकन ट्रेसर के लिए एक ही सफ़ेद हिस्सा है, और नतीजा या तो एक सफ़ेद रेक्टेंगल होता है या खाली कन्वर्ज़न (“No vector paths could be produced”)। अपलोड करने से पहले इसे ठीक करें:

1. किसी भी इमेज एडिटर में आइकन को एक ठोस, साफ़ कॉन्ट्रास्ट वाले बैकग्राउंड पर रखें (गहरा ग्रे या ऐसा रंग जो आइकन में न हो)।
2. बैकग्राउंड हटाएं चालू करके अपलोड करें। बैकग्राउंड किनारों से जुड़ा है, इसलिए हट जाता है; सफ़ेद आइकन बना रहता है।
3. अगर आइकन में घिरे हुए ट्रांसपेरेंट हिस्से हैं जिन्हें ट्रांसपेरेंट ही रहना है, तो उसे असली अल्फ़ा वाले PNG के रूप में एक्सपोर्ट करें, ताकि बैकग्राउंड की ज़रूरत ही न पड़े।

नतीजे में अल्फ़ा जांचें

• डाउनलोड किया गया SVG ब्राउज़र में खोलें: ट्रांसपेरेंट हिस्सों से पेज का बैकग्राउंड (डिफ़ॉल्ट रूप से सफ़ेद) दिखता है।
• SVG से PNG टूल से इसे रास्टर बनाएं — आउटपुट RGBA होता है और ट्रांसपेरेंसी बनी रहती है।
• फ़ाइल को किसी टेक्स्ट एडिटर में खोलें: पूरे साइज़ का कोई बैकग्राउंड पाथ नहीं होता, जब तक आपके सोर्स में अपारदर्शी बैकग्राउंड न हो और बैकग्राउंड हटाना बंद न रहा हो।

जानने लायक जुड़ा हुआ व्यवहार

• लाइन आर्ट / स्टेंसिल प्रीसेट हर पिक्सेल को उसकी चमक से परखता है, जैसा वह सफ़ेद कागज़ पर दिखेगा: गहरा काली स्याही बनता है, हल्का सफ़ेद कागज़, और ट्रांसपेरेंट हिस्से ट्रांसपेरेंट रहते हैं। इसलिए सफ़ेद आर्टवर्क स्याही नहीं, सफ़ेद कागज़ बनता है, और ट्रांसपेरेंट बैकग्राउंड पर गहरी लाइन का आधा-ट्रांसपेरेंट किनारा फीके घेरे में बदलने की जगह छोड़ दिया जाता है।
• प्रीव्यू PNG पर वॉटरमार्क होता है और वह रास्टर है; सिर्फ़ अनलॉक किए गए SVG में वेक्टर पाथ और असली ट्रांसपेरेंसी होती है।