SVGZ बनाम SVG: संपादन या वितरण की फ़ाइल चुनें

SVGZ, gzip से संपीड़ित SVG फ़ाइल है। संपीड़न खोलने पर पाथ, रंग, टेक्स्ट और एम्बेडेड छवियों सहित SVG दस्तावेज़ वापस मिलता है। W3C का SVG मीडिया प्रकार पंजीकरण .svgz को .svg.gz का वैकल्पिक नाम परिभाषित करता है।

प्राप्तकर्ता के कार्यप्रवाह के अनुसार SVGZ या SVG चुनें। पढ़ने योग्य मार्कअप चाहिए या अनुप्रयोग वही फ़ॉर्मेट माँगता हो तो सामान्य .svg रखें। प्राप्तकर्ता समर्थन करे और संपीड़ित फ़ाइल देने का कारण हो तो .svgz लें। वेबसाइट के लिए फ़ाइलनाम बदलने से पहले HTTP संपीड़न जाँचें: .svg पर समाप्त URL पहले से संपीड़ित सामग्री भेज सकता है।

नीचे का उदाहरण मौलिक 332-बाइट बैज को 243 बाइट में संपीड़ित करके मूल बाइट हूबहू वापस लाता है। यह एक फ़ाइल का परिणाम है, आपके चित्र या पृष्ठ गति का वादा नहीं।

SVG के SVGZ बनने पर क्या बदलता है?

MDN की SVG फ़ाइल प्रकार मार्गदर्शिका सामान्य टेक्स्ट SVG और gzip संपीड़ित SVG अलग करती है तथा SVGZ की आवश्यक सर्वर सेटिंग बताती है। भीतर मौजूद SVG दस्तावेज़ से आप परिचित न हों तो SVG फ़ाइल में क्या होता है से शुरू करें।

संपीड़ित प्रति उपयोगी पैकेजिंग है। संपादन योग्य मूल अलग रखें ताकि ऑब्जेक्ट देख सकें, सुधार कर सकें और अगले टूल के लिए आवश्यक रूप निर्यात कर सकें।

छोटे बैज पर SVGZ संपीड़न और पुनर्प्राप्ति आज़माएँ

इस मौलिक चित्र में नीला-हरा षट्भुज, मूँगा रंग का सूर्य और हल्का पहाड़ है। इसे अस्थायी फ़ोल्डर में badge.svg नाम से सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

gzip, cmp और wc वाले सिस्टम पर उस फ़ोल्डर में ये कमांड चलाएँ। उन फ़ाइलों में रखने योग्य काम पहले से हो तो नए परिणाम फ़ाइलनाम लें।

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

पहला कमांड स्रोत रखते हुए संपीड़ित प्रति लिखता है। -n विकल्प मूल फ़ाइलनाम और टाइमस्टैम्प को gzip हेडर में शामिल नहीं करता। दूसरा कमांड संपीड़ित प्रति को दूसरी फ़ाइल में डिकोड करता है। cmp बाइट जाँचता है और wc -c उनकी संख्या बताता है।

हमने यह क्रम Apple gzip 457.140.3 से चलाया। सभी कमांड सफल निकले और cmp को मूल तथा डिकोड SVG में कोई अंतर नहीं मिला।

संपीड़ित फ़ाइल ने 89 बाइट बचाए, इस स्रोत आकार का लगभग 26.8%। अलग खाली जगह, पंक्ति समाप्ति, मेटाडेटा, चित्र या संपीड़न सेटिंग परिणाम बदल सकती है। बाइट तुलना सिद्ध करती है कि इस संपीड़न और पुनर्प्राप्ति ने स्रोत सुरक्षित रखा। यह ब्राउज़र स्थानांतरण समय, रेंडरिंग प्रदर्शन या संपादन अनुप्रयोग की संगतता नहीं मापती।

SVG माँगने वाले संपादक में केवल SVGZ खोलना हो तो संबंधित ऑपरेशन संपीड़न खोलना है। badge.svgz का नाम badge.svg करने से संपीड़ित बाइट वहीं रहते हैं। इसी तरह SVG का नाम SVGZ करने से gzip नहीं चलता।

