SVG क्लिनर और कंप्रेसर
-
Original Size
-
Optimized Size
-
Savings
ग्राफिक डिज़ाइनरों और फ़्रंटएंड को SVG को ऑप्टिमाइज़ क्यों करना चाहिए?
स्केलेबल वेक्टर ग्राफिक्स (SVG) एक पिक्सेल-आधारित प्रारूप (जैसे JPEG या PNG) नहीं है; यह वास्तव में XML (कोड) से बना ग्राफ़िक होता है। जब डिज़ाइनर Adobe Illustrator, Sketch, या Figma जैसे टूल से SVG फ़ाइलों को जनरेट या निर्यात (Export) करते हैं, तो सॉफ़्टवेयर चुपके से बहुत सारे बेकार मेटाडेटा, डॉकटाइप (Doctypes), परत के नाम (Layer names), और छिपे हुए पथ (Hidden paths) डाल देता है जो चित्र के प्रदर्शन को बदलते नहीं हैं, लेकिन केवल फ़ाइल का आकार भारी कर देते हैं। हमारे SVG ऑप्टिमाइज़र के माध्यम से कोड को साफ़ (Clean) करके, आप ग्राफिक्स को बहुत तेज़ (Fast loading) रेंडर होने वाली हल्की फ़ाइल बना सकते हैं, जो सर्वर की बैंडविड्थ (Bandwidth) और एसईओ (SEO) को बेहतर बनाती है।
8 Optimization Strategies
Toggle individual optimization passes for fine-grained control over what gets removed
Size Reduction Stats
See original size, optimized size, and percentage savings after each optimization run
Safe Optimization
All optimizations preserve the visual appearance of your SVG — only metadata and noise is removed
अपने वेक्टर ग्राफिक्स (SVGs) को कैसे सिकोड़ें और तेज़ करें?
अपना SVG कोड चिपकाएं
अपने `.svg` फ़ाइल को नोटपैड या VS Code में खोलें, संपूर्ण XML कोड की प्रतिलिपि (Copy) बनाएँ और इसे बाईं ओर के डिब्बे में पेस्ट करें।
ऑप्टिमाइज़ेशन टॉगल्स चुनें
जाँचें कि आप अपनी SVG फ़ाइल से कौन सा डेटा साफ़ करना चाहते हैं, जैसे कि 'एडिटर मेटाडेटा हटाएँ' (जो फ़िगमा या एडोब के अतिरिक्त वजन को हटा देता है)।
साफ़ किया गया कोड प्राप्त करें
'ऑप्टिमाइज़ करें' बटन पर क्लिक करें। आपका नया हल्का SVG कोड उपलब्ध होगा, जिसे आप सीधे अपने HTML दस्तावेज़ों (Inline) में उपयोग कर सकते हैं।
SVG ऑप्टिमाइज़र टूल आपकी वेबसाइट की मदद कैसे करता है?
वेबसाइट के कस्टम (Custom) आइकन्स
आइकन सेट या लोगो का आकार कम करना जिन्हें सीधे मेनू या नेविगेशन बार में एंबेडेड (Inline SVG) के रूप में इस्तेमाल किया जाता है, जिससे पेज लोड तेज़ हो जाता है।
लॉटी (Lottie) और वेब एनिमेशन
CSS या GSAP एनिमेशन लागू करने से पहले SVG परत की गंदगी (अदृश्य आईडी और अनावश्यक `<g>` टैग) को हटाना जो जावास्क्रिप्ट को सुस्त (Sluggish) बनाते हैं।
गजब का कोर वेब वाइटल्स (SEO)
हल्के (Lighter) ग्राफ़िक्स वाले वेब पेज ब्राउज़र के लिए तेज़ी से पेंट (FCP/LCP) होते हैं, जो सीधे Google डिस्कवर और एसईओ रैंकिंग (SEO Ranking) में मदद करता है।
सर्वर बैंडविड्थ और सीडीएन (CDN)
महीने में लाखों बार लोड होने वाले लोगो या ग्राफ़िक के 10KB वजन को कम करने से सैकड़ों गीगाबाइट सर्वर ट्रांसफर लागत (Cost) बच सकती है।
वेबसाइट के लिए SVG कोड हैंडलिंग सर्वोत्तम अभ्यास (Best Practices)
✓ फिक्स्ड (Fixed) चौड़ाई और ऊंचाई के बजाय 'viewBox' का प्रयोग करें
सुनिश्चित करें कि आपके SVG फ़ाइल में कठोर हार्डकोडेड चौड़ाई-ऊंचाई पिक्सेल (उदा., `width="500" height="300"`) नहीं है। इसके बजाय, यह देखने के लिए सुनिश्चित करें कि इसमें `viewBox` गुण बरकरार है। viewBox छवि को उत्तरदायी (Responsive) रूप से छोटा या बड़ा होने देता है।
✓ इमेज स्रोत (Img src) बनाम इनलाइन (Inline) SVG
यदि आपको CSS मंडराते (hover) प्रभावों (`fill` रंग बदलने आदि) से SVG को नियंत्रित करने की आवश्यकता है, तो आपको सीधे HTML दस्तावेज़ में SVG कोड को कॉपी-पेस्ट करना होगा। यदि आप इसे केवल एक चित्र के रूप में (`<img src="logo.svg">`) प्रदर्शित कर रहे हैं, तो आप CSS के माध्यम से अंदरूनी पथ रंग (Path Colors) को बदल नहीं सकते।
✓ जटिल पाथ्स को सरल बनाएँ (Simplify Paths)
हालांकि यह ऑप्टिमाइज़र कोड साफ़ करता है, फिर भी यदि आपके चित्र में 10,000 जटिल विज़ुअल बिंदु (Nodes) हैं, तो यह भारी रहेगा। हमेशा Adobe Illustrator के भीतर चित्रण बिंदु (Anchor Points) को सरल बनाने का प्रयास करें।
✓ पहुंच (Accessibility / ARIA) टैग
यदि आपका दृश्यमान SVG वेब पेज में एक महत्वपूर्ण संदेश या लोगो को पहुंचाता है (नॉन-डेकोरेटिव), तो हमेशा दृष्टिहीन उपयोगकर्ताओं के स्क्रीन-रीडर को समझने में मदद करने के लिए ऑप्टिमाइज़ किए गए संस्करण के अंदर একটি `<title>` टैग और `aria-label` जोड़ें।
❓ सामान्य उपयोगकर्ता प्रश्न (FAQ)
ऑप्टिमाइज़ेशन प्रक्रिया के बाद SVG ब्लर (धुंधला) क्यों नहीं होता है?
JPEG (तस्वीरें) के विपरीत, SVG गणितीय समीकरण है (रेखापुंज/Raster नहीं)। संपीड़न (Compression) छवि की दृश्य गुणवत्ता या गणितीय आकृतियों को दूर नहीं करता है, यह केवल उस बेकार पाठ्य कोड (Text code) को हटाता है जिसे डिजाइनरों की फाइलों से वेबसाइटों में स्थानांतरित करते समय जोड़ा जाता है।
एडिटर मेटाडेटा (Editor Metadata) जिसे यह हटाता है, वह क्या है?
Adobe Illustrator, Inkscape या Sketch (सॉफ़्टवेयर) छवि में अपनी कंपनी के विज्ञापन, परत के रंग (Layer IDs), ग्रिड स्नैप सेटिंग्स और एन्कोडिंग हेडर (`<?xml...`) छोड़ देते हैं। वेब ब्राउज़र को स्क्रीन पर इसे पेंट करने के लिए इन चीज़ों की आवश्यकता नहीं होती है। इस हिस्से को हटाना पूरी तरह से सुरक्षित है।
क्या ऑप्टिमाइज़ करने से मेरा CSS एनीमेशन टूट जाएगा?
यदि आप SVG को चेतन (Animate) करने के लिए विशिष्ट ID (`id="rocket_flame"`) का उपयोग कर रहे हैं और आप 'खाली टैग हटाएँ' विकल्प को बहुत सख़्ती से सक्षम करते हैं (जहाँ समूह नष्ट हो सकते हैं), तो कभी-कभी एनीमेशन चयनकर्ता (Selectors) विफल हो सकते हैं। इसीलिए हमारा टूल आपको चयनात्मक नियंत्रण और एक लाइव आउटपुट प्रीव्यू देता है।
क्या मैं अपना SVG कोड PNG स्वरूप (Format) में निर्यात कर सकता हूँ?
यह विशेष टूल केवल SVG वजन कम करने के लिए डिज़ाइन किया गया है और इसके आउटपुट के रूप में SVG (XML कोड) देता है। यदि आपको इसके बजाय एक फ्लैट छवि फ़ाइल (जैसे एक पारदर्शी PNG) की आवश्यकता है, तो आपको SVG से छवि कनवर्टर सॉफ़्टवेयर का उपयोग करने की आवश्यकता है।