SVG अनुकूलक

यह कैसे काम करता है

1. SVG पेस्ट या अपलोड करें: SVG मार्कअप सीधे दर्ज करें या Illustrator, Figma, Inkscape से निर्यात की गई .svg फ़ाइल अपलोड करें।
2. अनुकूलन पासेस कॉन्फ़िगर करें: चुनें कि कौन से अनुकूलन लागू करें, टिप्पणी हटाना, मेटाडेटा हटाना, आदि।
3. अनुकूलित करें: टूल चुने गए पासेस चलाता है और आकार कमी प्रतिशत प्रदर्शित करता है।
4. डाउनलोड या कॉपी करें: अनुकूलित SVG सहेजें या मार्कअप को अपने कोड में पेस्ट करने के लिए कॉपी करें।

अपने SVG क्यों अनुकूलित करें?

डिज़ाइन टूल से निर्यात की गई SVG फ़ाइलें अनावश्यक डेटा से भरी होती हैं, संपादक मेटाडेटा, इनलाइन शैली घोषणाएँ आदि।

लागू अनुकूलन

• टिप्पणियाँ हटाई गईं: जनरेटर और संपादक टिप्पणियाँ हटाई गईं
• मेटाडेटा हटाया गया: title, desc और XMP तत्व
• खाली समूह मर्ज किए गए: अनावश्यक <g> रैपर तत्व हटाए गए
• पथ सरलीकृत: अनावश्यक पथ कमांड मर्ज और छोटे किए गए
• एट्रिब्यूट साफ़ किए गए: डिफ़ॉल्ट मान और प्रस्तुति एट्रिब्यूट हटाए गए
• ViewBox सामान्यीकृत: सुसंगत समन्वय प्रणाली

SVG और SVGO का संक्षिप्त इतिहास

Scalable Vector Graphics दो W3C प्रस्तावों के बीच प्रतिस्पर्धा के रूप में शुरू हुआ: Adobe, IBM, Netscape और Sun का Precision Graphics Markup Language (PGML), और Microsoft का Vector Markup Language (VML)। दोनों 1998 में जमा किए गए थे; W3C समझौता SVG बन गया, सितंबर 2001 में SVG 1.0 के रूप में अनुशंसित। Internet Explorer ने कुख्यात रूप से IE9 (2011) तक SVG समर्थन भेजने से इनकार कर दिया, जबकि Firefox, Safari और Opera ने इसे 2000 के दशक के मध्य से समर्थित किया। SVG 1.1 2003 में दिखाई दिया, जिसका दूसरा संस्करण 2011 में था। SVG Tiny 1.2 ने 2008 में मोबाइल उपकरणों को लक्षित किया। SVG 2 ने 2016 के आसपास ड्राफ्ट करना शुरू किया लेकिन रुक गया; आज यह एक उम्मीदवार सिफारिश मसौदा बना हुआ है (अंतिम बार 2018 में छुआ गया), जिसमें ब्राउज़र व्यक्तिगत रूप से टुकड़े शिप करते हैं। अनुकूलन बाद में आया। SVGO को Kir Belevich (svg-go) द्वारा बनाया गया था और पहली बार अक्टूबर 2012 में GitHub पर प्रकाशित किया गया था, जावास्क्रिप्ट में लिखा गया था। यह वास्तविक मानक बन गया, webpack-loader, Vite, Sketch, Figma एक्सपोर्ट प्लगइन्स में एकीकृत, और Jake Archibald (Chrome टीम) द्वारा 2015 में लॉन्च किया गया SVGOMG वेब UI। SVGO 3 (2023 में जारी) ने कोडबेस को आधुनिक बनाया। यह उपकरण SVGO के सबसे प्रभावशाली प्लगइन्स का एक सुरक्षित सबसेट लागू करता है, पूरी तरह से आपके ब्राउज़र में चल रहा है।

एक SVG ऑप्टिमाइज़र वास्तव में क्या करता है

