SVG ऑप्टिमाइज़र (SVGO)
ब्राउज़र में SVGO से SVG कोड ऑप्टिमाइज़ और मिनिफ़ाई करें। एडिटर मेटाडेटा, कमेंट और फ़ालतू मार्कअप हटाता है और प्रीव्यू के साथ बचा हुआ साइज़ दिखाता है।
SVGO का डिफ़ॉल्ट प्रीसेट इस्तेमाल होता है, जो viewBox, टाइटल और एक्सेसिबिलिटी विवरण बनाए रखता है।
पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड नहीं होता।
SVG ऑप्टिमाइज़र क्या है?
SVG ऑप्टिमाइज़र आपके SVG कोड पर SVGO चलाता है, जो SVG ऑप्टिमाइज़ेशन की मानक लाइब्रेरी है। यह एडिटर मेटाडेटा, कमेंट, छिपे और खाली एलिमेंट हटाता है, पाथ डेटा, संख्याएँ और रंग छोटे करता है, और जो मर्ज हो सकता है उसे मर्ज करता है। आपको ऑप्टिमाइज़ किया कोड, पहले/बाद का प्रीव्यू और साइज़ में कमी मिलती है।
SVG ऑप्टिमाइज़र का उपयोग कैसे करें
- SVG कोड को SVG कोड में पेस्ट करें, या
.svgफ़ाइल छोड़ें/चुनें। - विकल्प बदलें: कई पास (छोटा आउटपुट), संख्या की सटीकता (दशमलव), ID बनाए रखें (अगर CSS या स्क्रिप्ट इन्हें इस्तेमाल करती हैं), width/height की जगह viewBox (रिस्पॉन्सिव), आउटपुट को फ़ॉर्मेट करें।
- पहले/बाद के प्रीव्यू और साइज़ बैज की तुलना करें।
- ऑप्टिमाइज़ किया SVG कॉपी करें या
name-min.svgके रूप में डाउनलोड करें।
उदाहरण
100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
SVG ऑप्टिमाइज़र का उपयोग कब करें
Figma, Illustrator, Inkscape या Sketch से एक्सपोर्ट किए आइकन, लोगो और इलस्ट्रेशन पर, वेबसाइट या ऐप में भेजने से पहले इसका इस्तेमाल करें। अगर कहीं और CSS, JavaScript या <use> रेफ़रेंस एलिमेंट ID पर निर्भर हैं तो ID बनाए रखें (अगर CSS या स्क्रिप्ट इन्हें इस्तेमाल करती हैं) चालू करें। हमेशा प्रीव्यू जाँचें: स्क्रिप्ट या बाहरी रेफ़रेंस वाले असामान्य SVG को हाथ से सुधार की ज़रूरत पड़ सकती है।
SVG ऑप्टिमाइज़र कैसे काम करता है
टूल ज़रूरत पड़ने पर SVGO 4 का ब्राउज़र बिल्ड लोड करता है और उसके preset-default प्लगइन लागू करता है: XML डिक्लेरेशन, doctype, कमेंट, मेटाडेटा और एडिटर नेमस्पेस हटाना, एट्रिब्यूट और संख्यात्मक वैल्यू साफ़ करना, आकृतियों को पाथ में बदलना, ग्रुप समेटना, पाथ डेटा और ट्रांसफ़ॉर्म दोबारा लिखना, और बहुत कुछ। SVGO 4 का डिफ़ॉल्ट प्रीसेट viewBox, <title> और गैर-एडिटर <desc> रखता है, इसलिए स्केलिंग और एक्सेसिबिलिटी बनी रहती है। मल्टीपास में प्लगइन तब तक दोहराए जाते हैं जब तक आउटपुट सिकुड़ना बंद न हो जाए।
सामान्य उपयोग मामले
- कंपोनेंट लाइब्रेरी में जोड़ने से पहले डिज़ाइन टूल से एक्सपोर्ट किए आइकन छोटे करना।
- SVG लोगो को साफ़ करना ताकि उसे HTML में इनलाइन किया जा सके।
- तेज़ पेज लोड के लिए SVG स्प्राइट छोटे करना।
- वह एडिटर मेटाडेटा हटाना जो फ़ाइल पाथ या लेखक के नाम लीक करता है।
सुरक्षा नोट
इमेज आपके ब्राउज़र में Canvas API से ही डिकोड, प्रोसेस और एन्कोड होती हैं। कुछ भी सर्वर पर अपलोड नहीं होता।
अक्सर पूछे जाने वाले प्रश्न
क्या SVGO ऑप्टिमाइज़ेशन लॉसलेस है?
डिफ़ॉल्ट प्रीसेट के साथ यह लगभग सभी मामलों में दृश्य रूप से लॉसलेस है। संख्या की सटीकता बहुत कम (0–1 दशमलव) करने से छोटी आकृतियाँ खिसक सकती हैं, इसलिए प्रीव्यू की तुलना करें।
ऑप्टिमाइज़ करने के बाद मेरा CSS काम करना क्यों बंद हो गया?
SVGO अनइस्तेमाल्ड ID को छोटा या हटा देता है। अगर आपकी स्टाइल या स्क्रिप्ट उन्हें लक्षित करती हैं तो ID बनाए रखें (अगर CSS या स्क्रिप्ट इन्हें इस्तेमाल करती हैं) चालू करें।
क्या यह viewBox हटा देता है?
नहीं। SVGO 4 का डिफ़ॉल्ट प्रीसेट viewBox रखता है। वैकल्पिक width/height की जगह viewBox (रिस्पॉन्सिव) इसके बजाय तय साइज़ हटाता है, जिससे SVG रिस्पॉन्सिव बनता है।