SVG Optimizer ऑनलाइन

इस SVG optimizer का उपयोग SVG मार्कअप minify करने, टिप्पणियाँ, metadata व editor cruft हटाने, और whitespace collapse करके फ़ाइल आकार छोटा करने के लिए करें। आपके browser में चलता है।

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

निर्माण और रखरखाव: Udit Agarwal

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 ऑप्टिमाइज़र का उपयोग कैसे करें

  1. अपना SVG स्रोत इनपुट बॉक्स में पेस्ट करें।
  2. अपनी ज़रूरत के अनुसार टिप्पणियों, metadata, editor data, dimensions, और whitespace के विकल्प टॉगल करें।
  3. optimized आउटपुट और इसके ऊपर दिखाई गई byte बचत पढ़ें।
  4. 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 में प्रोसेस करता है, इसलिए आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

संबंधित टूल

  • CSS / SCSS फ़ॉर्मेटर — CSS/SCSS/LESS को सुंदर या छोटा बनाएँ, प्रॉपर्टी क्रमबद्ध करें और डुप्लिकेट हटाएँ।
  • HTML फ़ॉर्मेटर — HTML को सुंदर या छोटा बनाएँ, इनलाइन CSS/JS फ़ॉर्मेट करें और परिणाम का पूर्वावलोकन करें।
  • XML फ़ॉर्मेटर — XML को सुंदर बनाएँ, छोटा करें और वैलिडेट करें, और XML ↔ JSON कन्वर्ट करें।
  • JS / TS फ़ॉर्मेटर — Prettier विकल्पों के साथ JavaScript, TypeScript और JSX/TSX को सुंदर बनाएं, या सादा JavaScript मिनिफ़ाई करें।
  • इमेज ऑप्टिमाइज़र — इमेज को पुनः एन्कोड और छोटा करें (JPEG/WebP/PNG), वैकल्पिक रीसाइज़ के साथ।
  • इमेज फ़ॉर्मेट कन्वर्टर — इमेज को PNG, JPEG और WebP के बीच पूरी तरह आपके ब्राउज़र में कन्वर्ट करें।
  • Open Graph जेनरेटर — सोशल कार्ड पूर्वावलोकन के साथ Open Graph और Twitter मेटा टैग जेनरेट करें।
  • Mermaid डायग्राम रेंडरर — Mermaid डायग्राम (फ़्लो, सीक्वेंस, गैंट) को अपने ब्राउज़र में SVG के रूप में रेंडर करें।

कोड फ़ॉर्मेटर के और टूल

  • MongoDB क्वेरी ब्यूटीफायर — MongoDB क्वेरी और find() स्टेटमेंट को आपके ब्राउज़र में सुंदर बनाएँ और इंडेंट करें।
  • MongoDB एग्रीगेशन ब्यूटीफायर — MongoDB एग्रीगेशन पाइपलाइनों को आपके ब्राउज़र में सुंदर बनाएँ और इंडेंट करें।
  • MongoDB एक्सप्लोरर — MongoDB दस्तावेज़ या कलेक्शन नमूने का अन्वेषण करें और उसके फ़ील्ड स्कीमा व प्रकार का अनुमान लगाएँ।
  • OpenAPI / Swagger फ़ॉर्मेटर — OpenAPI / Swagger स्पेसिफिकेशन (JSON या YAML) को फ़ॉर्मेट व वैलिडेट करें और पाथ तथा ऑपरेशन गिनें।
  • CSS Unit Converter — px, rem, em, pt और % के बीच लाइव बदलें।
  • Glob to Regex Converter — एक glob पैटर्न को JavaScript regex में बदलें और टेस्ट करें।
  • HTML to Markdown Converter — किसी भी HTML को साफ़, पठनीय Markdown में बदलें।
  • TOML Formatter और Converter — TOML को फ़ॉर्मैट करें और उसे JSON से और में बदलें।
  • logfmt से JSON — logfmt key=value लॉग को JSON में और वापस बदलें, quoted मानों और type coercion के साथ।
  • dotenv से JSON — एक .env फ़ाइल को JSON ऑब्जेक्ट में और JSON को वापस .env में बदलें।
  • CSV से Markdown टेबल — CSV या TSV को एक GitHub-flavored Markdown टेबल में बदलें।
  • INI से JSON कन्वर्टर — INI कॉन्फ़िग को JSON में और JSON को वापस INI में बदलें।

कोड फ़ॉर्मेटर के सभी टूल देखें (32) · सभी टूल