आपका SVG पिक्सेलयुक्त क्यों दिखता है और इसे कैसे सुधारें

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

30 सेकंड में कारण पहचानें

• 2 व्यूअर में बहुत अधिक ज़ूम करें (500%+)। हर व्यूअर में चौकोर पिक्सेल दिखना रास्टर सामग्री का संकेत है। यदि केवल एक ऐप में ऐसा दिखे, तो संभवतः वह ऐप पूर्वावलोकन को रास्टराइज़ कर रहा है।
• SVG को टेक्स्ट संपादक में खोलें। लंबे data:image/png;base64,… डेटा वाला <image> टैग बताता है कि आपका “वेक्टर” दरअसल वेक्टर के रूप में पेश किया गया बिटमैप है।
• फ़ाइल की जाँच के आधार पर तय करें। ज़ूम करने से शक पैदा होता है; <image> तत्व या आयताकार इमेज ऑब्जेक्ट एम्बेड पिक्सेल की पुष्टि करता है।

कारण 1: आपके SVG के भीतर पिक्सेल हैं

यह एम्बेड इमेज वाली समस्या है। SVG एक कंटेनर फ़ॉर्मैट है, और SVG 2 विनिर्देश <image> तत्व के ज़रिए रास्टर सामग्री एम्बेड करने या उसका संदर्भ देने की अनुमति देता है। यदि आपको लिंक किए गए PNG, एम्बेड डेटा और भीतर मौजूद SVG के बीच अंतर पहचानना है, तो मिश्रित सामग्री वाले SVG की जाँच अपनाएँ। टूल इस क्षमता का कई तरह से इस्तेमाल कर सकते हैं:

• नकली रूपांतरण। कुछ “PNG से SVG” टूल कुछ भी ट्रेस नहीं करते। वे आपके बिटमैप को <image> टैग में लपेटकर .svg एक्सटेंशन के साथ लौटा देते हैं। उसका आकार बढ़ाने पर गुणवत्ता ठीक उतनी ही बिगड़ती है जितनी मूल PNG की, क्योंकि वह मूल PNG ही है।
• कठिन हिस्सों को रास्टराइज़ करने वाले निर्यात। डिज़ाइन ऐप जिन हिस्सों को पाथ में निर्यात कर सकते हैं, उन्हें पाथ बनाते हैं। जिन हिस्सों को नहीं कर सकते, उन्हें चुपचाप रास्टराइज़ कर देते हैं: ड्रॉप शैडो, धुंधले प्रभाव, ग्रेडिएंट मेश और इमेज भरण। इसलिए कोई लोगो हर जगह साफ़ दिखता है, लेकिन एक मोड़ या प्रभाव पर पिक्सेल दिखते हैं। यही “कुछ हिस्सा पिक्सेलयुक्त है” वाली पहेली डिज़ाइन फ़ोरम में अक्सर दिखाई देती है।
• फ़ोटो सामग्री। फ़ोटो साफ़ पाथ में नहीं बदल सकती, इसलिए फ़ोटो को SVG में “कन्वर्ट” करने वाले टूल अक्सर उसे एम्बेड कर देते हैं या सीमित रंगों वाला अनुमानित रूप बनाते हैं। नक्शे बनाने वाले टूल छायांकन की लेयर के लिए जानबूझकर ऐसा भी करते हैं। यह वैध इस्तेमाल है, क्योंकि छायांकन में स्वभावतः टोन लगातार बदलती रहती है।
• फ़ॉर्मैट के आवरण। किसी फ़ाइल में ऐसा वेक्टर डेटा हो सकता है जिसे एक ऐप पढ़ ले और दूसरा न पढ़ सके। जब ऐप को ऐसा डेटा मिलता है जिसे वह समझ नहीं सकता, तो वह फ़ाइल में पहले से मौजूद रास्टर पूर्वावलोकन इस्तेमाल करता है। इसलिए एक प्रोग्राम में पिक्सेल दिखते हैं, जबकि दूसरे में साफ़ वेक्टर दिखाई देते हैं।

