इस पेज का कोड चालू नहीं हुआ।

index.html को सीधे किसी फ़ोल्डर से खोलने पर ब्राउज़र JavaScript मॉड्यूल रोक देता है, इसलिए कोई SVG चुनने पर कुछ नहीं होगा। इसके बजाय फ़ोल्डर को http पर सर्व कीजिए:

powershell -ExecutionPolicy Bypass -File serve.ps1

फिर http://localhost:8080/ खोलिए।

SVG से तस्वीर — वेक्टर को किसी भी साइज़ की PNG, JPEG या WebP बनाइए

साइज़ बताइए। वेक्टर के पास खोने को अपना कोई साइज़ है ही नहीं।

भाषा: हिन्दी
कोड देखें
यह टूल SVG फ़ाइलें कभी अपलोड नहीं करता। यहाँ कोई सर्वर है ही नहीं।

ड्रॉइंग को वही इंजन रैस्टराइज़ करता है जिसने अभी-अभी उसे आपकी स्क्रीन पर रखा था। आपकी फ़ाइल आपकी डिस्क से पढ़ी जाती है, src/svg.js की सौ पंक्तियाँ उसके रूट टैग को आपके माँगे साइज़ पर दोबारा लिख देती हैं, और उसे उसी कैनवस पर खींचा जाता है जो आपके ब्राउज़र में पहले से आता है। वे सौ पंक्तियाँ आप पढ़ भी सकते हैं। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं, इसलिए यहाँ से कुछ मँगाया भी नहीं जा सकता और भेजा भी नहीं जा सकता। और मान लीजिए कोई रास्ता होता भी, तो इस पेज के दूसरी तरफ़ ऐसा कोई सर्वर ही नहीं है जिसे लोगो भेजा जा सके।

लाइव जाँच: जाँच जारी…

ऑफ़लाइन: जाँच जारी…

हमारी बात पर भरोसा मत कीजिए। DevTools खोलिए, Network टैब पर नज़र रखिए, और कुछ रैस्टराइज़ कीजिए। एक भी रिक्वेस्ट में न कोई फ़ाइल जाती है, न थंबनेल, न फ़ाइल का नाम, न आपकी चुनी फ़ाइल का एक बाइट। या फिर इंटरनेट काट दीजिए और तब भी कुछ बदलकर देखिए।

1 SVG फ़ाइलें चुनिए

2 बताइए कि यह कितनी बड़ी होनी चाहिए

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

सूची की हर फ़ाइल अपने ही साइज़ से गुणा होती है, इसलिए अलग-अलग साइज़ों पर बने आइकनों का ढेर आपस में अनुपात में बना रहता है।

3 फ़ॉर्मैट चुनिए

क्वालिटी — 90 सिर्फ़ JPEG और WebP के लिए। PNG में क्वालिटी का कोई बटन है ही नहीं, क्योंकि वह नुकसान-रहित है। सपाट रंग और सख्त किनारे, जिनसे SVG का ज़्यादातर हिस्सा बना होता है, ठीक वही हैं जिन्हें नुकसान वाला एनकोडर सबसे बुरी तरह सँभालता है, इसलिए यहाँ यह उससे ऊँचा बैठता है जितना किसी फ़ोटोग्राफ़ के लिए बैठता।

4 देखिए, फिर सहेजिए

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

कोई SVG जोड़िए और वह यहाँ आ जाएगी।

Markdown के रूप में देखें

