SVG से PNG कन्वर्टर
किसी SVG ड्रॉइंग को PNG, JPG या WebP तस्वीर में बदलें। फ़ाइल ड्रॉप करें या कोड पेस्ट करें, ज़रूरी साइज़ चुनें और डाउनलोड कर लें। सब कुछ आपके अपने डिवाइस पर होता है — आपकी फ़ाइल कभी अपलोड नहीं होती।
SVG फ़ाइल यहाँ ड्रॉप करें, या क्लिक करके चुनें
आपकी फ़ाइल आपके अपने डिवाइस पर ही रहती है। कुछ भी कहीं नहीं भेजा जाता।
आपकी तस्वीर यहाँ दिखेगी।
SVG को PNG में कैसे बदलें
- अपनी
.svgफ़ाइल को ऊपर के बॉक्स पर ड्रॉप करें, या कोड को टेक्स्ट एरिया में पेस्ट करें। - पारदर्शी बैकग्राउंड चाहिए तो PNG चुनें, कोई फ़ॉर्म माँगे तो JPG, और अपनी वेबसाइट के लिए WebP।
- फ़ोन की स्क्रीन पर भी साफ़ रहने वाली तस्वीर के लिए 2× दबाएँ, या कोई सटीक चौड़ाई लिख दें।
- प्रीव्यू देखें, फिर डाउनलोड करें दबाएँ।
पर्दे के पीछे यह टूल आपके SVG के ऊपर लिखी width, height और
viewBox को पढ़कर उसका स्वाभाविक साइज़ निकालता है। फिर वह पूरी ड्रॉइंग को आपके माँगे
साइज़ की एक ख़ाली शीट पर बनाता है और उस शीट को तस्वीर के रूप में सेव कर देता है। ड्रॉइंग मूल
निर्देशों से नए साइज़ पर दोबारा बनाई जाती है — किसी छोटी कॉपी को खींचकर बड़ा नहीं किया जाता —
इसलिए नतीजा हर साइज़ पर, 4× तक, एकदम साफ़ रहता है।
फ़ोन और लैपटॉप की स्क्रीन के लिए 2× पर एक्सपोर्ट क्यों करें
आज का फ़ोन या लैपटॉप वेब पेज के माँगे हर एक बिंदु के लिए एक से ज़्यादा स्क्रीन-बिंदु लगाता है। जो पेज कहता है "इस लोगो को 200 चौड़ा रखो", वह अक्सर फ़ोन पर असल में 400 स्क्रीन-बिंदु बना रहा होता है, और सबसे तेज़ टैबलेट पर 600। अगर आप अपना PNG ठीक 200 बिंदु चौड़ाई पर सेव करते हैं, तो स्क्रीन को उसे उस जगह भरने के लिए खींचना पड़ता है, और बिंदुओं के तय ग्रिड को खींचने पर किनारे हमेशा नरम पड़ जाते हैं। बारीक रेखाएँ धूसर हो जाती हैं और छोटा टेक्स्ट धुँधला दिखता है। तस्वीर ख़राब नहीं है — बस जिस स्क्रीन पर पहुँची है उसे भरने लायक़ बिंदु उसमें नहीं हैं।
इसका इलाज है कि स्क्रीन को ज़रूरत से ज़्यादा बिंदु दे दिए जाएँ। तस्वीर को जिस साइज़ पर दिखाना है उससे दोगुने साइज़ पर सेव करें, और फिर पेज से कहें कि उसे छोटे साइज़ पर दिखाए। साधारण स्क्रीन पर अतिरिक्त बिंदु चुपचाप नज़रअंदाज़ हो जाते हैं; तेज़ स्क्रीन पर वही किनारों को साफ़ बनाते हैं। इसीलिए डिज़ाइनर "2× असेट" की बात करते हैं — और ऊपर के क्विक-साइज़ बटन इसी वजह से हैं। दो व्यावहारिक बातें: 2× लगभग हमेशा काफ़ी होता है, क्योंकि 3× और 4× बहुत वज़न जोड़ते हैं और फ़र्क़ ज़्यादातर आँखें पकड़ नहीं पातीं; और चौड़ाई दोगुनी करने पर ऊँचाई भी दोगुनी होती है, इसलिए 2× तस्वीर में चार गुना बिंदु होते हैं और फ़ाइल भी लगभग चार गुना बढ़ती है। 2× पर सेव करें, फ़ाइल को हल्का रखें, और 3× तब ही लें जब तस्वीर बहुत बड़ी दिखानी हो।
हर क्विक-साइज़ बटन से क्या मिलता है
इस तालिका की हर संख्या उसी कोड के टुकड़े से निकाली गई है जो टूल ख़ुद चलाता है, इसलिए यह वही है जो आपको असल में मिलेगा। हर साइज़ के नीचे तस्वीर में रंगीन बिंदुओं की कुल संख्या है — फ़ाइल कितनी भारी होगी, इसका मोटा अंदाज़ा।
| शुरुआती SVG | स्वाभाविक साइज़ | 1× | 2× | 3× | 4× |
|---|---|---|---|---|---|
| छोटा आइकन टूलबार या मेन्यू का आइकन | 24 × 24 | 24 × 24 576 पिक्सेल | 48 × 48 2,304 पिक्सेल | 72 × 72 5,184 पिक्सेल | 96 × 96 9,216 पिक्सेल |
| बैज छोटा गोल बैज या अवतार | 100 × 100 | 100 × 100 10,000 पिक्सेल | 200 × 200 40,000 पिक्सेल | 300 × 300 90,000 पिक्सेल | 400 × 400 160,000 पिक्सेल |
| स्क्वायर लोगो ऐप स्टोर या प्रोफ़ाइल का लोगो | 512 × 512 | 512 × 512 262,144 पिक्सेल | 1024 × 1024 1,048,576 पिक्सेल | 1536 × 1536 2,359,296 पिक्सेल | 2048 × 2048 4,194,304 पिक्सेल |
| सोशल कार्ड लिंक प्रीव्यू की तस्वीर | 1200 × 630 | 1200 × 630 756,000 पिक्सेल | 2400 × 1260 3,024,000 पिक्सेल | 3600 × 1890 6,804,000 पिक्सेल | 4800 × 2520 12,096,000 पिक्सेल |
आख़िरी पंक्ति देखें: 1200 × 630 की लिंक-प्रीव्यू तस्वीर 4× पर 4800 × 2520 पिक्सेल की हो जाती है। यह सचमुच बहुत बड़ी तस्वीर है और फ़ाइल भारी होगी। वेब पेज पर लगाने के लिए 1× या 2× ही चाहिए।
PNG, JPG या WebP — कौन-सा सेव करें?
| फ़ॉर्मेट | पारदर्शी हो सकता है | डिटेल | फ़ाइल साइज़ | किसके लिए बेहतर |
|---|---|---|---|---|
| PNG | हाँ | कुछ भी नहीं खोता | सबसे बड़ी | लोगो, आइकन, स्क्रीनशॉट और हर वह चीज़ जिसमें तेज़ किनारे या पारदर्शी बैकग्राउंड हो। SVG से शुरू करते समय लगभग हर बार यही सही चुनाव है। |
| JPG | नहीं | कुछ डिटेल घट जाती है | छोटी | फ़ोटो, और वे फ़ॉर्म जो सिर्फ़ JPG फ़ाइल लेते हैं। तेज़ रेखाएँ और छोटा टेक्स्ट धुँधले दिख सकते हैं, और ख़ाली हिस्सों में हमेशा ठोस रंग भर दिया जाता है। |
| WebP | हाँ | आपकी मर्ज़ी | सबसे छोटी | आपकी अपनी वेबसाइट की तस्वीरें। उसी क्वालिटी पर आम तौर पर PNG या JPG से लगभग एक-चौथाई छोटी, और हर मौजूदा ब्राउज़र इसे दिखा सकता है। |
छोटा जवाब: जब तक कोई वजह न हो, PNG। SVG ड्रॉइंग ज़्यादातर लोगो, आइकन और डायग्राम होती हैं — सपाट रंग और तेज़ किनारे — और यही वह तस्वीर है जिसे PNG बिल्कुल सही सेव करता है और JPG धुँधला कर देता है। JPG तभी चुनें जब दूसरी तरफ़ कुछ और लेने से इनकार कर दे, और याद रखें कि वह आपके पारदर्शी बैकग्राउंड को रंग से भर देगा।
जब फ़ाइल का साइज़ पिक्सेल में नहीं लिखा हो
प्रिंट या ड्रॉइंग प्रोग्राम से निकली SVG फ़ाइलें अक्सर अपना साइज़ स्क्रीन-बिंदुओं की जगह मिलीमीटर, पॉइंट या इंच में नापती हैं। टूल उन्हें आपके लिए बदल देता है, वेब के मानक नियम से कि एक इंच ठीक 96 बिंदुओं का होता है; बाक़ी सब कुछ इसी एक संख्या से निकलता है।
| अगर आपकी फ़ाइल में लिखा है | तो इतने बिंदु बनते हैं | पूर्णांक में |
|---|---|---|
width="100px" | 100 | 100 |
width="1in" | 96 | 96 |
width="72pt" | 96 | 96 |
width="10mm" | 37.7953 | 38 |
width="5cm" | 188.9764 | 189 |
width="1pc" | 16 | 16 |
अगर आपका SVG साइज़ प्रतिशत में देता है, या कोई साइज़ देता ही नहीं, तो बदलने को कुछ नहीं है —
प्रतिशत का मतलब सिर्फ़ किसी पेज के अंदर होता है। ऐसे में टूल viewBox पर लौटता है,
जो लगभग हर SVG में होता है, और वहाँ लिखी चौड़ाई-ऊँचाई इस्तेमाल करता है। अगर viewBox
भी नहीं है, तो वह आपको 300 × 150 से शुरू कराता है, जो ब्राउज़र किसी भी ऐसी
तस्वीर को देता है जिसका अपना साइज़ पता न हो, और प्रीव्यू के ऊपर आपको यह बता देता है। आप जो साइज़
सचमुच चाहते हैं वह लिख सकते हैं।
जहाँ लोग अटक जाते हैं
- टेक्स्ट ग़लत फ़ॉन्ट में आ जाता है। फ़ॉन्ट उसी डिवाइस पर होना चाहिए जो ड्रॉइंग बना रहा है। SVG एक्सपोर्ट करने से पहले अपने ड्रॉइंग प्रोग्राम में टेक्स्ट को आउटलाइन में बदल दें।
- SVG के अंदर लिंक की हुई तस्वीर ख़ाली आती है। SVG इंटरनेट पर जिस भी चीज़ की ओर इशारा करे, उसे अकेले बनाते समय रोक दिया जाता है। उसे फ़ाइल के अंदर ही एम्बेड कर दें।
- नतीजे के पीछे सफ़ेद डिब्बा है। आप JPG में सेव कर रहे हैं। PNG या WebP पर जाएँ और "पारदर्शी" वाले बॉक्स पर टिक करें।
- कुछ भी नहीं हो रहा। पक्का करें कि आपने पूरी फ़ाइल पेस्ट की है, जो
<svgसे शुरू होकर</svg>पर ख़त्म होती है। अधूरा टुकड़ा अकेले नहीं बनेगा। - आपने बहुत बड़ा साइज़ माँग लिया। ब्राउज़र एक तरफ़ लगभग 16,000 बिंदुओं से बड़ी शीट बनाने से मना कर देते हैं। इससे ज़्यादा माँगेंगे तो टूल चुपचाप उसे उस सीमा के अंदर ले आता है और आपको बता देता है।
आपकी फ़ाइल आपके डिवाइस से बाहर नहीं जाती
यहाँ कोई अपलोड नहीं है और काम करने वाला कोई सर्वर नहीं है। आपका ब्राउज़र पहले से जानता है कि SVG कैसे पढ़ना है, ख़ाली शीट पर कैसे बनाना है और तस्वीर कैसे सेव करनी है, और यह पेज बस उससे ये तीनों काम एक के बाद एक करवाता है। इसका मतलब है कि कोई अप्रकाशित लोगो, किसी क्लाइंट की आर्टवर्क या कोई भी गोपनीय चीज़ सुरक्षित है, टूल तुरंत चलता है क्योंकि नेटवर्क पर कुछ नहीं जा रहा, और पेज लोड होने के बाद ऑफ़लाइन होने पर भी यह चलता रहता है।
अक्सर पूछे जाने वाले सवाल
- कन्वर्ट करने के बाद मेरी तस्वीर का कुछ हिस्सा ग़ायब क्यों हो जाता है?
- SVG ऐसी चीज़ों की ओर इशारा कर सकता है जो फ़ाइल के बाहर रहती हैं। अगर वह image टैग से किसी दूसरी तस्वीर को लिंक करता है, या ऐसा फ़ॉन्ट इस्तेमाल करता है जो सिर्फ़ आपके कंप्यूटर में इंस्टॉल है, तो SVG को अकेले बनाते समय ब्राउज़र को उन्हें लाने की इजाज़त नहीं होती, इसलिए वे ख़ाली या किसी दूसरे टाइपफ़ेस में आते हैं। इसका हल यह है कि पहले सब कुछ फ़ाइल के अंदर रख दें: तस्वीर को लिंक की जगह डेटा के रूप में पेस्ट करें, और अपने ड्रॉइंग प्रोग्राम में टेक्स्ट को आउटलाइन या पाथ में बदल दें। जब SVG अपने आप में पूरा हो जाता है, तो यहाँ जो दिखता है वही आपको मिलता है।
- SVG और PNG में क्या फ़र्क़ है?
- SVG ड्रॉइंग के निर्देशों का एक सेट है, इसलिए वह किसी भी साइज़ पर एकदम तेज़ (शार्प) रहता है। आप उसे बिलबोर्ड जितना बड़ा कर दें, तब भी हर किनारा साफ़ रहता है। PNG रंगीन बिंदुओं का एक तय ग्रिड है, इसलिए वह सिर्फ़ उसी साइज़ तक शार्प दिखता है जिस पर उसे सेव किया गया था। उसके आगे वह धुँधला और ब्लॉक जैसा हो जाता है। यहाँ आप यही सौदा कर रहे हैं: SVG की कभी न घटने वाली शार्पनेस छोड़कर आपको ऐसी फ़ाइल मिलती है जिसे हर ऐप, हर फ़ोन और हर पुराना अपलोड फ़ॉर्म बिना शिकायत खोल लेता है।
- मुझे कौन-सा साइज़ चुनना चाहिए?
- पहले वह साइज़ लें जिस पर तस्वीर असल में दिखाई जाएगी, फिर उसे दोगुना कर दें। अगर आपका लोगो किसी वेब पेज पर 200 पिक्सेल चौड़े डिब्बे में बैठता है, तो उसे 2× बटन से 400 पिक्सेल चौड़ाई पर एक्सपोर्ट करें। ज़्यादातर आधुनिक फ़ोन और लैपटॉप डिज़ाइन के हर एक पिक्सेल में दो या उससे ज़्यादा स्क्रीन-बिंदु भर देते हैं, इसलिए ठीक उसी साइज़ पर बनी तस्वीर उन पर थोड़ी धुँधली दिखती है। 2× से बड़ा जाना शायद ही कभी काम आता है और फ़ाइल को काफ़ी भारी कर देता है, इसलिए 2× समझदारी वाला डिफ़ॉल्ट है और 3× सिर्फ़ बहुत बड़ी स्क्रीनों के लिए ही ठीक है।
- क्या मैं बैकग्राउंड पारदर्शी रख सकता हूँ?
- हाँ, अगर आप PNG या WebP में सेव करें। ये दोनों ख़ाली पिक्सेल स्टोर कर सकते हैं, इसलिए आपके SVG के जिन हिस्सों में कुछ बना नहीं है वे साफ़ रहते हैं और आपका लोगो किसी भी रंग के पेज पर बिना बदसूरत सफ़ेद डिब्बे के बैठ जाता है। बस "पारदर्शी" वाला बॉक्स टिक रहने दें। JPG अलग तरह से काम करता है: वह ख़ाली पिक्सेल स्टोर कर ही नहीं सकता, इसलिए JPG चुनते ही टूल ख़ाली हिस्सों को आपके चुने रंग से भर देता है। इसीलिए JPG पर जाते ही कलर पिकर अपने-आप चालू हो जाता है।
- क्या मेरी फ़ाइल कहीं भेजी जाती है?
- नहीं। सब कुछ आपके अपने डिवाइस पर होता है। टूल आपका SVG पढ़ता है, उसे बनाता है और नतीजा सेव करता है, और इसके लिए वह आपके ब्राउज़र में पहले से मौजूद हिस्सों का इस्तेमाल करता है; इनमें से किसी में इंटरनेट शामिल नहीं है। आपकी फ़ाइल कभी अपलोड नहीं होती, कभी स्टोर नहीं होती और कभी लॉग नहीं होती, और हम चाहें तब भी देखने को कुछ नहीं है। इसलिए यह किसी ऐसे कंपनी-लोगो के लिए सुरक्षित है जो अभी लॉन्च नहीं हुआ, किसी एग्रीमेंट के तहत बने क्लाइंट डिज़ाइन के लिए, या ऐसी किसी भी चीज़ के लिए जो आप किसी अजनबी को नहीं सौंपना चाहेंगे। पेज एक बार लोड हो जाए तो इंटरनेट बंद करके भी यह चलता रहता है।
- फ़ाइल मेरी उम्मीद से बड़ी क्यों है?
- PNG तस्वीर के हर एक बिंदु का रंग स्टोर करता है, इसलिए फ़ाइल क्षेत्रफल के साथ बढ़ती है, इस बात से नहीं कि ड्रॉइंग कितनी जटिल है। चौड़ाई दोगुनी करने पर ऊँचाई भी दोगुनी होती है, यानी बिंदु चार गुना और फ़ाइल का साइज़ भी लगभग चार गुना हो जाता है। कुछ सौ अक्षरों का एक छोटा-सा SVG भी 4× पर आसानी से कुछ सौ किलोबाइट का PNG बन सकता है। अगर फ़ाइल बहुत भारी है, तो पहले छोटा साइज़ चुनें, और उसके बाद ही WebP आज़माएँ, जो उसी क्वालिटी पर आम तौर पर लगभग एक-चौथाई और बचा देता है।