SVG फ़ाइल खींचकर छोड़ें या चुनने के लिए क्लिक करें
SVG
यह कैसे काम करता है
SVG एक वेक्टर फ़ॉर्मेट है: यह आकृतियों को निर्देशांकों से बताता है, इसलिए इसे किसी भी आकार में बिना धुंधलापन आए बनाया जा सकता है। इसके उलट PNG और JPG बिटमैप हैं, जिनमें पिक्सेल की संख्या तय होती है। रास्टराइज़ करना यही चरण है: एक रिज़ॉल्यूशन तय करना और वेक्टर को उस पिक्सेल ग्रिड पर बनाना।
इसीलिए रिज़ॉल्यूशन कन्वर्ट करने के बाद नहीं, पहले चुना जाता है। यह टूल SVG की चौड़ाई और ऊँचाई को माँगे गए आकार पर लिख देता है और उसके बाद ही उसे बनाता है, ताकि ब्राउज़र किसी छोटी छवि को बड़ा करने के बजाय उसी स्केल पर वक्र दोबारा खींचे। आप गुणक (2×, 4×…) दे सकते हैं या पिक्सेल में सटीक चौड़ाई और ऊँचाई।
PNG पारदर्शिता बनाए रखता है; JPG नहीं, इसलिए पारदर्शी हिस्से आपके चुने हुए बैकग्राउंड रंग से भर दिए जाते हैं। सारा ड्रॉइंग आपके ब्राउज़र में Canvas से होता है: न फ़ाइल और न ही SVG कोड किसी सर्वर पर भेजा जाता है।
उदाहरण
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 px24 px का आइकन 4× गुणक से बदलने पर 96 × 96 px हो जाता है, जो हाई-डेंसिटी स्क्रीन के लिए सामान्य आकार है।<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxजिस SVG में width और height विशेषताएँ नहीं होतीं, वह अपना आकार viewBox से लेता है; यहाँ इसे सोशल मीडिया प्रीव्यू छवि के लिए 1× पर रास्टराइज़ किया गया है।उपयोग के मामले
- ऐप स्टोर या वेब मैनिफ़ेस्ट के लिए ज़रूरी PNG आइकन बनाना, जो SVG स्वीकार नहीं करते।
- वेक्टर लोगो को पारदर्शी बैकग्राउंड वाले PNG में बदलना ताकि उसे प्रेज़ेंटेशन या दस्तावेज़ में लगाया जा सके।
- SVG डायग्राम या चार्ट को JPG में एक्सपोर्ट करना ताकि उसे ईमेल में जोड़ा जा सके या ऐसे प्लेटफ़ॉर्म पर अपलोड किया जा सके जो वेक्टर नहीं लेते।
- हाई-डेंसिटी स्क्रीन के लिए एक ही आइकन के @2x और @3x संस्करण बनाना।
- SVG टेम्पलेट से किसी वेबसाइट की प्रीव्यू छवि (Open Graph) बनाना।
अक्सर पूछे जाने वाले प्रश्न
कौन-सा रिज़ॉल्यूशन चुनना चाहिए?
जो अंतिम उपयोग माँगे। सामान्य स्क्रीन के लिए उतना ही आकार काफ़ी है जिसमें छवि दिखेगी; हाई-डेंसिटी स्क्रीन के लिए उसका 2× या 3× बेहतर रहता है। छपाई के लिए इंच में नाप को 300 से गुणा करें ताकि 300 dpi मिले।
मेरा SVG अपेक्षा से अलग आकार में क्यों आता है?
शुरुआती आकार width और height विशेषताओं से लिया जाता है; अगर वे न हों या प्रतिशत में हों तो viewBox का अनुपात इस्तेमाल होता है। जब दोनों में से कोई न हो, तो ब्राउज़र 300 × 150 px मान लेता है। आप उस मान को अनदेखा कर कस्टम मोड में सटीक चौड़ाई और ऊँचाई लिख सकते हैं।
क्या पारदर्शिता बनी रहती है?
PNG में हाँ, बशर्ते आप पारदर्शी बैकग्राउंड विकल्प चुना रहने दें। JPG में अल्फ़ा चैनल नहीं होता, इसलिए वह हमेशा किसी ठोस रंग पर बनता है: डिफ़ॉल्ट रूप से सफ़ेद, जिसे आप बदल सकते हैं।
बाहरी छवियों या फ़ॉन्ट वाला SVG क्यों विफल हो जाता है?
जब SVG किसी छवि के भीतर बनता है, तो वह दूसरे डोमेन से संसाधन डाउनलोड नहीं कर पाता और ब्राउज़र सुरक्षा कारणों से एक्सपोर्ट रोक देता है। समाधान यह है कि उन संसाधनों को SVG में ही एम्बेड करें: छवियों को data URI के रूप में और टेक्स्ट को पाथ में बदलकर।
क्या PNG से वापस SVG पर जाया जा सकता है?
सीधे नहीं: रास्टराइज़ करने पर वेक्टर जानकारी चली जाती है और सिर्फ़ पिक्सेल बचते हैं। वक्रों को वापस पाने के लिए वेक्टराइज़ेशन करना पड़ता है, जो मूल नहीं बल्कि अनुमानित आकृतियाँ बनाता है। इसलिए मूल SVG हमेशा सहेज कर रखें।