• दशमलव परिशुद्धता में कमी। Illustrator M127.348293 जैसे 6 दशमलव अंकों के साथ पथ निर्यात करता है। विशिष्ट आइकन आकारों के लिए तीन दशमलव दृश्य रूप से समान हैं; एक या दो अक्सर पर्याप्त होते हैं। SVGO cleanupNumericValues प्लगइन के माध्यम से डिफ़ॉल्ट रूप से 3 दशमलव का उपयोग करता है। कम परिशुद्धता = छोटी फ़ाइल।
• बेकार समूहों को संकुचित करें। डिज़ाइन उपकरण हर ऑपरेशन को <g> तत्वों में लपेटते हैं; कई सरलीकरण के बाद खाली हो जाते हैं। collapseGroups प्लगइन एकल-बच्चे समूहों को उनके माता-पिता में मिला देता है।
• मेटाडेटा हटाएँ। Illustrator हर निर्यात को XMP पैकेट युक्त <metadata>...</metadata> ब्लॉक से चिह्नित करता है, Inkscape sodipodi नेमस्पेस विशेषताओं के साथ, Figma संपादक आईडी के साथ। इनमें से कोई भी रेंडरिंग को प्रभावित नहीं करता। removeMetadata, removeEditorsNSData, और removeXMLProcInst इन्हें संभालते हैं।
• पथ कमांड अनुकूलन। पूर्ण निर्देशांकों को सापेक्ष में परिवर्तित करें (अक्सर छोटे), लगातार लाइन सेगमेंट को मर्ज करें (l 5,0 l 0,5 दो रहता है; L 5,0 L 5,5 v 5 बन जाता है), z के बाद बेकार Z हटाएँ। convertPathData प्लगइन पथ स्ट्रिंग पर 30-50% बचा सकता है।
• डिफ़ॉल्ट विशेषता हटाना। fill="black", stroke="none", stroke-width="1" डिफ़ॉल्ट हैं; SVGO उन्हें हटाता है। mergeStyles के साथ संयुक्त, यह अक्सर इनलाइन-शैलीगत निर्यात को आधा कर देता है।
• रंग छोटा करना। #ffffff → #fff; rgb(255,255,255) → #fff; नामित रंग (aliceblue) → छोटा होने पर हेक्स। convertColors प्लगइन।
• अप्रयुक्त ID हटाना। संपादक-जनित ID जैसे id="path-7423" आमतौर पर कभी संदर्भित नहीं होते। SVGO का cleanupIds अनाथ ID हटाता है और बाकी को a, b, c... में छोटा करता है।

जहाँ SVG अनुकूलन मायने रखता है

• आइकन सिस्टम। 30 SVG आइकन वाला एक पृष्ठ, प्रत्येक 2 KB का, 60 KB है; प्रत्येक को 800 बाइट्स में अनुकूलित करने से 36 KB बचता है। Heroicons, Lucide, Phosphor, Feather सभी पूर्व-अनुकूलित SVG शिप करते हैं; यदि आपने उन्हें एक डिज़ाइन फ़ाइल से निकाला है, तो आपको यह स्वयं करना होगा।
• लोगो और ब्रांड संपत्ति। ग्राहकों को भेजे गए लोगो अक्सर Illustrator से 50-100 KB होते हैं; अनुकूलित होने पर वे 5-10 KB होते हैं। समान दृश्य निष्ठा, कम बैंडविड्थ, तेज़ पृष्ठ लोड। Wikipedia लोगो SVG एकल अनुकूलन पास के बाद 39 KB से 11 KB तक गिर गया।
• HTML में इनलाइन SVG। जब आप SVG को इनलाइन करते हैं (कोई अतिरिक्त HTTP अनुरोध नहीं), SVG का प्रत्येक बाइट HTML पेलोड को बढ़ाता है जो ब्राउज़र पार्सर को ब्लॉक करता है। 200-बाइट आइकन बनाम 2 KB पहले पेंट समय के लिए मायने रखता है।
• डेटा विज़ुअलाइज़ेशन। D3.js, Observable, ECharts SVG आउटपुट, और React-vis हज़ारों तत्वों के साथ बड़े SVG उत्पन्न करते हैं। 5,000 बिंदुओं वाला एक स्कैटर प्लॉट आसानी से 500 KB कच्चा है; अनुकूलित यह समान रहते हुए 150 KB तक गिर सकता है।
• आइकन फ़ॉन्ट जनरेशन। IcoMoon, Fontello, और Fontastic जैसे उपकरण SVG को आइकन फ़ॉन्ट में परिवर्तित करते हैं। स्रोत SVG को पूर्व-अनुकूलित करना क्लीनर फ़ॉन्ट आउटपुट और छोटी फ़ॉन्ट फ़ाइलें सुनिश्चित करता है।
• प्रिंट और PDF संपत्ति। PDF में SVG एम्बेड करना (Puppeteer, wkhtmltopdf जैसे web-to-PDF टूल के माध्यम से) का अर्थ है कि SVG फूलापन अंतिम PDF में समाप्त होता है। पहले अनुकूलित करें।
• ईमेल-सुरक्षित SVG। कई ईमेल क्लाइंट (Outlook, कुछ Gmail ऐप) SVG को बिल्कुल भी रेंडर नहीं करते; जो करते हैं (Apple Mail, Gmail web), छोटे इनलाइन SVG ईमेल को Gmail 102 KB क्लिपिंग सीमा के नीचे रखते हैं।

