SVGO: ज़रूरी संरचना खोए बिना SVG ऑप्टिमाइज़ करें

पृष्ठ पर इस्तेमाल बिगाड़े बिना SVGO से SVG ऑप्टिमाइज़ करने के लिए मूल रखें, उस संरचना को पहचानें जिस पर पृष्ठ निर्भर है, फिर अलग से ऑप्टिमाइज़ की गई प्रति उसी पृष्ठ में जाँचें। छोटी फ़ाइल और अलग से खोले जाने पर अपरिवर्तित पूर्वावलोकन यह साबित नहीं करते कि CSS चयनकर्ता, स्क्रिप्ट या संदर्भ अब भी काम करते हैं।

हमारा मौलिक बैज यह अंतर दिखाता है। SVGO के डिफ़ॉल्ट प्रीसेट ने स्रोत 437 से 263 बाइट किया, लेकिन वह ID हटा दी जिससे आसपास का HTML सूरज का रंग बदलता था। cleanupIds बंद करने से 281 बाइट की प्रति बनी जिसमें हुक बचा रहा। ये माप SVGO 4.1.0 से इस एक नमूने के हैं, दूसरे चित्रों के लिए संपीड़न की गारंटी नहीं।

SVGO मौजूदा SVG मार्कअप संपादित करता है। केवल PNG या JPG हो तो पहले वेक्टर ज्यामिति बनाएँ या वापस प्राप्त करें। ऑप्टिमाइज़ेशन बिटमैप के अंदर के ऑब्जेक्ट को संपादन योग्य पाथ नहीं बना सकता।

तय करें कि कौन सी SVG संरचना सुरक्षित रखनी है

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

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

पुनः इस्तेमाल होने वाले प्रतीकों के लिए SVG स्प्राइट मार्गदर्शिका संदर्भ इस्तेमाल करने वाला पक्ष बताती है। यह लेख इस बात पर केंद्रित है कि उस पक्ष के फ़ाइल देखने से पहले ऑप्टिमाइज़ेशन क्या बदल सकता है।

बाहरी CSS हुक टूटने का उदाहरण दोहराएँ

Node.js और npm उपलब्ध हों तो खाली अस्थायी फ़ोल्डर लें। यह हाथ से लिखा चित्र input.svg में सहेजें, अंतिम नई लाइन सहित। यह कॉन्फ़िगरेशन नमूना है, PerfectVector रूपांतरण परिणाम नहीं।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

इस उदाहरण में इस्तेमाल सटीक संस्करण स्थापित करें, फिर नई आउटपुट फ़ाइल बनाएँ:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

इसे साफ़ फ़ोल्डर में चलाएँ ताकि मौजूदा svgo.config.mjs अप्रत्याशित सेटिंग न दे। आधिकारिक SVGO रिपॉज़िटरी अलग आउटपुट फ़ाइल नाम और कॉन्फ़िगरेशन लोडिंग बताती है। प्रोजेक्ट बिल्ड में संस्करण और कॉन्फ़िगरेशन संस्करण नियंत्रण में रखें ताकि अपग्रेड सोच-समझकर किया गया बदलाव हो।

default.svg को टेक्स्ट के रूप में खोलें। वृत्त का भरण अब भी मूंगा रंग का है, लेकिन badge-accent ID गायब है। SVG दस्तावेज़ के अंदर उस ID का संदर्भ नहीं था। cleanupIds दस्तावेज़ बताता है कि प्लगइन इस्तेमाल न होने वाली ID हटाता है और संदर्भ वाली ID छोटी करता है। बाहरी पृष्ठ का चयनकर्ता इस नमूने के इनपुट से बाहर है।

असर देखने के लिए SVG मार्कअप सीधे HTML पृष्ठ में रखें और SVG के बाहर यह स्टाइल लगाएँ:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

इस परीक्षण में प्रति पृष्ठ एक प्रति इस्तेमाल करें। मूल SVG का सूरज सुनहरा होता है क्योंकि चयनकर्ता मेल खाता है। डिफ़ॉल्ट ऑप्टिमाइज़ सूरज मूंगा रंग का रहता है क्योंकि ID गायब है। कोई भी फ़ाइल img एलिमेंट से लोड करना अलग परीक्षण होगा: होस्ट पृष्ठ उसी दस्तावेज़ में अंदर के आकार को नहीं चुन रहा होगा।

हुक सुरक्षित रखें, फिर परीक्षण दोहराएँ

उसी फ़ोल्डर में इसे svgo.config.mjs के रूप में सहेजें:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

अब दूसरी प्रति लिखें:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

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

हमने ऊपर के कमांड साफ़ फ़ोल्डर में चलाए और समान कॉन्फ़िगरेशन अलग से SVGO 4.1.0 की JavaScript API से चलाए। CLI और API आउटपुट बाइट स्तर पर समान थे; ऑप्टिमाइज़ फ़ाइलों के अंत में नई लाइन नहीं जोड़ी गई। फिर हर परिणाम अलग HTML दस्तावेज़ में उसी बाहरी CSS नियम के साथ रेंडर किया। ब्राउज़र ने ये परिणाम बताए:

