SVG फ़ाइल क्या होती है?

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

एक्सटेंशन .svg है और पूरा नाम Scalable Vector Graphics। दोनों उतना नहीं बताते जितना यह कि फ़ाइल अंदर क्या-क्या रख सकती है — और इस पन्ने का बाक़ी हिस्सा इसी के बारे में है।

इसे W3C ने 2001 में जारी किया था। विनिर्देश SVG 1.1 है।

उम्र एक व्यावहारिक वजह से काम की है: फ़ॉर्मेट जितना पुराना, उतने ज़्यादा प्रोग्रामों को उसे सीखने का वक़्त मिला है।

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

SVG फ़ाइल अपना अंदरूनी हिस्सा हूबहू सहेजती है। दोबारा सहेजने से कुछ नहीं बदलता, इसलिए इसे जितनी बार चाहें खोलिए, बदलिए और फिर से सहेजिए — नुक़सान जमा नहीं होता। यही बात इसे सौंपने का नहीं, काम करने का फ़ॉर्मेट बनाती है।

SVG फ़ाइल अपने साथ एक अल्फ़ा चैनल रखती है, इसलिए लोगो के किनारे पीछे जो कुछ भी हो उसके ऊपर नरम बने रहते हैं — वह सफ़ेद डिब्बे में बंद होकर नहीं पहुँचता।

SVG फ़ाइल ठहरी हुई एक तस्वीर के बजाय पूरा एनिमेशन सहेज सकती है। बदलने से पहले यह जान लेना ज़रूरी है: जो लक्ष्य सिर्फ़ एक फ़्रेम रखता है, वह पहला रख लेता है और बाक़ी गिरा देता है — अमूमन बिना बताए।

यह RGB में काम कर सकता है।

हर चैनल पर आठ बिट वही है जो स्क्रीन दिखाती है और जो लगभग हर सौंपने वाला फ़ॉर्मेट साथ लाता है।

SVG फ़ाइल तस्वीर के हिस्सों को आपस में मिलाने के बजाय अलग-अलग रखती है — यही इसे काम वाली फ़ाइल बनाता है। यह जिन भी फ़ॉर्मेटों में बदलती है उनमें से लगभग हर एक उन्हें आपस में मिला देता है, और वह मिलाना पलटा नहीं जा सकता: परतों वाली मूल फ़ाइल सँभालकर रखिए।

Inkscape, Adobe Illustrator और Figma इसे पढ़ते हैं, और इसी तरह के ज़्यादातर दूसरे प्रोग्राम भी।

फ़ाइल न खुले तो कसूर फ़ॉर्मेट का शायद ही कभी होता है — अक्सर प्रोग्राम ही फ़ॉर्मेट से पुराना होता है। किसी पुरानी चीज़ में बदल लेना इससे निकलने का भरोसेमंद रास्ता है, और इस वेबसाइट का बाक़ी हिस्सा इसी के लिए है।

इसे हर मौजूदा ब्राउज़र पढ़ लेता है।

इसलिए इसे किसी पन्ने पर रखना या संदेश के साथ भेजना बेफ़िक्र होकर किया जा सकता है — सामने वाले ने क्या इंस्टॉल कर रखा है, यह सोचने की ज़रूरत नहीं।

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

SVG एक XML दस्तावेज़ है। इसे टेक्स्ट एडिटर में खोलिए तो पढ़ने लायक़ निर्देश मिलते हैं: इस निर्देशांक पर इतनी त्रिज्या का वृत्त खींचो, इस पाथ को इस रंग से भरो। फ़ाइल में कोई पिक्सल बिलकुल नहीं है।

यह अकेली विशेषता इसे बाक़ी हर तस्वीर फ़ॉर्मेट से अलग बनाती है। इसे वर्शन कंट्रोल में diff किया जा सकता है, हाथ से संपादित किया जा सकता है, स्क्रिप्ट से बनाया जा सकता है, HTML संपीड़ित करने वाले उसी gzip से संपीड़ित किया जा सकता है।

फ़ाइल रंग-मूल्यों की ग्रिड के बजाय आकृतियाँ बताती है, इसलिए रेंडरर जो भी आकार माँगा जाए उस पर ताज़ा खींचता है। 24 पिक्सल पर दिखाया और मीटर चौड़ा छापा लोगो एक ही फ़ाइल से आते हैं और दोनों जगह सटीक हैं।

यही वजह है कि लोगो, आइकन, आरेख और चार्ट के लिए SVG सही जवाब है, और फ़ोटो के लिए ग़लत। फ़ोटो में बताने लायक़ कोई आकृति नहीं होती — उसे SVG में बदलना या तो रंगीन आयतों की विशाल फ़ाइल बनाता है या posterised अनुमान।

