SVG Optimizer क्या है और यह क्या हटाता है?

यह एक in-browser SVG minifier है जो XML prolog, doctype, टिप्पणियाँ, metadata, title व desc, और Inkscape, Sodipodi, व Adobe जैसे tools से editor cruft हटाता है, फिर whitespace collapse करता है। आप प्रत्येक चरण को टॉगल से नियंत्रित करते हैं।

इस टूल से मैं एक SVG कैसे minify करूँ?

अपना SVG मार्कअप इनपुट बॉक्स में पेस्ट करें, जो cleanups आप चाहते हैं उन्हें टॉगल करें, फिर optimized आउटपुट कॉपी करें। byte count और बचाया गया प्रतिशत परिणाम के ऊपर दिखता है ताकि आप छोटा होने की पुष्टि कर सकें।

क्या optimize करने से मेरा SVG कैसा दिखता है वह बदल जाएगा?

नहीं, डिफ़ॉल्ट सेटिंग्स केवल non-visual डेटा और whitespace हटाती हैं। visual paths और shapes सुरक्षित रखे जाते हैं, इसलिए रेंडर किया गया graphic एक जैसा रहता है।

क्या मुझे width और height attributes हटाने चाहिए?

उन्हें केवल तभी हटाएँ जब आपके SVG में एक viewBox हो। viewBox graphic को scalable रखता है, जो responsive और CSS-sized icons के लिए आदर्श है।

SVG Optimizer SVGO से कैसे अलग है?

यह एक हल्का, dependency-free optimizer है जो browser में सबसे सामान्य SVGO cleanups को कवर करता है, बिना किसी build tool या Node setup इंस्टॉल किए।

क्या मेरा SVG कहीं अपलोड होता है?

नहीं। SVG Optimizer आपके मार्कअप को स्थानीय रूप से आपके browser में प्रोसेस करता है, इसलिए आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

SVG ऑप्टिमाइज़र

SVG को छोटा करें: टिप्पणियाँ, मेटाडेटा और एडिटर अवशेष हटाएँ, और रिक्त स्थान संक्षिप्त करें।

आपका SVG आपके browser में स्थानीय रूप से optimize होता है और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

raster images भी छोटी करनी हैं? Image Optimizer आज़माएँ।

SVG ऑप्टिमाइज़र के बारे में

यह SVG optimizer SVG मार्कअप minify करता है ताकि आपके icons और graphics छोटे ship हों और तेज़ी से लोड हों। Figma, Illustrator, Inkscape, या Sketch से एक्सपोर्ट किया गया एक SVG पेस्ट करें और टूल XML prolog, doctype, टिप्पणियाँ, metadata, और Inkscape, Sodipodi, व Adobe के editor-विशिष्ट cruft को हटाता है, फिर bytes कम करने हेतु whitespace collapse करता है। आप वैकल्पिक रूप से root width और height attributes हटा सकते हैं ताकि viewBox responsive layouts के लिए graphic को पूरी तरह scalable रखे। यह एक सुविधाजनक, हल्का SVGO विकल्प है उन फ्रंट-एंड डेवलपर्स, डिज़ाइनरों, और किसी भी व्यक्ति के लिए जिसे SVG minify करना या icons को HTML, CSS, या React components में inline करना है। सब कुछ आपके browser में स्थानीय रूप से प्रोसेस होता है, और टूल पहले व बाद का byte count रिपोर्ट करता है ताकि आप ठीक-ठीक देख सकें कि आपकी फ़ाइल कितनी छोटी हुई।

विशेषताएँ

XML prolog और DOCTYPE घोषणाएँ हटाता है जिनकी inline और web SVGs को ज़रूरत नहीं होती
एक्सपोर्ट किए गए मार्कअप को साफ करने के लिए टिप्पणियाँ हटाता है
metadata, title, और desc elements को हटाता है जो फ़ाइल आकार बढ़ाते हैं
namespaced attributes सहित Inkscape, Sodipodi, और Adobe से editor cruft साफ करता है
वैकल्पिक रूप से root width और height हटाता है ताकि viewBox graphic को scalable रखे
tags के बीच whitespace और अनावश्यक spacing collapse करता है
optimized byte count और बचाया गया प्रतिशत दिखाता है
प्रत्येक cleanup को चालू या बंद टॉगल करें ताकि आप ठीक वही मार्कअप रखें जो आपको चाहिए

