viewBox के अंकों को सीधे PNG की चौड़ाई और ऊंचाई न मानें। सबसे बड़े वास्तविक प्रदर्शन आकार से शुरू करें, मूल अनुपात बनाए रखें और डाउनलोड किए गए PNG को उसके अंतिम उपयोग स्थान पर जांचें।
SVG → PNG
SVG निर्देशांक और PNG पिक्सेल को अलग समझें
SVG आकृतियों, पाथ, टेक्स्ट और दूसरे तत्वों को निर्देशांक तथा ड्रॉइंग निर्देशों से वर्णित करता है। viewBox के चार मान एक अंदरूनी आयत का आरंभ बिंदु, चौड़ाई और ऊंचाई बताते हैं। वे यह तय करने में मदद करते हैं कि ग्राफिक किसी दृश्य क्षेत्र में कैसे बैठेगा, लेकिन वे PNG के पिक्सेल की संख्या निर्धारित नहीं करते। एक ही SVG को छोटा आइकन, सहायता लेख की मध्यम चित्रकारी या प्रस्तुति का बड़ा ग्राफिक बनाया जा सकता है और उसके viewBox को बदलना जरूरी नहीं होता।
इसके विपरीत PNG प्रस्तुत किए गए परिणाम को स्थिर पिक्सेल ग्रिड में सहेजता है। उसे बाद में बड़ा करने पर SVG की तरह वक्र दोबारा नहीं बनते; मौजूदा पिक्सेल का अनुमान लगाकर विस्तार होता है। इसलिए 100 गुणा 100 viewBox को बिना सोचे 100 गुणा 100 पिक्सेल PNG बनाना बड़े स्थान के लिए कम और छोटे थंबनेल के लिए अनावश्यक हो सकता है। बदलने से पहले सबसे बड़ा प्रदर्शन आकार, बाद की संभावित बढ़ोतरी और उच्च घनत्व स्क्रीन की जरूरत लिख लें।
- viewBox को अंदरूनी निर्देशांक मानें।
- निर्यात से पहले सबसे बड़ा वास्तविक प्रदर्शन आकार दर्ज करें।
स्केल करने की क्षमता SVG स्रोत की विशेषता है; निर्यात किए गए PNG का पिक्सेल ग्रिड स्थिर होता है।
वास्तविक उपयोग से पीछे की ओर योजना बनाएं
सबसे पहले वह चौड़ाई और ऊंचाई तय करें जिसमें चित्र सच में दिखाई देगा। 200 CSS पिक्सेल चौड़ा ग्राफिक घनी स्क्रीन पर बड़े बिटमैप स्रोत से लाभ ले सकता है, लेकिन सही गुणक उत्पाद, उपकरण और वितरण नियमों पर निर्भर करता है। बड़ी माप रेंडरिंग के लिए अतिरिक्त गुंजाइश देती है, पर सामान्यतः फाइल आकार और प्रोसेसिंग भी बढ़ाती है। बिना जांच सबसे बड़ी उपलब्ध संख्या चुनने की जगह एक व्यावहारिक उम्मीदवार बनाकर उसे आजमाएं।
अगर ग्राफिक के कई उपयोग हैं तो हर उपयोग अलग लिखें। टूलबार का 24 पिक्सेल आइकन, सहायता पृष्ठ का 300 पिक्सेल चित्र और स्लाइड की बड़ी आकृति एक जैसी जरूरत नहीं रखते। जहां एक बहुत बड़ा PNG संसाधन बर्बाद करेगा या छोटा PNG खींचना पड़ेगा, वहां अलग-अलग आउटपुट बनाएं। स्वीकृत संस्करणों के नाम में माप जोड़ें और उनका उद्देश्य लिखें, ताकि आइकन वाला संस्करण गलती से बड़े क्षेत्र में इस्तेमाल न हो।
- वेब, ऐप, दस्तावेज और स्लाइड के आकार अलग तय करें।
- बहुत अलग लक्ष्यों के लिए एक से अधिक आउटपुट तैयार करें।
उपयोगी निर्यात आकार किसी ज्ञात स्थान से निकलता है, मनमानी गोल संख्या से नहीं।
पहलू अनुपात और अंदरूनी खाली जगह साथ जांचें
यदि SVG viewBox का अनुपात PNG के आउटपुट आयत से मेल नहीं खाता तो रेंडरर को अंतर संभालना पड़ता है। फाइल और सेटिंग के अनुसार वह अतिरिक्त जगह रखकर पूरा चित्र दिखा सकता है, कुछ भाग काट सकता है या आकृतियों को खींच सकता है। जब तक विकृति जानबूझकर न हो, चौड़ाई और ऊंचाई स्वतंत्र रूप से न बदलें। मूल अनुपात निकालें, दोनों माप साथ बदलें और परिणाम देखें, क्योंकि कन्वर्टर आपकी अपेक्षा से अलग फिटिंग नियम अपना सकता है।
कैनवास के आकार और चित्र से वास्तव में भरे क्षेत्र में भी फर्क करें। बड़ी viewBox में चौड़े खाली किनारे हो सकते हैं, इसलिए बड़े PNG में भी दिखने वाला चिह्न छोटा रह सकता है। स्रोत संपादित कर सकते हों तो SVG की अनावश्यक खाली जगह ठीक करें। नहीं तो रास्टर बनने के बाद सावधानी से क्रॉप करें, लेकिन जानबूझकर दिए गए अंतर या छाया न हटाएं। ज्यादा पिक्सेल अंदरूनी खाली जगह या गलत फ्रेम को स्वयं ठीक नहीं करते।
- आउटपुट आयत को स्रोत के अनुपात से मिलाएं।
- कैनवास और आकृतियों की वास्तविक सीमा अलग-अलग देखें।
चौड़ाई और ऊंचाई को समान गुणक से बदलने पर अनचाही विकृति से बचा जा सकता है।
पतली रेखाएं, टेक्स्ट और जुड़े संसाधन जांचें
वेक्टर में चिकनी दिखने वाली रेखाएं छोटे आकार में रास्टर होने पर पिक्सेल की सीमाओं के बीच पड़ सकती हैं और धुंधली या असमान लग सकती हैं। बहुत छोटा टेक्स्ट तथा संकरे अंतर भी भर सकते हैं। PNG को उसके वास्तविक प्रदर्शन आकार में देखें, केवल बहुत बड़ा करके नहीं। यदि सबसे छोटा संस्करण स्पष्ट नहीं रहता, तो डिजाइन सरल करें, रेखाओं और अंतर को मजबूत करें, उचित सीमा तक आउटपुट बढ़ाएं या छोटे आकार के लिए अलग रूप तैयार करें।
कुछ SVG उन फॉन्ट, बाहरी चित्रों, स्टाइलशीट, मास्क या प्रभावों पर निर्भर होते हैं जो एक प्रीव्यू में मौजूद हैं, लेकिन कन्वर्टर को उपलब्ध नहीं। बदला हुआ फॉन्ट पंक्ति विभाजन और अनुपात बदल देता है; न लोड हुआ चित्र गायब हो जाता है। PNG की तुलना स्रोत के भरोसेमंद दृश्य से करें। वर्डमार्क में हर अक्षर और चित्रकारी में छवियां, ग्रेडिएंट, मास्क तथा छाया देखें। सही पिक्सेल माप गायब निर्भरता की भरपाई नहीं कर सकता।
- रेखाओं और अक्षरों को अंतिम प्रदर्शन आकार में देखें।
- रेंडर हुए फॉन्ट और जुड़े चित्रों की पुष्टि करें।
यदि SVG के आवश्यक संसाधन उपलब्ध नहीं हैं तो सही चौड़ाई और ऊंचाई भी सटीक परिणाम की गारंटी नहीं देती।
डाउनलोड किए गए PNG को असली संदर्भ में सत्यापित करें
पहले चुनी हुई माप के साथ SVG से PNG टूल में एक प्रतिनिधि SVG बदलें। परिणाम डाउनलोड करें और वास्तविक चौड़ाई तथा ऊंचाई की पुष्टि के लिए उसे किसी दूसरे व्यूअर में खोलें। अनुपात, खाली जगह, क्रॉप, रंग, टेक्स्ट और रेखाओं की समानता देखें। पारदर्शिता चाहिए तो PNG को हल्की और गहरी दोनों पृष्ठभूमियों पर रखें, ताकि अनचाहा सफेद क्षेत्र या किनारों का प्रभामंडल दिखे। कन्वर्टर का प्रीव्यू सहेजी हुई फाइल की जांच का विकल्प नहीं है।
इसके बाद उसी PNG को लक्षित पृष्ठ, ऐप या दस्तावेज में लगाएं। सबसे छोटे और सबसे बड़े नियोजित प्रदर्शन को जांचें और देखें कि कोई प्रणाली उसे अनुमान से अधिक तो नहीं खींच रही। धुंधलापन दिखे तो संभावित कारण अलग करें: निर्यात में कम पिक्सेल, रेंडरिंग के दौरान बदला फॉन्ट या चित्र, अथवा लगाने के बाद हुई स्केलिंग। स्वीकृत रूपों के नाम में उनका आकार रखें और SVG बचाकर रखें ताकि अगली माप साफ तरीके से बनाई जा सके।
एक साथ कई फाइलें बदलने से पहले अलग तरह के विवरण वाला दूसरा SVG भी आजमाएं। टेक्स्ट से भरा ग्राफिक और सरल चिह्न समान माप पर अलग व्यवहार कर सकते हैं। आकार, पृष्ठभूमि और जांचे गए उपयोग स्थान दर्ज करें। प्रतिनिधि ब्राउज़र या व्यूअर में आखिरी जांच निर्यात की समस्या और प्रदर्शन वातावरण की इंटरपोलेशन के बीच अंतर बताती है तथा दोबारा काम घटाती है।
- वास्तव में डाउनलोड हुई फाइल में पिक्सेल माप की पुष्टि करें।
- एक ही आउटपुट को सबसे छोटे और सबसे बड़े लक्ष्य पर जांचें।
PNG को तभी स्वीकृत करें जब वह उपयोगकर्ता के वास्तविक वातावरण में सही काम करे।
मुख्य बातें
- viewBox अंदरूनी निर्देशांक क्षेत्र बताता है, अनिवार्य पिक्सेल संख्या नहीं।
- आउटपुट का आकार सबसे बड़े वास्तविक प्रदर्शन और आवश्यक स्क्रीन घनत्व के अनुसार चुनें।
- जब तक काटना या खींचना जानबूझकर न हो, मूल पहलू अनुपात सुरक्षित रखें।
- निर्यात के बाद रेखाएं, टेक्स्ट, बाहरी संसाधन, खाली जगह और पारदर्शिता जरूर जांचें।
अक्सर पूछे जाने वाले सवाल
यदि viewBox 100 गुणा 100 है तो क्या PNG भी 100 गुणा 100 पिक्सेल होना चाहिए?
नहीं। viewBox अंदरूनी निर्देशांक बताता है; PNG का आकार रेंडरिंग के समय उपयोग और स्क्रीन घनत्व के अनुसार चुना जाता है।
क्या बड़ा PNG हमेशा अधिक स्पष्ट दिखाई देता है?
हमेशा नहीं। अधिक पिक्सेल बड़े प्रदर्शन में मदद कर सकते हैं, लेकिन SVG संसाधन, डिजाइन के विवरण और बाद की स्केलिंग भी परिणाम बदलते हैं।
चौड़ाई और ऊंचाई अलग-अलग बदलने पर क्या होगा?
पहलू अनुपात बदल जाएगा और चित्र खिंच सकता है, कट सकता है या अतिरिक्त जगह आ सकती है। जब यह जानबूझकर न हो तो अनुपात सुरक्षित रखें।
बड़े PNG में भी ग्राफिक छोटा क्यों दिखता है?
SVG viewBox में बहुत खाली जगह हो सकती है। बाहरी आकार के साथ आकृतियों की वास्तविक सीमा भी जांचें।
निर्यात के बाद किन चीजों की जांच करनी चाहिए?
माप, अनुपात, खाली किनारे, क्रॉप, पारदर्शिता, टेक्स्ट, रेखाएं और जुड़े संसाधन जांचें, फिर फाइल को असली लक्ष्य पर लगाकर देखें।