SVG को बिना अपलोड किए PNG में कैसे बदलें

  1. SVG चुनिए। कोई एक पिकर पर छोड़ दीजिए, या उनका पूरा फ़ोल्डर चुनकर सबको एक साथ बदल डालिए। ब्राउज़र फ़ाइल को सीधे आपकी डिस्क से पढ़ता है, और इस दौरान कुछ भी कहीं नहीं भेजा जाता। हर पंक्ति बताती है कि फ़ाइल खुद को किस साइज़ का समझती है, और तब अलग ढंग से बताती है जब वह साइज़ उसके viewBox से आया हो, या इसलिए मान लिया गया हो कि फ़ाइल कोई साइज़ घोषित ही नहीं करती।
  2. बताइए कि कितना बड़ा। फ़ाइल के अपने साइज़ का कोई गुणक सबसे तेज़ जवाब है, और पूरे ढेर के लिए सही भी, क्योंकि हर ड्रॉइंग अपने ही शुरुआती बिंदु से बढ़ती है और आइकनों का सेट अनुपात में बना रहता है। वरना कोई चौड़ाई, ऊँचाई, सबसे लंबा किनारा, या दोनों भुजाओं वाला डिब्बा बता दीजिए। यहाँ बड़ी संख्या की वैसी कोई कीमत नहीं लगती जैसी फ़ोटोग्राफ़ के साथ लगती है, क्योंकि ड्रॉइंग को उस साइज़ पर खींचा जाता है, उस तक तानी नहीं जाती।
  3. ज़रूरत हो तो high-DPI नकलें भी जोड़ लीजिए। फ़ोन और Retina लैपटॉप हर CSS पिक्सल के लिए दो या तीन डिवाइस पिक्सल खींचते हैं, इसलिए 200 पिक्सल के लोगो के पीछे 400 या 600 पिक्सल की फ़ाइल चाहिए। @2x और @3x माँग लीजिए, और वे उन्हीं नामों से निकलती हैं जिनकी Xcode, Android की टूलिंग और CSS का image-set(), तीनों उम्मीद करते हैं। हर एक अलग-अलग गोल किए जाने के बजाय पहली से ठीक दोगुनी या तिगुनी होती है।
  4. फ़ॉर्मैट चुनिए और पारदर्शिता के बारे में फ़ैसला कीजिए। कोई खास वजह न हो तो PNG ही चुनिए। यह नुकसान-रहित है, पारदर्शिता बचाए रखता है, और सपाट रंग इसमें अच्छी तरह कंप्रेस होते हैं। JPEG में पारदर्शिता होती ही नहीं, इसलिए बैकग्राउंड का रंग तब भी भरा जाता है जब आप कोई चुनें या न चुनें, क्योंकि उसके बिना हर पारदर्शी पिक्सल काला निकलता है। WebP दोनों काम करता है और फ़ाइल भी छोटी बनाता है, बस इतने पुराने सॉफ़्टवेयर की कीमत पर जो उसे पढ़ न सके।
  5. डाउनलोड से पहले प्रीव्यू देख लीजिए। उसे वही कोड खींचता है जो फ़ाइल लिखता है, आपकी फ़ाइल से, आपकी मशीन पर। ड्रॉइंग के पिक्सल बनते वक्त दो चीज़ें बदलती हैं, और दोनों यहीं दिख जाती हैं। आधे पिक्सल चौड़ी बाल जैसी लकीर भूरी पड़ जाती है, और कोई भी टेक्स्ट उसी फ़ॉन्ट में खिंचता है जो इस कंप्यूटर पर मौजूद है, वेब से लाए गए फ़ॉन्ट में नहीं।
  6. फ़ाइलें ले जाइए। हर फ़ाइल का अलग डाउनलोड, या पूरा ढेर एक ही ZIP में। नाम उसी SVG के पीछे चलते हैं जिससे वे बनी हैं, नकलों पर @2x और @3x लगाकर, और जिन दो फ़ाइलों का नाम एक ही पड़ जाता, उनमें से एक के चुपचाप दूसरी की जगह लेने के बजाय उन्हें नंबर दे दिए जाते हैं।

विस्तार से

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

सवाल

क्या मेरी SVG कहीं अपलोड होती है?

नहीं। फ़ाइल को आपका अपना ब्राउज़र, आपके अपने हार्डवेयर पर पढ़ता है, उसी इंजन से कैनवस पर खींचता है जो आपकी देखी हर दूसरी तस्वीर रेंडर करता है, और डाउनलोड के रूप में वापस दे देता है। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं, यानी यह न कभी कुछ मँगाता है, न कभी कुछ भेजता है। और पेज की Content-Security-Policy उन सारे पतों के नाम गिना देती है जिनसे यह संपर्क कर सकता है, जिनमें से एक भी इस साइट का नहीं है।

मुझे SVG को किस साइज़ पर रैस्टराइज़ करना चाहिए?

जो भी उसे पढ़ने वाली चीज़ माँगे, उसमें उस स्क्रीन के डिवाइस पिक्सल अनुपात का गुणा कर दीजिए जिस पर वह दिखेगी। जो लोगो 200 CSS पिक्सल घेरता है उसे Retina लैपटॉप के लिए 400 और हाल के फ़ोन के लिए 600 चाहिए, और यहाँ की @2x तथा @3x नकलें यही हैं। ऐप आइकन या स्टोर लिस्टिंग के लिए स्टोर खुद ठीक संख्या बता देता है, और वही संख्या सही है। किसी ने कुछ बताया ही न हो, तो सबसे लंबे किनारे पर 1024 एक काम का डिफ़ॉल्ट है, यानी लगभग हर इस्तेमाल के लिए काफ़ी बड़ा और ईमेल करने लायक छोटा।

क्या इसे बड़ा करने से क्वालिटी घटती है?

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

मेरी SVG में न चौड़ाई है न ऊँचाई। मुझे कौन-सा साइज़ मिलेगा?

viewBox वाला, अगर वह मौजूद हो। उसकी चौड़ाई और ऊँचाई पिक्सल नहीं, यूज़र यूनिट होती हैं, पर फ़ाइल में यही अकेली संख्याएँ हैं और ब्राउज़र उन्हें ड्रॉइंग का स्वाभाविक साइज़ मान लेता है। viewBox भी न हो, तो पेज पंक्ति के बगल में मान लिया गया लिख देता है और ⁦300 × 150⁩ इस्तेमाल करता है, जिस पर एक <img> उसे खींचता। दोनों ही हालात में आप मनचाहा साइज़ बता सकते हैं और फ़ाइल उसी पर खींची जाती है।