पुष्टि कैसे करें: .svg को किसी भी टेक्स्ट संपादक में खोलें और <image खोजें। base64 डेटा समस्या का संकेत है। Inkscape या Illustrator में धुंधले हिस्से पर क्लिक करें: यदि पाथ के बजाय एक आयताकार “इमेज” ऑब्जेक्ट चुना जाता है, तो निष्कर्ष वही है। इसी जाँच से AI टूल और निर्यातकों की नकली SVG फ़ाइलें भी पकड़ी जाती हैं, और इसमें 1 मिनट से कम लगता है।

समाधान: पिक्सेल को पाथ बनाना होगा, यानी रास्टर सामग्री को वास्तव में वेक्टराइज़ करना होगा। मूल इमेज या एम्बेड इमेज को असली इमेज-से-वेक्टर कन्वर्टर से कन्वर्ट करें और <image> तत्व को ट्रेस किए गए परिणाम से बदलें। यदि एम्बेड सामग्री फ़ोटो है, तो वेक्टराइज़ेशन की अपनी सीमाएँ हैं। कभी-कभी सही समाधान यह स्वीकार करना होता है कि जहाँ रास्टर उपयुक्त है, वहाँ रास्टर ही रहे।

संकेत फ़ाइल में ही मौजूद है

कारण 2: फ़ाइल ठीक है, लेकिन व्यूअर रास्टराइज़ कर रहा है

यदि ब्राउज़र या Inkscape में पाथ साफ़ दिखते हैं, लेकिन किसी एक ऐप में चौकोर पिक्सेल दिखते हैं, तो फ़ाइल का संपादन रोक दें। समस्या उस ऐप की आयात या पूर्वावलोकन प्रक्रिया में है:

• कुछ ऐप की आयात प्रक्रियाएँ SVG को आयात या पूर्वावलोकन के आकार पर रास्टराइज़ करती हैं। बाद में उस कैश की गई इमेज का आकार बढ़ाने पर आप बिटमैप का आकार बढ़ा रहे होते हैं। ऐप में इसका समाधान लक्ष्य रिज़ॉल्यूशन पर आयात या रेंडर करना है।
• After Effects लेयर का रूपांतरण होने पर वेक्टर लेयर को लगातार रास्टराइज़ कर सकता है। Adobe वेक्टर लेयर के लिए Continuously Rasterize स्विच का विवरण देता है। यदि केवल कंपोज़िशन का पूर्वावलोकन खराब दिखता है, तो SVG बदलने से पहले पूर्वावलोकन रिज़ॉल्यूशन और लेयर स्विच की जाँच करें।
• Illustrator जानबूझकर कलाकृति को Pixel Preview में दिखा सकता है। यह निष्कर्ष निकालने से पहले कि पाथ स्वयं पिक्सेलयुक्त है, View > Pixel Preview बंद करें।
• थंबनेल और पूर्वावलोकन। फ़ाइल मैनेजर के थंबनेल और क्विक-लुक पूर्वावलोकन कम रिज़ॉल्यूशन वाले रास्टर रूप होते हैं। वे फ़ाइल की गुणवत्ता के बारे में कुछ नहीं बताते।

हर मामले में काम आने वाला परीक्षण है: उसी फ़ाइल को ब्राउज़र या Inkscape में खोलें। यदि वहाँ वह साफ़ दिखती है, तो SVG ठीक है और समाधान दूसरे ऐप की आयात या पूर्वावलोकन सेटिंग में है।

गेम एसेट के लिए यह मानने से पहले कि स्रोत में वेक्टर पाथ नहीं हैं, Godot में SVG आयात और रास्टराइज़ेशन की प्रक्रिया या आपके संपादक और UI सिस्टम के लिए Unity का SVG आयात तरीका देखें।

कारण 3: असली वेक्टर छोटे आकार में धुंधला दिखता है

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

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

कारण और समाधान एक नज़र में

अपने SVG में पिक्सेल आने से कैसे रोकें

