लेखक: Claire Yoon10 मिनट का पठन

SVG में कन्वर्ट करते समय पारदर्शी बैकग्राउंड कैसे बनाए रखें

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

इस पेज पर

यही बात इसे इतना उलझाऊ बनाती है: SVG में डिफ़ॉल्ट रूप से कोई बैकग्राउंड होता ही नहीं। यह तब तक पारदर्शी रहता है जब तक कोई चीज़ आपके आर्टवर्क के पीछे ठोस शेप नहीं रख देती। इसलिए जब आपका कन्वर्ट किया हुआ SVG उसके चारों ओर सफेद बॉक्स के साथ दिखता है, तो पूछने लायक सवाल है: सफेद किसने जोड़ा? आम तौर पर यह तीन चीज़ों में से एक होती है: आपके डिजाइन में मौजूद कोई बैकग्राउंड शेप, कोई एक्सपोर्ट सेटिंग जो कैनवास को भर देती है, या ऐसा कन्वर्टर जिसने खाली हिस्से को खाली छोड़ने के बजाय उसे सफेद ब्लॉक की तरह ट्रेस कर दिया। समाधान इस पर निर्भर करता है कि आपके मामले में कौन सी वजह है, और इस पर भी कि आपकी मूल फाइल में सचमुच पारदर्शिता थी या नहीं। आइए इसे साफ करते हैं।

झटपट सार
  • SVG डिफ़ॉल्ट रूप से पारदर्शी होता है। सफेद बैकग्राउंड का मतलब है कि किसी चीज़ ने उसे जोड़ा है।
  • पारदर्शी PNG कन्वर्ट कर रहे हैं? ऐसा कन्वर्टर इस्तेमाल करें जो अल्फा चैनल को सही रखे, ताकि वह आपके सब्जेक्ट को ट्रेस करे और बाकी हिस्सा खाली छोड़े। PNG को SVG में कन्वर्ट करें और परिणाम जांचें।
  • JPG से शुरू कर रहे हैं? वह पारदर्शी नहीं हो सकता, इसलिए बनाए रखने के लिए कुछ है ही नहीं। पहले बैकग्राउंड हटाएं, फिर कन्वर्ट करें।
  • Illustrator या Inkscape से एक्सपोर्ट कर रहे हैं? अपने कैनवास पर मौजूद सफेद बैकग्राउंड रेक्टैंगल हटाएं और एक्सपोर्ट सेटिंग्स जांचें।
  • हमेशा जांचें: SVG को किसी रंगीन बैकग्राउंड पर रखें। अगर अब भी सफेद दिखता है, तो वहां कोई चीज़ मौजूद है।

पहले, सफेद असल में कौन जोड़ रहा है?

कुछ भी ठीक करने से पहले यह पता करें कि सफेद कहां से आ रहा है। यह तीन स्थितियों में से एक है, और हर स्थिति का समाधान अलग है।

आपकी स्थितियह सफेद क्यों हैसमाधान
पारदर्शी PNG को SVG में कन्वर्ट करनाकन्वर्टर ने खाली हिस्सा भर दिया, या उसे शेप की तरह ट्रेस कर दियाऐसा कन्वर्टर इस्तेमाल करें जो पारदर्शिता को सही रखे; उसने जोड़ा हो तो कोई भी अतिरिक्त बैकग्राउंड शेप हटाएं
JPG, या ठोस सफेद बैकग्राउंड वाले PNG को कन्वर्ट करनाबनाए रखने के लिए कभी कोई पारदर्शिता थी ही नहींपहले बैकग्राउंड हटाएं, फिर कन्वर्ट करें
Illustrator या Inkscape में डिजाइन किए गए SVG को एक्सपोर्ट करनाआपके कैनवास पर बैकग्राउंड रेक्टैंगल है, या कोई एक्सपोर्ट सेटिंग fill जोड़ रही हैबैकग्राउंड शेप हटाएं; एक्सपोर्ट करते समय transparent विकल्प जांचें
सफेद कहां से आता है
एक डायग्राम जो SVG में सफेद बैकग्राउंड के तीन स्रोत दिखाता है: बैकग्राउंड रेक्टैंगल शेप, fill जोड़ने वाली एक्सपोर्ट सेटिंग, और खाली हिस्से को सफेद ब्लॉक की तरह ट्रेस करने वाला कन्वर्टर
SVG की शुरुआत पारदर्शी होती है। सफेद किसी बैकग्राउंड शेप, एक्सपोर्ट सेटिंग, या लापरवाह ट्रेस से अंदर आ जाता है।

बीच वाली पंक्ति सबसे ज्यादा लोगों को उलझाती है, इसलिए वहीं से शुरू करें।

अगर आपकी फाइल सच में पारदर्शी नहीं है, तो कोई कन्वर्टर इसे ठीक नहीं कर सकता