अनुकूलन गलतियाँ जो SVG को तोड़ती हैं

• संदर्भित IDs को हटाना। SVG अक्सर fill या stroke में url(#gradient-1) के माध्यम से संदर्भित IDs के साथ <defs> का उपयोग करते हैं। आक्रामक ID हटाना ग्रेडिएंट, मास्क, क्लिप पथ, फ़िल्टर को तोड़ता है। संदर्भों को ट्रैक करने वाले उपकरण का उपयोग करें, अंधा regex नहीं।
• width/height विशेषताओं को आँख मूँदकर हटाना। प्राकृतिक पहलू अनुपात गिराता है। परिणाम: <img src="icon.svg"> कोई आंतरिक आकार के बिना अपने कंटेनर को भरने के लिए खिंचता है, CLS (संचयी लेआउट शिफ्ट) पैदा करता है। कम से कम viewBox रखें; अधिमानतः width/height भी रखें।
• अति-आक्रामक दशमलव कमी। छोटे आइकन पर 0 दशमलव तक कम करने से पथ दृष्टिगत रूप से दांतेदार हो जाते हैं। 3 दशमलव एक सुरक्षित डिफ़ॉल्ट है; केवल 64×64 से बड़े आइकन के लिए या जहाँ पिक्सेल-पूर्णता आवश्यक नहीं है, वहाँ 1 पर जाएँ।
• इनलाइन करते समय xmlns हटाना। स्टैंडअलोन SVG फ़ाइलों को xmlns="http://www.w3.org/2000/svg" की आवश्यकता होती है। HTML में इनलाइन SVG नहीं (HTML5 पार्सर इसे संभालता है), लेकिन यदि आप बाद में SVG को फ़ाइल में निकाल सकते हैं, तो xmlns रखें। यहाँ भ्रम Safari के SVG रेंडरिंग को तोड़ता है।
• currentColor को हार्डकोडेड fill से बदलना। fill="currentColor" एक शक्तिशाली CSS हुक है: आइकन टेक्स्ट रंग का उत्तराधिकारी है। आक्रामक ऑप्टिमाइज़र इसे गणना मूल्य से बदलते हैं, डार्क मोड और थीम आइकन सिस्टम तोड़ते हैं।
• पथों को विलय करना जो अलग रहने चाहिए। कुछ एनिमेशन विशिष्ट पथ IDs को लक्षित करते हैं; कुछ पहुँच-योग्यता उपकरण व्यक्तिगत <title> टेक्स्ट के साथ कई <path> तत्वों पर भरोसा करते हैं। mergePaths प्लगइन इनको नष्ट करता है। एनिमेटेड या पहुँच-योग्य SVG के लिए इसे अक्षम करें।
• पहुँच-योग्य <title> और <desc> को छीनना। स्टैंडअलोन छवियों के रूप में या <img> टैग में उपयोग किए जाने वाले SVG को स्क्रीन रीडर के लिए <title> की आवश्यकता होती है (alt टेक्स्ट के समान)। आक्रामक मेटाडेटा हटाने से यह छीन जाता है। या तो शीर्षक रखें, या इनलाइन SVG तत्व पर aria-label जोड़ें।

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

SVG अनुकूलन वास्तव में कितना बचा सकता है?

यह स्रोत पर बहुत निर्भर करता है। Adobe Illustrator निर्यात अक्सर पहले पास पर 60-80% सिकुड़ते हैं, ज्यादातर मेटाडेटा, संपादक नेमस्पेस, और दशमलव-परिशुद्धता कमी से। Figma निर्यात बॉक्स से बाहर अधिक स्वच्छ होते हैं (आम तौर पर 20-40% बचत)। एक डेवलपर द्वारा हस्तलिखित SVG? अक्सर 5-15%, क्योंकि छीनने के लिए ज्यादा कुछ नहीं है। Wikipedia लोगो, Illustrator फूलापन का एक चरम मामला, 39 KB से 11 KB तक गया। Figma से एक विशिष्ट 24×24 आइकन 1.4 KB से 0.6 KB तक गिरता है।

मुझे SVG को कब इनलाइन करना चाहिए बनाम बाहरी फ़ाइल के रूप में उपयोग करना चाहिए?

इनलाइन (HTML में <svg>...</svg>) छोटे आइकन (2 KB से कम) के लिए, फोल्ड के ऊपर महत्वपूर्ण सामग्री, और कहीं भी जहाँ आपको SVG को स्टाइल करने के लिए CSS की आवश्यकता है (उदा. currentColor, होवर स्टेट, डार्क मोड)। बाहरी फ़ाइल (<img src="icon.svg"> या CSS background-image) बार-बार उपयोग किए जाने वाले समान आइकन के लिए (ब्राउज़र कैश करता है), बड़े चित्रण, CSS थीमिंग की आवश्यकता नहीं है। SVG स्प्राइट (एकल फ़ाइल में कई <symbol> तत्व, <use> द्वारा संदर्भित) 2014-2019 का आइकन-सिस्टम पैटर्न था, अब बड़े पैमाने पर React/Vue/Svelte में इनलाइन-svg घटकों द्वारा प्रतिस्थापित।

क्या असंतुलित SVG में सुरक्षा जोखिम हैं?

हाँ। SVG <script> टैग और onload, onclick इवेंट हैंडलर एम्बेड कर सकता है; उपयोगकर्ता-अपलोडेड SVG एक XSS वेक्टर हैं। SVG <image href="..."> के माध्यम से बाहरी संसाधनों को संदर्भित कर सकता है, दर्शक का IP लीक कर सकता है। SVG फ़ॉन्ट (बहिष्कृत लेकिन अभी भी पार्स योग्य) में ऐतिहासिक रूप से बफर ओवरफ्लो था। एक अच्छा ऑप्टिमाइज़र सफाई के हिस्से के रूप में <script> और इवेंट हैंडलर को छीन देता है; यदि आप उपयोगकर्ता SVG अपलोड स्वीकार करते हैं, तो सेवा से पहले उन्हें कठोर सैनिटाइज़र (SVG प्रोफ़ाइल के साथ DOMPurify) के माध्यम से चलाएँ।

क्या मैं कमांड लाइन का उपयोग करके SVG को अनुकूलित कर सकता हूँ?

हाँ। npx svgo input.svg -o output.svg कैनोनिकल SVGO लाइब्रेरी का उपयोग करता है। svgo.config.js के माध्यम से प्लगइन्स कॉन्फ़िगर करें। CI एकीकरण: webpack में imagemin-svgo, vite-plugin-svgo, GitHub Action antfu/svg-opt। बैच अनुकूलन के लिए: svgo -f ./icons -o ./icons-optimised। यहाँ का ब्राउज़र टूल एक बार के लिए तेज़ है और Node स्थापित किए बिना काम करता है।

क्या मेरा SVG यहाँ अनुकूलित करते समय सर्वर पर भेजा जाता है?

नहीं। अनुकूलन पूरी तरह से आपके ब्राउज़र में JavaScript के माध्यम से आपके द्वारा पेस्ट किए गए SVG मार्कअप पर चलता है। अनुकूलन करते समय DevTools में नेटवर्क टैब खोलें; आप शून्य आउटबाउंड अनुरोध देखेंगे। मालिकाना लोगो, अप्रकाशित आइकन डिज़ाइन, आंतरिक कॉर्पोरेट SVG, और NDA के अधीन किसी भी चीज़ के लिए सुरक्षित।

संबंधित टूल