SVG ऑप्टिमाइज़र
एडिटर मेटाडेटा, टिप्पणियां, डिफ़ॉल्ट एट्रिब्यूट और अतिरिक्त परिशुद्धता हटाकर SVG फ़ाइलों का आकार घटाएं। 100% क्लाइंट-साइड, बिना अपलोड के।
अपडेट किया गया
SVG Optimizer
Strip editor metadata, comments, default attributes, and collapse whitespace to shrink SVG files without losing rendering fidelity.
SVG source
Savings
Optimization options
अक्सर पूछे जाने वाले प्रश्न
SVG Optimizer क्या है?
SVG Optimizer एक मुफ़्त ऑनलाइन टूल है जो एडिटर मेटाडेटा, टिप्पणियाँ, डिफ़ॉल्ट एट्रिब्यूट और अतिरिक्त परिशुद्धता हटाकर SVG फ़ाइलों का आकार घटाता है। 100% क्लाइंट-साइड, कोई अपलोड नहीं। यह पूरी तरह आपके ब्राउज़र में चलता है, बिना किसी इंस्टॉलेशन या साइन-अप के।
क्या SVG अपलोड किए जाते हैं?
नहीं। ऑप्टिमाइज़र पूरी तरह आपके ब्राउज़र में नेटिव DOMParser का उपयोग करके चलता है। फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं।
gzip आकार का अनुमान कैसे लगाया जाता है?
प्लेनटेक्स्ट आकार के लगभग 30% का एक मोटा अनुमान — जो अच्छी तरह संरचित SVG मार्कअप के लिए सामान्य है। वास्तविक CDN संपीड़न थोड़ा भिन्न हो सकता है।
<title>/<desc> हटाने के बारे में चेतावनी क्यों दी जाती है?
ये वे प्रमुख तरीके हैं जिनसे स्क्रीन रीडर SVG सामग्री की घोषणा करते हैं। सार्वजनिक या UI एसेट के लिए इन्हें रखें; केवल विशुद्ध रूप से सजावटी छवियों से ही इन्हें हटाएँ।
क्या SVG Optimizer उपयोग करने के लिए मुफ़्त है?
हाँ, SVG Optimizer 100% मुफ़्त है — बिना पंजीकरण, बिना छिपे शुल्क और बिना उपयोग सीमा के। पूरी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। SVG Optimizer सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या स्टोर नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या SVG Optimizer मोबाइल डिवाइस पर काम करता है?
हाँ, SVG Optimizer पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं — किसी ऐप को डाउनलोड करने की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में SVG Optimizer खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप रुकावट या उपयोग की सीमा नहीं है।
यह टूल किन प्रोग्रामिंग भाषाओं या फ़ॉर्मैट का समर्थन करता है?
SVG Optimizer लोकप्रिय फ़ॉर्मैट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल का इंटरफ़ेस देखें।
मैं SVG Optimizer का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार सेटिंग्स समायोजित करें, और टूल इसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को अपने क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
SVG ऑप्टिमाइज़र और एक सामान्य इमेज कंप्रेसर में क्या फ़र्क़ है?
एक सामान्य इमेज कंप्रेसर PNG और JPEG जैसे रास्टर फ़ॉर्मैट पर काम करता है, फ़ाइल छोटी करने के लिए पिक्सेल डेटा को त्याग देता है। SVG बिल्कुल भी पिक्सेल नहीं है — यह XML टेक्स्ट है जो आकृतियों का वर्णन करता है, इसलिए इसमें फ़ोटोग्राफ़िक अर्थ में कंप्रेस करने के लिए कुछ है ही नहीं। SVG ऑप्टिमाइज़र इसके बजाय उस टेक्स्ट को फिर से लिखता है: यह वे कैरेक्टर हटा देता है जिनकी ब्राउज़र को कभी ज़रूरत नहीं होती, जैसे एडिटर मेटाडेटा, कमेंट्स, XML डिक्लेरेशन, बेकार नेमस्पेस, और बारह दशमलव अंकों तक ले जाई गई कोऑर्डिनेट्स। चूँकि SVG सादा टेक्स्ट है, हटाया गया हर कैरेक्टर नेटवर्क पर असल में कम भेजा जाने वाला बाइट है, और चूँकि ज्यामिति को छुआ नहीं जाता, इसलिए इमेज पिक्सेल-दर-पिक्सेल बिल्कुल वैसी ही रेंडर होती रहती है। इससे यह बचत लॉसलेस होती है, रास्टर कंप्रेशन के उलट जो साइज़ के बदले क्वालिटी की क़ुर्बानी देता है। ऊपर अपना मार्कअप पेस्ट करें और टूल बताएगा कि हर क्लीनअप पास ने ठीक कितने बाइट्स हटाए।
SVG पाथ कोऑर्डिनेट्स पर मुझे कितने दशमलव अंक रखने चाहिए?
लगभग सभी वेब ग्राफ़िक्स के लिए दो या तीन दशमलव अंक काफ़ी होते हैं। डिज़ाइन ऐप्स अक्सर 100.000000 या 50.987654321 जैसी कोऑर्डिनेट्स एक्सपोर्ट करते हैं, लेकिन स्क्रीन पूरे पिक्सेल में रेंडर करती है, इसलिए तीसरे अंक के बाद के अंक शायद ही किसी दिखने वाले पिक्सेल को बदलते हैं, जबकि फ़ाइल का आकार बढ़ा देते हैं। यह टूल डिफ़ॉल्ट रूप से तीन की प्रिसिज़न रखता है और आपको एक से छह अंकों तक कुछ भी सेट करने देता है, हर न्यूमेरिक एट्रिब्यूट और पाथ कोऑर्डिनेट को उस सीमा तक राउंड करता है, बचे हुए शून्य हटाता है, और 0.5 जैसे मानों में शुरुआती शून्य हटा देता है। छोटे आइकनों के लिए एक या दो अंकों पर जाएँ जहाँ बचत सबसे ज़्यादा होती है; चार या उससे अधिक अंक सिर्फ़ बहुत बड़े इलस्ट्रेशन या सटीक तकनीकी ड्रॉइंग के लिए रखें जहाँ राउंडिंग किसी वक्र को नज़र आने लायक हिला सकती है। प्रिसिज़न घटाने के बाद आकृति सही दिख रही है या नहीं, यह पुष्टि करने के लिए साइड-बाय-साइड प्रीव्यू का इस्तेमाल करें।
क्या SVG से बिना इस्तेमाल वाली IDs हटाना सुरक्षित है?
हाँ, बशर्ते ऑप्टिमाइज़र यह समझने में स्मार्ट हो कि असल में किन IDs को रेफर किया जा रहा है — और यह टूल है। कुछ भी हटाने से पहले, यह पूरे डॉक्यूमेंट को स्कैन करके देखता है कि किन IDs की ओर url(#id), href="#id", और xlink:href="#id" इशारा करते हैं, क्योंकि ग्रेडिएंट्स, फ़िल्टर्स, क्लिप पाथ्स और <use> एलिमेंट्स इसी तरह आपस में आंतरिक रूप से जुड़ते हैं। सिर्फ़ वही IDs हटाई जाती हैं जिन्हें कोई रेफर नहीं करता, इसलिए जिन पर आपका CSS, एनिमेशन, या रीयूज़ेबल सिंबल निर्भर करते हैं, वे बची रहती हैं। ध्यान रखने वाली बात है बाहरी रेफ़रेंस: अगर आपकी JavaScript या किसी दूसरी फ़ाइल की स्टाइलशीट किसी SVG एलिमेंट को id से टारगेट करती है, तो टूल यह नहीं देख पाता और उसे हटा सकता है। स्टैंडअलोन आइकनों के लिए यह शायद ही कभी समस्या बनता है, लेकिन अगर आप अपने SVG को स्क्रिप्ट से नियंत्रित करते हैं, तो नतीजे की समीक्षा करें या "Remove unused IDs" टॉगल बंद रखें। ऊपर आज़माकर देखें और डिफ़ टैब चेक करें।
fill-opacity="1" जैसे डिफ़ॉल्ट एट्रिब्यूट्स को इमेज बदले बिना क्यों हटाया जा सकता है?
हर SVG प्रज़ेंटेशन एट्रिब्यूट का एक बिल्ट-इन डिफ़ॉल्ट स्पेसिफ़िकेशन में परिभाषित होता है, और जब भी एट्रिब्यूट मौजूद नहीं होता, ब्राउज़र उसी डिफ़ॉल्ट को लागू करता है। इसलिए fill-opacity="1", stroke-width="1", stroke-linecap="butt", और opacity="1" सब वही मान बताते हैं जो एलिमेंट के पास वैसे भी होता अगर आप कुछ भी न लिखते। इन्हें शामिल करना नुकसानदेह नहीं है लेकिन शुद्ध बेकार बोझ है — इनके साथ या बिना, रेंडर किया गया नतीजा बाइट-दर-बाइट एक जैसा रहता है। एडिटर्स इन एक्सप्लिसिट एट्रिब्यूट्स को इसलिए जोड़ते हैं क्योंकि वे एलिमेंट की पूरी कंप्यूटेड स्थिति को सीरियलाइज़ करते हैं, न कि उसे बनाने के लिए ज़रूरी न्यूनतम को। यह ऑप्टिमाइज़र स्पेक के डिफ़ॉल्ट्स को जानता है और किसी भी ऐसे एट्रिब्यूट को हटा देता है जिसका मान उसके डिफ़ॉल्ट से मेल खाता है, जो किसी आइकन सेट में तेज़ी से जुड़ता जाता है जहाँ वही बेकार एट्रिब्यूट्स हर आकृति में दोहराए जाते हैं। एक सावधानी: डिफ़ॉल्ट्स तभी हटाएँ जब उन्हें CSS से कुछ भी ओवरराइड न करे, क्योंकि हटाया गया एट्रिब्यूट किसी इनहेरिटेड स्टाइल को हावी होने देता है। क्लीनअप को काम करते देखने के लिए अपनी फ़ाइल पेस्ट करें।
यह बिल्ड पाइपलाइन में SVGO चलाने से कैसे अलग है?
SVGO एक लोकप्रिय Node-आधारित कमांड-लाइन ऑप्टिमाइज़र है जो बिल्ड स्टेप के हिस्से के रूप में चलता है, जिसे प्लगइन्स और कॉन्फ़िग फ़ाइलों से कॉन्फ़िगर किया जाता है। यह टूल वही ऊँची-वैल्यू वाली सफ़ाई करता है — एडिटर मेटाडेटा, कमेंट्स, डिफ़ॉल्ट एट्रिब्यूट्स, बिना इस्तेमाल वाले नेमस्पेस व IDs हटाना, और प्रिसिज़न राउंड करना — लेकिन यह पूरी तरह आपके ब्राउज़र में चलता है, बिना इंस्टॉल, बिना कॉन्फ़िग, और बिना टर्मिनल के। इससे यह उन एक-बारगी क्लीनअप के लिए आदर्श बन जाता है: कोई लोगो जो क्लाइंट ने अभी ईमेल किया हो, कोई आइकन जो आपने Figma से लिया हो, या ऐसा मार्कअप जिसे आप कमिट करने से पहले जांचना चाहते हों। आपको चौदह अलग-अलग टॉगल, चेकरबोर्ड बैकग्राउंड पर लाइव पहले-और-बाद का प्रीव्यू, और बाइट-दर-बाइट डिफ़ मिलता है, ताकि आप ठीक-ठीक देख सकें कि क्या बदला, न कि किसी साइलेंट बिल्ड आउटपुट पर भरोसा करें। किसी नियमित एसेट पाइपलाइन के लिए SVGO ऑटोमेशन अब भी बेहतर है; झटपट इंटरैक्टिव ऑप्टिमाइज़ेशन के लिए, ऊपर अपना SVG पेस्ट करें और नतीजा डाउनलोड करें।
संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
SVG ऑप्टिमाइज़र के बारे में
SVG ऑप्टिमाइज़र एक फ्री टूल है जो ब्राउज़र को इमेज बनाने के लिए ज़रूरत न पड़ने वाली हर चीज़ हटाकर SVG फ़ाइलों का आकार छोटा कर देता है। Inkscape, Illustrator, Sketch और Figma जैसे डिज़ाइन ऐप्स से एक्सपोर्ट की गई वेक्टर फ़ाइलों में काफ़ी फालतू सामान भरा होता है — एडिटर मेटाडेटा, XML डिक्लेरेशन, कमेंट्स, बेकार नेमस्पेस, और बारह दशमलव अंकों तक की कोऑर्डिनेट वैल्यूज़। बस अपना मार्कअप पेस्ट करें या .svg फ़ाइल अपलोड करें, और ऑप्टिमाइज़र उसे उतने ही छोटे रूप में फिर से लिख देता है जो बिल्कुल वही तस्वीर दिखाए। यह फ्रंट-एंड डेवलपर्स, डिज़ाइनरों और उन सभी के लिए बनाया गया है जो वेब पर आइकन या इलस्ट्रेशन भेजते हैं और बिना कोई बिल्ड पाइपलाइन चलाए हल्के-फुल्के एसेट चाहते हैं।
सब कुछ आपके ब्राउज़र में ही होता है। यह टूल ब्राउज़र के नेटिव DOMParser से आपके SVG को पार्स करता है, डॉक्यूमेंट ट्री को सीधे एडिट करता है, और उसे स्थानीय रूप से फिर से सीरियलाइज़ करता है — आपकी फ़ाइलें कभी किसी सर्वर पर अपलोड नहीं होतीं। न कोई साइन-अप चाहिए, न इंस्टॉलेशन, न कोई उपयोग-सीमा, इसलिए आप बिना डर के अनरिलीज़्ड लोगो या क्लाइंट आर्टवर्क भी इससे गुज़ार सकते हैं।
यह क्या हटाता और फिर से लिखता है
ऑप्टिमाइज़र में चौदह अलग-अलग टॉगल हैं, जो डिफ़ॉल्ट रूप से सभी चालू रहते हैं, ताकि आप ठीक-ठीक तय कर सकें कि क्या बदला जाए:
- एडिटर का कचरा — XML डिक्लेरेशन, DOCTYPE, कमेंट्स,
<metadata>ब्लॉक्स, और Inkscape (sodipodi:,inkscape:), Sketch, Adobe व Illustrator के एडिटर-विशिष्ट एलिमेंट्स और एट्रिब्यूट्स हटाता है। - बेकार एट्रिब्यूट्स — खाली एट्रिब्यूट्स और वे प्रॉपर्टीज़ हटाता है जो पहले से ही SVG के डिफ़ॉल्ट पर हैं (जैसे
fill-opacity="1",stroke-width="1",stroke-linecap="butt", याopacity="1"), जो न होने पर भी बिल्कुल वैसा ही रेंडर होते हैं। - बिना इस्तेमाल के नेमस्पेस और IDs — ऐसे
xmlns:डिक्लेरेशन साफ़ करता है जिन्हें कोई रेफर नहीं करता, और उनidएट्रिब्यूट्स को हटाता है जिनकी ओर कोईurl(#id),href, याxlink:hrefइशारा नहीं करता — इसलिए जो IDs आपके CSS, ग्रेडिएंट्स, या<use>एलिमेंट्स के लिए ज़रूरी हैं, वे बनी रहती हैं। - न्यूमेरिक प्रिसिज़न — पाथ कोऑर्डिनेट्स और न्यूमेरिक एट्रिब्यूट्स को आपकी तय की गई प्रिसिज़न (1 से 6 अंक, डिफ़ॉल्ट 3) तक राउंड करता है, बचे हुए शून्य हटाता है, और
0.5जैसे मानों में शुरुआती शून्य हटा देता है। - व्हाइटस्पेस — टैग्स के बीच की इंडेंटेशन और लाइन ब्रेक को एक कॉम्पैक्ट स्ट्रिंग में समेट देता है।
सेविंग्स पैनल कैसे पढ़ें
हर बदलाव के बाद यह टूल मूल आकार, ऑप्टिमाइज़ किया गया आकार, बचत का प्रतिशत, और अनुमानित gzipped आकार दिखाता है। gzip का आंकड़ा एक अनुमान है — लगभग प्लेनटेक्स्ट बाइट काउंट का 30%, जो अच्छी तरह संरचित SVG मार्कअप के लिए सामान्य है — इसलिए इसे सटीक संख्या नहीं बल्कि एक मोटा अंदाज़ा मानें, न कि वह जो आपका CDN असल में भेजेगा। एक साइड-बाय-साइड विज़ुअल प्रीव्यू पहले और बाद के वर्शन को चेकरबोर्ड बैकग्राउंड पर दिखाता है ताकि आप देख सकें कि कुछ भी टूटा नहीं है, और एक डिफ़ टैब हर वर्शन का कच्चा मार्कअप उसके बाइट साइज़ के साथ दिखाता है।
छोटे SVG क्यों मायने रखते हैं
SVG दरअसल सिर्फ़ टेक्स्ट है, इसलिए हटाया गया हर कैरेक्टर नेटवर्क पर असल में कम भेजे जाने वाला बाइट है। किसी आइकन-भारी इंटरफ़ेस या इनलाइन इलस्ट्रेशन वाले पेज पर, ये बाइट्स हर विज़िटर के साथ जुड़ते जाते हैं और आपके Largest Contentful Paint और कुल पेज वेट में जुड़ते हैं। खासतौर पर इनलाइन SVG हर रिक्वेस्ट पर आपके HTML में भेजे जाते हैं, जहाँ एडिटर मेटाडेटा सिर्फ़ बेकार बोझ है। एक बार शोर हट जाने के बाद साफ़ मार्कअप को पढ़ना, एनिमेट करना और CSS से स्टाइल करना भी आसान हो जाता है।
एक ट्रेड-ऑफ़ पर सोच-समझकर फ़ैसला लेना ज़रूरी है। <title> और <desc> एलिमेंट्स हटाने से बाइट्स बचते हैं, लेकिन स्क्रीन रीडर SVG का मतलब मुख्य रूप से इन्हीं से बताते हैं। जब भी यह विकल्प चालू होता है, टूल एक चेतावनी दिखाता है। सार्थक UI आइकन और सार्वजनिक ग्राफ़िक्स के लिए title और description रखें, और इन्हें सिर्फ़ उन पूरी तरह सजावटी इमेजों से हटाएँ जिनमें कोई जानकारी नहीं होती।
नतीजे से संतुष्ट होने पर, इसे क्लिपबोर्ड पर कॉपी करें या optimized.svg के रूप में डाउनलोड करें। अगर आप अपनी फ़ाइल पेस्ट करने से पहले ऑप्टिमाइज़र को काम करते देखना चाहें, तो एक बिल्ट-इन सैंपल एक असली Inkscape एक्सपोर्ट लोड कर देता है।