यह वही हिस्सा है जिसे फोरम अक्सर छोड़ देते हैं। JPG कभी भी पारदर्शिता स्टोर नहीं कर सकता। अगर आपका लोगो JPG है, तो उसमें ठोस बैकग्राउंड पिक्सेल्स में ही बेक्ड होता है, भले ही वह बैकग्राउंड सफेद हो और "कुछ नहीं" जैसा दिखे। उसे SVG में कन्वर्ट करने से वह हटेगा नहीं। ट्रेस या तो बैकग्राउंड को एक शेप के रूप में शामिल करेगा, या उसी के ऊपर बैठ जाएगा। (JPG को कन्वर्ट करना सामान्य तौर पर थोड़ा अलग काम है, जिसे JPG को SVG में कैसे कन्वर्ट करें में समझाया गया है।)

कुछ PNG में भी यही समस्या होती है। PNG पारदर्शिता, यानी अल्फा चैनल, स्टोर कर सकता है, लेकिन उनमें से कई साधारण सफेद fill के साथ सेव किए गए होते हैं। अगर आपको पक्का नहीं है कि आपके पास कौन सा है, तो फाइल को गहरे बैकग्राउंड पर खोलें। क्या आपके लोगो के चारों ओर सफेद रेक्टैंगल दिख रहा है? तो यह पारदर्शी नहीं है। यह सिर्फ सफेद पेज पर वैसा दिख रहा था।

दोनों मामलों में समाधान एक ही है: कन्वर्ट करने से पहले बैकग्राउंड हटाएं, ताकि कन्वर्टर के पास काम करने के लिए वास्तविक पारदर्शिता हो। किसी भी फोटो एडिटर में सब्जेक्ट को cut out करें, पारदर्शी PNG एक्सपोर्ट करें, फिर उसे ट्रेस करें। (PNG vs SVG समझाता है कि PNG पारदर्शिता क्यों रख सकता है और JPG क्यों नहीं।)

असली पारदर्शी PNG को SVG में कन्वर्ट करना

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

  • वह पारदर्शी हिस्से को सफेद से भर देता है, जिससे आपको ठोस बॉक्स मिल जाता है।
  • वह पारदर्शी हिस्से के किनारे को उसके अपने पाथ की तरह ट्रेस कर देता है, जिससे आपके डिजाइन के चारों ओर एक अदृश्य लेकिन असली रेक्टैंगल बन जाता है, जो उस पल दिखने लगता है जब आप उसे रंगीन बैकग्राउंड पर रखते हैं या कटिंग मशीन पर भेजते हैं। मेकर्स इससे लगातार टकराते हैं। यह वही Cricut डिजाइन के चारों ओर अतिरिक्त बॉक्स वाली समस्या है।

इसलिए सही तरीका है कि ऐसे टूल से कन्वर्ट करें जो अल्फा चैनल को साफ तरीके से संभाले, फिर उसे जांचें (इसके बारे में नीचे और है)। पारदर्शी लोगो इसका सबसे आम उदाहरण है।

PerfectVector के साथ यह कैसा दिखता है

PerfectVector आपके PNG की पारदर्शिता पढ़ता है और केवल वही ट्रेस करता है जो वास्तव में मौजूद है। आपके लोगो का दिखने वाला हिस्सा साफ, एडिटेबल वेक्टर पाथ में बदलता है, और पारदर्शी हिस्सा पारदर्शी ही रहता है: कोई सफेद बॉक्स नहीं, कोई छिपा हुआ बाउंडिंग रेक्टैंगल नहीं। परिणाम किसी भी रंगीन बैकग्राउंड, वेबसाइट, स्टिकर शीट, Cricut mat पर रखा जा सकता है, और पीछे का रंग साफ दिखाई देता है। आप अपना पारदर्शी PNG कन्वर्ट कर सकते हैं और कुछ सेकंड में उसे रंगीन बैकड्रॉप पर जांच सकते हैं। शुरुआती कन्वर्जन मुफ्त हैं, क्रेडिट कार्ड की जरूरत नहीं।

हालांकि साफ-साफ कहें तो: PerfectVector वही पारदर्शिता बनाए रखता है जो पहले से आपकी फाइल में है। यह ऐसी पारदर्शिता बना नहीं सकता जो कभी थी ही नहीं। अगर आपका स्रोत JPG है या सफेद fill वाला PNG है, तो ऊपर बताए अनुसार पहले बैकग्राउंड cut out करें, और फिर कन्वर्जन साफ रहेगा।