दो एट्रिब्यूट तय करते हैं SVG ले-आउट में कैसा बरतता है। `width` और `height` इसे अपनी आंतरिक नाप देते हैं; `viewBox` वह निर्देशांक तंत्र परिभाषित करता है जिसमें आकृतियाँ खींची गई हैं। viewBox मौजूद होने पर, ड्राइंग पन्ने के दिए किसी भी बॉक्स में समा जाती है।

SVG के ग़लत आकार में दिखने की लगभग हर शिकायत यहीं से आती है। तय नाप और बिना viewBox वाली फ़ाइल CSS की नाप-सेटिंग अनदेखा कर देती है। ड्राइंग से मेल खाता viewBox जोड़ना आमतौर पर एक-लाइन सुधार है।

पाठ वाली SVG अपने फ़ॉन्ट का नाम लेती है, ठीक वेब पन्ने की तरह। जिस मशीन के पास वह टाइपफ़ेस नहीं, वहाँ रेंडरर कुछ और लगा देता है, अक्षरों की चौड़ाई बदल जाती है, और सावधानी से बिठाया वर्डमार्क हिल जाता है।

मानक बचाव है पाठ को paths में बदलना, जो हर अक्षर को आउटलाइन बना देता है। यह हर जगह दिखावट पक्की करता है और पाठ को हमेशा के लिए असंपादन-योग्य और खोजी-न-जा सकने योग्य बना देता है। लोगो के लिए यह सही सौदा है; बनाए रखे जाने वाले आरेख के लिए नहीं।

जब SVG को `<img>` टैग के बजाय सीधे HTML में लिखा जाता है, इसके एलिमेंट पन्ने का हिस्सा बन जाते हैं। CSS hover पर पाथ का रंग बदल सकता है, स्टाइलशीट आइकन को dark mode के अनुसार ढाल सकती है।

`<img>` से या CSS पृष्ठभूमि की तरह लोड होने पर, इनमें से कुछ लागू नहीं होता — SVG अलग-थलग रेंडर होता है। यह फ़र्क़ तय करता है कौन-सा तरीक़ा इस्तेमाल किया जाए।

क्योंकि यह तस्वीर के बजाय दस्तावेज़ है, SVG में `<script>` एलिमेंट, बाहरी संदर्भ और लिंक हो सकते हैं। आपके अपने डोमेन से परोसी और सीधे खोली गई, वह स्क्रिप्ट आपकी साइट के अधिकार से चलती है।

यही वजह है कि बहुत सारे अपलोड फ़ॉर्म SVG को सीधे मना कर देते हैं। पाने वाले के रूप में यह जान लेना भी लायक़ है: अनजान स्रोत से आई SVG तस्वीर से ज़्यादा HTML फ़ाइल के क़रीब है।

Illustrator, Figma और Sketch बहुत सारा ढाँचा लिखते हैं: एडिटर मेटाडेटा, लेयर नाम, ख़ाली समूह, सोलह दशमलव स्थान वाले निर्देशांक। 800 बाइट का होना चाहिए वाला आइकन अक्सर आठ किलोबाइट पर निर्यात होता है।

ऑप्टिमाइज़र यह सब हटा देते हैं बिना खींची चीज़ बदले, और साठ से अस्सी प्रतिशत घटना आम है। यह तार पर भी अच्छे से संपीड़ित होता है क्योंकि यह पाठ है — सर्वर का भेजा gzip या brotli इसे फिर छोटा कर देता है।

SVG bitmap को base64 डेटा URI की तरह embed कर सकता है, और कुछ निर्यात रास्ते बिना बताए ऐसा करते हैं — कोई ऐसा इफ़ेक्ट वाली आकृति जिसे फ़ॉर्मेट बता नहीं सकता, तस्वीर में समतल होकर SVG में लपेट दी जाती है।

नतीजा `.svg` एक्सटेंशन वाली फ़ाइल है जो पैमाना नहीं बदलती, क्योंकि भीतर पिक्सल की तय ग्रिड है। बड़ा करने पर SVG धुँधली दिखे, तो लगभग हमेशा यही वजह है, और सुधार निर्यात में नहीं, डिज़ाइन फ़ाइल में है।

तय-आकार वाली रास्टर और पारदर्शिता चाहिए तो PNG — पिक्सल नाप सोच-समझकर चुनिए। PNG मना करने वाली जगह जाने वाली आर्टवर्क के लिए JPG, यह मानते हुए कि पारदर्शिता ठोस पृष्ठभूमि बन जाएगी। छपाई के लिए PDF, जिसमें कुछ नहीं खोता।

हर हाल में SVG रखिए। हर रास्टर निर्यात एक आकार के बारे में फ़ैसला है, और मूल ही इकलौता संस्करण है जो कोई भी और आकार बना सकता है। फ़ोटो से SVG में बदलना वह इकलौती दिशा है जो शायद ही कभी काम की है।