संपीड़न और चित्र सफ़ाई अलग रखें

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

मार्कअप अनुकूलन दूसरा ऑपरेशन है। मेटाडेटा हटाना, संख्याओं को अलग ढंग से लिखना या संगत आकार मिलाना संपीड़न से पहले स्रोत दस्तावेज़ बदलता है। बाइट स्तर पर समान gzip संपीड़न और पुनर्प्राप्ति इनमें से कुछ नहीं करती। अनुकूलन टूल SVG भी संपादित करे तो हर बदलाव संपीड़न का मानने के बजाय उसका परिणाम स्वतंत्र जाँचें। SVGO विन्यास और ID सुरक्षित रखने की मार्गदर्शिका मौलिक बैज से यह समीक्षा दिखाती है, जिसका बाहरी CSS हुक डिफ़ॉल्ट प्रीसेट में गायब होता है।

SVG में रास्टर छवि भी हो सकती है। उस दस्तावेज़ को संपीड़ित करने से एम्बेडेड छवि सुरक्षित रहती है; चित्र के ऑब्जेक्ट के चारों ओर संपादन योग्य आउटलाइन नहीं बनती। एम्बेडेड रास्टर निदान छवि कंटेनर और वेक्टर पाथ से बने चित्र में अंतर पहचानने में मदद करता है।

ये अंतर अगला चरण चुनना आसान करते हैं: मार्कअप वापस पाने के लिए संपीड़न खोलें, ज्यामिति बदलने के लिए संपादित करें और उपयुक्त रास्टर चित्र में नए वेक्टर आकार चाहिए तभी ट्रेस करें।

वेबसाइट सामान्य SVG प्रतिक्रियाएँ संपीड़ित कर सकती है

HTTP संपीड़न URL में दिखने वाले फ़ाइलनाम से स्वतंत्र है। सर्वर badge.svg अनुरोध पाकर उस SVG का संपीड़ित रूप भेज सकता है। MDN की HTTP संपीड़न मार्गदर्शिका बातचीत बताती है: अनुरोध समर्थित एन्कोडिंग बताता है और प्रतिक्रिया प्रयुक्त एन्कोडिंग पहचानती है। रूप Accept-Encoding के अनुसार बदले तो प्रतिक्रिया में Vary: Accept-Encoding दिया जाता है ताकि कैश उन संस्करणों में अंतर कर सके।

gzip एन्कोड किए SVG की प्रतिक्रिया में संबंधित हेडर हैं:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type डिकोड मीडिया पहचानता है। Content-Encoding प्राप्तकर्ता को प्रतिक्रिया सामग्री डिकोड करने का तरीका बताता है। MDN का Content-Encoding संदर्भ अंतर समझाता है। हेडर वास्तव में भेजे बाइट का वर्णन करने चाहिए; असंपीड़ित SVG पर Content-Encoding: gzip जोड़ने से वह संपीड़ित नहीं होता।

संग्रहीत .svgz को SVG छवि की तरह भेजने के लिए MDN का SVGZ सर्वर मार्गदर्शन SVG मीडिया प्रकार और gzip सामग्री एन्कोडिंग माँगता है। CDN व्यवहार सहित अंतिम प्रतिक्रिया ब्राउज़र के Network पैनल में देखें। स्थानीय फ़ाइल सफल खुलने से वह प्रतिक्रिया सत्यापित नहीं होती।

मौजूदा SVG को SVGZ से बदलने से पहले जाँचें कि सामान्य SVG प्रतिक्रिया पहले से संपीड़ित है या नहीं। स्थानीय SVG आकार को नेटवर्क स्थानांतरण आकार से मिलाने के बजाय कैश स्थिति सहित समान परिस्थितियों में वास्तविक प्रतिक्रियाओं की तुलना करें। ऊपर का बैज परीक्षण यह वेब तुलना नहीं करता।

ऐसी फ़ाइल दें जिसे अगला अनुप्रयोग उपयोग कर सके