सफेद बॉक्स
एक लोगो जिसे SVG में कन्वर्ट किया गया है और उसके पीछे अनचाहा सफेद बॉक्स है, टील बैकग्राउंड पर दिखाया गया
लापरवाह ट्रेस ने सफेद रेक्टैंगल छोड़ दिया, जो रंगीन बैकग्राउंड पर रखते ही साफ दिखता है।
पारदर्शी
वही लोगो SVG में कन्वर्ट किया गया है और बैकग्राउंड पारदर्शी रखा गया है, जिससे टील रंग साफ दिखाई दे रहा है
पारदर्शिता बनी रही: रंगीन बैकग्राउंड सीधे दिखाई देता है।

कैसे जांचें कि यह सच में काम कर गया

थंबनेल पर भरोसा न करें। सफेद पेज पर पारदर्शी SVG और सफेद-बैकग्राउंड वाला SVG एक जैसे दिखते हैं, और यही वजह है कि लोग सोचते हैं कि सब ठीक है, जब तक कि बाद में दिक्कत सामने नहीं आती। दो जल्दी जांचें:

  • इसे रंग पर रखें। SVG को अपने ब्राउजर, Figma, Canva, या Design Space में किसी रंगीन बैकग्राउंड पर रखें। असली पारदर्शिता रंग को दिखने देती है। सफेद बॉक्स ऐसा नहीं करेगा।
  • अतिरिक्त रेक्टैंगल खोजें। SVG खोलें और शेप्स चुनें। अगर आपके आर्टवर्क के पीछे पूरे आकार का रेक्टैंगल बैठा है, तो उसे हटाएं। ज्यादातर "यह अब भी सफेद है" मामलों में वही असली वजह होता है।

आपके डिजाइन किए हुए SVG को एक्सपोर्ट करना (दूसरी स्थिति)

अगर आप किसी रास्टर को कन्वर्ट नहीं कर रहे, बल्कि खुद बनाए गए SVG को एक्सपोर्ट कर रहे हैं, तो सफेद आम तौर पर कन्वर्टर से नहीं, आपके अपने कैनवास से आता है:

  • Illustrator: बैकग्राउंड की तरह काम कर रहे किसी भी सफेद रेक्टैंगल को हटाएं। आर्टबोर्ड का रंग वैसे भी एक्सपोर्ट नहीं होता, इसलिए बैकग्राउंड शेप हटने के बाद SVG के रूप में सेव या एक्सपोर्ट करें और वह पारदर्शी रहेगा।
  • Inkscape: पक्का करें कि कोई बैकग्राउंड रेक्टैंगल चुना हुआ नहीं है, अगर आपने कोई मूल रास्टर ट्रेस किया था तो उसे hide या delete करें, और वेक्टर एक्सपोर्ट करें। Inkscape SVG तब तक पारदर्शी रहते हैं जब तक आपने कोई fill नहीं जोड़ा।

किसी भी तरह, ऊपर वाला नियम अब भी लागू है: SVG में तब तक कोई बैकग्राउंड नहीं होता जब तक आप उसे एक न दें।

FAQ

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

मैं पारदर्शी बैकग्राउंड के साथ SVG कैसे सेव करूं? पक्का करें कि आपके डिजाइन में कोई बैकग्राउंड रेक्टैंगल नहीं है, फिर बिना बैकग्राउंड fill के एक्सपोर्ट करें (ज्यादातर टूल डिफ़ॉल्ट रूप से पारदर्शी एक्सपोर्ट करते हैं)। बाद में SVG को रंगीन बैकग्राउंड पर रखकर जांचें। अगर सफेद दिखे, तो बैकग्राउंड शेप खोजकर हटाएं।

कन्वर्ट करने के बाद मेरे SVG में सफेद बैकग्राउंड क्यों है? या तो कन्वर्टर ने सफेद fill जोड़ दिया या खाली हिस्से को शेप की तरह ट्रेस कर दिया, या आपकी मूल फाइल असल में पारदर्शी थी ही नहीं। पहले स्रोत जांचें: अगर यह JPG है या सफेद fill वाला PNG है, तो बनाए रखने के लिए कोई पारदर्शिता नहीं थी, और कन्वर्ट करने से पहले आपको बैकग्राउंड हटाना होगा।

क्या मैं JPG को पारदर्शी बैकग्राउंड वाले SVG में कन्वर्ट कर सकता हूं? सीधे नहीं, क्योंकि JPG पारदर्शिता स्टोर नहीं कर सकता। उसका बैकग्राउंड पिक्सेल्स में बेक्ड होता है। पहले बैकग्राउंड हटाएं (सब्जेक्ट cut out करें और पारदर्शी PNG एक्सपोर्ट करें), फिर उसे SVG में कन्वर्ट करें।

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

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


क्या आपका पारदर्शी लोगो PNG के रूप में अटका हुआ है? इसे ऐसे साफ SVG में बदलें जो उसकी पारदर्शिता बनाए रखे, फिर उसे रंगीन बैकग्राउंड पर रखकर पुष्टि करें कि वह सही आया है।

Blog से और

परफ़ेक्ट वेक्टर बनाने
के लिए तैयार हैं?