बचाव मुख्यतः कन्वर्ट या निर्यात करते समय करना होता है। किसी SVG पर भरोसा करने से पहले टेक्स्ट संपादक में एक बार जाँचें: <path> तत्व अच्छा संकेत हैं; <image> डेटा वेक्टर नहीं है। इमेज कन्वर्ट करते समय ऐसा कन्वर्टर इस्तेमाल करें जो उसे लपेटने के बजाय ट्रेस करे, और अलग-अलग आकृतियाँ चुनकर परिणाम की पुष्टि करें। डिज़ाइन टूल से निर्यात करते समय पहले प्रभावों को पाथ में बदलकर समतल या विस्तृत करें, क्योंकि निर्यातक जिस चीज़ को वेक्टर में व्यक्त नहीं कर सकता, वह पिक्सेल के रूप में फ़ाइल में जाएगी। यह भी याद रखें कि SVG वास्तव में क्या है: एक्सटेंशन फ़ॉर्मैट का संकेत देता है, भीतर की सामग्री का नहीं।

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

PerfectVector इस समस्या से बचाता है: यह आपकी इमेज को असली पाथ में ट्रेस करता है, कभी केवल लपेटता नहीं। PNG या JPG अपलोड करें और आपको ऐसी आकृतियाँ मिलती हैं जिन्हें आप चुन सकते हैं, दोबारा रंग सकते हैं और जितना चाहें ज़ूम कर सकते हैं। हर रंग अपना अलग संपादन योग्य ऑब्जेक्ट होता है और फ़ाइल में कहीं भी <image> तत्व नहीं होता। यदि आपने अभी पाया है कि आपका “SVG” दरअसल वेक्टर के रूप में पेश किया गया बिटमैप था, तो मूल इमेज को सही ढंग से कन्वर्ट करें और आउटपुट पर वही टेक्स्ट संपादक वाली जाँच चलाएँ। एक बार यह अंतर देख लेना दोबारा इस समस्या में न फँसने का सबसे तेज़ तरीका है। शुरुआती रूपांतरण मुफ़्त हैं और क्रेडिट कार्ड की ज़रूरत नहीं है।

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

ज़ूम करने पर मेरा SVG पिक्सेलयुक्त क्यों दिखता है? केवल ज़ूम करना यह साबित नहीं करता कि SVG में पिक्सेल हैं, क्योंकि कुछ ऐप अपने पूर्वावलोकन रास्टराइज़ करते हैं। फ़ाइल को ब्राउज़र या Inkscape में खोलें, फिर उसके स्रोत में <image> तत्व खोजें या धुंधला हिस्सा चुनकर देखें कि क्या वह आयताकार इमेज ऑब्जेक्ट है। यदि इन जाँचों से एम्बेड रास्टर सामग्री की पुष्टि हो, तो उस सामग्री को वेक्टराइज़ करें और इमेज तत्व को बदलें।

मुझे कैसे पता चलेगा कि मेरे SVG में एम्बेड इमेज है? उसे किसी भी टेक्स्ट संपादक में खोलें और <image खोजें। लंबी data:image/png;base64 स्ट्रिंग फ़ाइल में एम्बेड बिटमैप है। आप Inkscape या Illustrator में धुंधले हिस्से पर क्लिक भी कर सकते हैं: यदि पाथ के बजाय एक आयताकार इमेज ऑब्जेक्ट चुना जाता है, तो इमेज एम्बेड है।

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

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

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

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

स्रोत

1. W3C: SVG 2 में एम्बेड सामग्री — SVG के <image> तत्व और SVG दस्तावेज़ के भीतर रास्टर सामग्री को परिभाषित करता है।
2. Adobe Illustrator: कलाकृति देखना — Pixel Preview और दूसरे डिस्प्ले मोड का विवरण देता है।
3. Adobe After Effects: लेयर — वेक्टर लेयर के लिए Continuously Rasterize स्विच का विवरण देता है।
4. Adobe Illustrator: पिक्सेल-सटीक कलाकृति बनाएँ — छोटे आकार की कलाकृति को पिक्सेल ग्रिड से मिलाने का तरीका समझाता है।

---

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