संपादन योग्य हस्तांतरण के लिए पूछें कि प्राप्तकर्ता कौन सा फ़ॉर्मेट आयात करता है। SVG स्वीकार करे लेकिन SVGZ अस्वीकार करे तो संपीड़न खोलकर प्राप्त SVG दें और वह प्रति जाँचें। संपीड़न खोलने से अनुप्रयोग को ऐसी SVG सुविधा का समर्थन नहीं मिलता जिसे वह स्वयं नहीं समझता।

स्वीकृत फ़ाइल इच्छित अनुप्रयोग में खोलें और ऑब्जेक्ट देखें। अक्षर, क्लिपिंग, एम्बेडेड छवियाँ, रंग और महत्वपूर्ण छोटे विवरण जाँचें। यह समीक्षा फ़ाइल डिकोडिंग से अलग रखें: समान स्रोत बाइट भी अलग सुविधा समर्थन वाले अनुप्रयोगों में अलग समझे जा सकते हैं।

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

मूल, वितरण प्रति और प्राप्तकर्ता टूल का नाम बताने वाला छोटा नोट रखें। गंतव्य जाने बिना सबसे छोटी स्थानीय फ़ाइल चुनने से यह अधिक उपयोगी है।

स्रोत को अब भी वेक्टर पाथ चाहिए तो

वेक्टर मूल गायब हो और केवल समतल PNG या JPG लोगो बचे तो PerfectVector का छवि से वेक्टर कार्यप्रवाह संपादन योग्य SVG का एक संभावित संस्करण तैयार करने में मदद कर सकता है। पूर्वावलोकन मूल से मिलाएँ, छेद और अलग क्षेत्र देखें तथा डाउनलोड फ़ाइल इच्छित संपादक में खोलें। चित्र स्वीकार करने के बाद ही संपीड़न चुनें।

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

अक्सर पूछे जाने वाले प्रश्न

क्या SVGZ की गुणवत्ता SVG से अधिक है? नहीं। Gzip संपीड़न संग्रहीत रूप बदलता है। सही डिकोडिंग SVG स्रोत वापस लाती है; उसके पाथ, रंग या एम्बेडेड छवियाँ बेहतर नहीं करती।

SVGZ को SVG कैसे बनाऊँ? Gzip संभालने वाले टूल से संपीड़न खोलें, फिर डिकोड SVG सहेजें। उदाहरण के लिए gzip -dc badge.svgz > roundtrip.svg डिकोड प्रति लिखता है। केवल एक्सटेंशन बदलने से वह ऑपरेशन नहीं होता।

क्या SVGZ हमेशा वेबसाइट तेज़ करता है? एक्सटेंशन से निश्चित गति लाभ नहीं मिलता। सामान्य SVG प्रतिक्रिया में पहले से HTTP संपीड़न हो सकता है। वास्तविक प्रतिक्रिया हेडर, स्थानांतरित बाइट, कैश परिस्थितियाँ और पृष्ठ व्यवहार देखें।

क्या SVG संपीड़ित करने से नोड संख्या घटती है? नहीं। Gzip डिकोडिंग से स्रोत सुरक्षित रखता है। पाथ सरलीकरण या अन्य SVG अनुकूलन अलग ऑपरेशन है जिसकी अपनी चित्र समीक्षा चाहिए।

स्रोत

1. W3C — SVG मीडिया प्रकार पंजीकरण — SVGZ को gzip संपीड़ित SVG और SVG.GZ से उसका संबंध परिभाषित करता है।
2. MDN — SVG से शुरुआत — फ़ाइल रूपों का अंतर और SVGZ प्रतिक्रिया हेडर बताता है।
3. MDN — Content-Encoding — डिकोडिंग और एन्कोडिंग तथा मीडिया प्रकार का संबंध समझाता है।
4. MDN — HTTP में संपीड़न — प्रतिक्रिया संपीड़न के लिए एन्कोडिंग तय करने की प्रक्रिया और कैश संस्करणों के अंतर को बताता है।

वितरण फ़ाइल प्राप्तकर्ता के टूल के अनुरूप चुनें, फिर डिकोड चित्र सत्यापित करें। संपादन योग्य आकार चाहने वाले रास्टर लोगो से शुरू कर रहे हों तो SVG का एक संभावित संस्करण तैयार करें और संपीड़न तय करने से पहले उसके पाथ देखें।