SVG ऑप्टिमाइज़र का उपयोग कैसे करें

अपना SVG स्रोत इनपुट बॉक्स में पेस्ट करें।
अपनी ज़रूरत के अनुसार टिप्पणियों, metadata, editor data, dimensions, और whitespace के विकल्प टॉगल करें।
optimized आउटपुट और इसके ऊपर दिखाई गई byte बचत पढ़ें।
optimized SVG कॉपी करें और इसे अपनी प्रोजेक्ट में डालें।

उदाहरण

इनपुट

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- heart icon -->
  <title>heart</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

आउटपुट

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

Prolog, टिप्पणी, और title हटाए गए तथा whitespace collapse किया गया।

सामान्य त्रुटियाँ और समस्या निवारण

dimensions हटाने के बाद graphic गायब हो जाता है या गलत आकार का दिखता है। — width और height हटाना केवल तभी काम करता है जब SVG में एक viewBox हो। यदि इसमें कोई viewBox नहीं है, तो dimensions टॉगल बंद रखें।
आपके CSS या JavaScript द्वारा संदर्भित एक ID या label साफ हो गया। — editor-data विकल्प data-name और namespaced editor attributes हटाता है। यदि आपका कोड उन hooks पर निर्भर है तो इसे बंद कर दें।
title और desc हटाए जाने के कारण accessibility टूट जाती है। — metadata विकल्प title और desc elements हटाता है। जब आप screen-reader labels के लिए उन पर निर्भर हों तो इसे अक्षम करें।
पेस्ट करने के बाद आउटपुट खाली है। — optimizer को वास्तविक SVG मार्कअप चाहिए; सुनिश्चित करें कि आपने पूरा svg element पेस्ट किया है, न कि केवल एक फ़ाइल पथ या एक binary image।

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

SVG Optimizer क्या है और यह क्या हटाता है?: यह एक in-browser SVG minifier है जो XML prolog, doctype, टिप्पणियाँ, metadata, title व desc, और Inkscape, Sodipodi, व Adobe जैसे tools से editor cruft हटाता है, फिर whitespace collapse करता है। आप प्रत्येक चरण को टॉगल से नियंत्रित करते हैं।
इस टूल से मैं एक SVG कैसे minify करूँ?: अपना SVG मार्कअप इनपुट बॉक्स में पेस्ट करें, जो cleanups आप चाहते हैं उन्हें टॉगल करें, फिर optimized आउटपुट कॉपी करें। byte count और बचाया गया प्रतिशत परिणाम के ऊपर दिखता है ताकि आप छोटा होने की पुष्टि कर सकें।
क्या optimize करने से मेरा SVG कैसा दिखता है वह बदल जाएगा?: नहीं, डिफ़ॉल्ट सेटिंग्स केवल non-visual डेटा और whitespace हटाती हैं। visual paths और shapes सुरक्षित रखे जाते हैं, इसलिए रेंडर किया गया graphic एक जैसा रहता है।
क्या मुझे width और height attributes हटाने चाहिए?: उन्हें केवल तभी हटाएँ जब आपके SVG में एक viewBox हो। viewBox graphic को scalable रखता है, जो responsive और CSS-sized icons के लिए आदर्श है।
SVG Optimizer SVGO से कैसे अलग है?: यह एक हल्का, dependency-free optimizer है जो browser में सबसे सामान्य SVGO cleanups को कवर करता है, बिना किसी build tool या Node setup इंस्टॉल किए।
क्या मेरा SVG कहीं अपलोड होता है?: नहीं। SVG Optimizer आपके मार्कअप को स्थानीय रूप से आपके browser में प्रोसेस करता है, इसलिए आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।