ID सुरक्षित रखने वाले आउटपुट ने 156 बाइट बचाए, इस स्रोत का लगभग 35.7%। यह डिफ़ॉल्ट आउटपुट से 18 बाइट बड़ा था और ज़रूरी व्यवहार सुरक्षित रखता था। खाली स्थान, लाइन अंत, संस्करण और आउटपुट फ़ॉर्मैट से आपकी बाइट संख्या बदल सकती है।

इस परीक्षण में तीनों प्रतियों ने viewBox="0 0 160 160" बनाए रखा। हमने दिखाई देने वाला परिणाम और ब्राउज़र का गणना किया भरण जाँचा। हमने नेटवर्क ट्रांसफ़र समय नहीं मापा और हर ब्राउज़र, संपादक, SVG सुविधा या बिल्ड इंटीग्रेशन नहीं जाँचा।

किसी खास निर्भरता के लिए सेटिंग बदलें

केवल कुछ ID सार्वजनिक हुक हों तो cleanupIds में preserve और preservePrefixes विकल्प भी हैं। निर्भरता का नाम बता सकें तो उनका इस्तेमाल करें और वही उपयोग परीक्षण दोहराएँ। कई SVG साथ इनलाइन होंगे तो डुप्लिकेट ID भी जाँचें। पहले से डुप्लिकेट ID रखना उसे अद्वितीय नहीं बनाता; एक का नाम बदलने पर उसका इस्तेमाल करने वाले संदर्भ अपडेट करने होंगे।

SVG के अंदर स्टाइल या स्क्रिप्ट ऑप्टिमाइज़र का व्यवहार बदल सकती है। cleanupIds दस्तावेज़ ऐसे सुरक्षा उपाय का वर्णन करता है जो ये एलिमेंट मौजूद होने पर पीछे हटता है। यह सुरक्षा दूसरे दस्तावेज़ की CSS पर लागू न मानें और यह समझे बिना सफ़ाई लागू न करें कि कौन से संदर्भ ID पर निर्भर हैं।

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

लेआउट उसके स्केलिंग व्यवहार पर निर्भर हो तो viewBox रखें। removeViewBox प्लगइन दस्तावेज़ स्केलिंग और क्लिपिंग के असर की चेतावनी देता है। वह यहाँ इस्तेमाल दस्तावेज़ित डिफ़ॉल्ट प्रीसेट में नहीं है; स्पष्ट रूप से जोड़ना अलग निर्णय है। पुराने कॉन्फ़िगरेशन की प्रति लेने से पहले जाँचें कि वह किस संस्करण और प्रीसेट के लिए लिखा गया था।

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

डिलीवरी प्रति वहाँ जाँचें जहाँ इस्तेमाल होगी

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

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

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

फ़ाइल ऑप्टिमाइज़ेशन ट्रांसपोर्ट संपीड़न से भी अलग है। SVGZ बनाम SVG मार्गदर्शिका gzip राउंड ट्रिप दिखाती है जो समान स्रोत बाइट वापस देता है। SVGO भेजने से पहले स्रोत बदलता है; gzip फिर उन बाइट को एन्कोड कर सकता है। हर ऑपरेशन का उसके अपने लक्ष्य के अनुसार मूल्यांकन करें।

कब वेक्टराइज़ेशन ऑप्टिमाइज़ेशन से पहले आता है

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

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

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

क्या cleanupIds बंद करने से हर SVG का ऑप्टिमाइज़ेशन सुरक्षित होता है? नहीं। वह इस प्लगइन से ID हटना और छोटा होना रोकता है, लेकिन दूसरे प्लगइन अब भी स्टाइल, समूह, आकार या पाथ डेटा बदल सकते हैं। प्राप्त करने वाले कार्यप्रवाह में इस्तेमाल सुविधाएँ और संदर्भ जाँचें।

ऑप्टिमाइज़ SVG अकेले सही लेकिन पृष्ठ पर गलत क्यों दिखता है? अलग से खोले गए पूर्वावलोकन में बाहरी CSS या स्क्रिप्ट का व्यवहार परखा न गया हो सकता है। हमारे उदाहरण में SVG का अपना मूंगा भरण सामान्य रेंडर हुआ, लेकिन पृष्ठ का सुनहरा रंग बदलाव असफल हुआ क्योंकि चुनी ID हटा दी गई थी।

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

क्या SVGO PNG को वेक्टर पाथ बना सकता है? नहीं। SVGO SVG मार्कअप प्रोसेस करता है। जब चित्र को संपादन योग्य ज्यामिति चाहिए और उपयुक्त वेक्टर मूल मौजूद नहीं हो, तो रास्टर से वेक्टर ट्रेसिंग पहले का ऑपरेशन है।

स्रोत

1. SVGO रिपॉज़िटरी — स्थापना, कमांड लाइन आउटपुट, कॉन्फ़िगरेशन लोडिंग और optimize API समझाती है।
2. SVGO डिफ़ॉल्ट प्रीसेट — प्लगइन सूची, ओवरराइड और इंटीग्रेशन अंतर बताता है।
3. SVGO cleanupIds — ID हटाना, छोटा करना, सुरक्षित रखने के विकल्प और संबंधित सुरक्षा उपाय बताता है।
4. SVGO removeViewBox — viewBox स्पष्ट रूप से हटाने का स्केलिंग जोखिम बताता है।

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