PNG में टेक्स्ट अलग क्यों दिखता है?

क्योंकि फ़ॉन्ट SVG के भीतर है ही नहीं। टेक्स्ट खींचने वाली SVG किसी फ़ॉन्ट का नाम लेती है और उसे ढूँढ़ना मशीन पर छोड़ देती है, और जो फ़ाइल @import से Google Fonts से कोई फ़ॉन्ट खींचती है उसे यहाँ कुछ नहीं मिलता। <img> के ज़रिए खींची गई SVG को कुछ भी लाने की इजाज़त नहीं, और यही वह नियम है जो उसे आपकी फ़ाइल लेकर घर फ़ोन करने से भी रोकता है। इसका हल वही है जो हर डिज़ाइनर पहले से जानता है। एक्सपोर्ट से पहले ड्रॉइंग प्रोग्राम में ही टेक्स्ट को पाथ में बदल दीजिए। फिर वह ज्यामिति है, और हर जगह एक जैसा दिखता है।

क्या यह एक साथ कई फ़ाइलें बदल सकता है?

हाँ। सूची की हर SVG उन्हीं सेटिंग से रेंडर होती है और पूरा ढेर एक ही ZIP में उतरता है। गुणक, यानी “फ़ाइल जो साइज़ माँगती है उसका 4×”, पूरे ढेर के लिए आम तौर पर सही सेटिंग है, क्योंकि हर ड्रॉइंग अपने ही साइज़ से बढ़ती है और सबको एक ही पिक्सल संख्या पर ज़बरदस्ती नहीं लाया जाता। किसी भी पंक्ति पर क्लिक करके उसे प्रीव्यू में ले आइए।

क्या साइज़ की कोई सीमा है?

ब्राउज़र की, हमारी नहीं। कैनवस किसी किनारे पर 16,384 पिक्सल के आगे कहीं हाथ खड़े कर देता है, और iPhone या iPad पर Safari लगभग 1.67 करोड़ पिक्सल क्षेत्रफल पर रुक जाता है, यानी ⁦4096 × 4096⁩ पर। उससे ऊपर पेज खाली तस्वीर लौटाने के बजाय आपको चेतावनी देता है। खाली तस्वीर ही वह चीज़ है जो ब्राउज़र तब देता है जब उसका दम टूट जाए, क्योंकि toBlob कुछ भी नहीं लौटाता, और सफ़ाई देने को कोई त्रुटि तक नहीं होती। 10 करोड़ पिक्सल के आगे टूल मना कर देता है, क्योंकि एक भी बाइट एनकोड होने से पहले ही वह 400 MB का कैनवस है।

पारदर्शिता का क्या होता है?

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

क्या यह ऐसी SVG पढ़ सकता है जिसमें स्क्रिप्ट या बाहरी तस्वीर हो?

पढ़ तो सकता है, और वह ठीक उतने हिस्से खींचेगा जितने खींचने को ब्राउज़र तैयार हो। <img> के ज़रिए लोड हुई SVG secure static mode में होती है। स्क्रिप्ट चलती नहीं, बाहरी संदर्भ लाए नहीं जाते, और एनिमेशन चलता नहीं, यानी आपको पहला फ़्रेम ही मिलता है। इसलिए जिस फ़ाइल में दूर बैठी <image> हो, उसका वह हिस्सा गायब निकलता है। यह ब्राउज़र आपकी तरफ़ से मना कर रहा है, और इसी वजह से यह पेज ऐसी फ़ाइल भी बेफ़िक्री से खोल सकता है जो उसने पहले कभी नहीं देखी।

इसमें और इमेज रिसाइज़र में क्या फ़र्क है?

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

क्या यह मुफ़्त है, और क्या इसके लिए खाता बनाना पड़ेगा?

यह मुफ़्त है, और यहाँ न कोई खाता है, न साइन-इन, न ट्रायल, न वॉटरमार्क। फ़ाइलों की गिनती या साइज़ पर भी कोई सीमा नहीं है, क्योंकि इनका बिल चुकाने वाला कोई सर्वर है ही नहीं। काम आपके अपने डिवाइस पर होता है। साइट पर विज्ञापन हैं और खर्च वही उठाते हैं, लेकिन विज्ञापनों को आपकी फ़ाइलों के बारे में कुछ नहीं दिया जाता।

क्या यह ऑफ़लाइन चलता है?

हाँ। पेज एक बार लोड कर लीजिए, फिर इंटरनेट काट दीजिए, यह चलता रहेगा। कुछ अपलोड नहीं हो रहा, यह साबित करने का सबसे आसान तरीका भी यही है। जो टूल आपकी कलाकृति रेंडर होने के लिए कहीं भेजता, वह प्लग निकालते ही रुक जाता।