बस एक मिनट...(/)
हम आपकी छवियों को ऑप्टिमाइज़ कर रहे हैं। कृपया प्रतीक्षा करें, हम आपके लिए सर्वोत्तम गुणवत्ता सुनिश्चित कर रहे हैं।
बहुत बढ़िया, हमने आपकी छवियों को सफलतापूर्वक संपीड़ित कर दिया है।
छवियाँ ऑप्टिमाइज़ की गईं।
ऑनलाइन SVG छवियों को संपीड़ित करें
मेटाडेटा हटाएं, वेक्टर बनाए रखें: आपका SVG बिल्कुल वैसा ही दिखेगा
ऑप्टिमाइज़ किया जा रहा है...
SVG फ़ाइलों को संपीड़ित करें और संपादक द्वारा छोड़ी गई चीज़ों को हटाएँ
अगर आप किसी SVG को Notepad में खोलेंगे, तो आपको सब कुछ दिखेगा: टैग, नंबर, टेक्स्ट। यही इसका फॉर्मेट है। इसमें कोई पिक्सल नहीं, कोई फ़ोटोग्राफ़ नहीं, बस आकृतियाँ बनाने के निर्देश होते हैं। इसका मतलब है कि यहाँ संपीड़न का अर्थ बदल जाता है। कुछ भी निचोड़ा या अनुमानित नहीं किया जाता। केवल अनावश्यक टेक्स्ट हटा दिया जाता है, और ड्राइंग जस की तस रहती है।
असल में फ़ाइल का वज़न कहाँ से आता है
लगभग कुछ भी आर्टवर्क नहीं होता। जब आप Illustrator, Figma या Inkscape से कोई लोगो एक्सपोर्ट करते हैं, तो फ़ाइल के साथ संपादक के कागज़ात भी आ जाते हैं: एक जनरेटर कमेंट, एक DOCTYPE जिसकी 2008 के बाद से ज़रूरत नहीं रही, एक XML घोषणा, एक मेटाडेटा ब्लॉक जो RDF में दस्तावेज़ का वर्णन करता है, लेयर के नाम, और एक स्टाइल ब्लॉक जिसमें ऐसी क्लासेस होती हैं जिन्हें कोई एलिमेंट इस्तेमाल नहीं करता। हमने एक असली लोगो पर परीक्षण किया, तो ये सब मिलाकर फ़ाइल के लगभग दो-तिहाई हिस्से में थे। आकृतियाँ बहुत छोटा हिस्सा थीं।
फिर आते हैं नंबर। संपादक निर्देशांक को पूरी फ्लोटिंग पॉइंट प्रिसीजन के साथ लिखते हैं, तो एक आयत जो 10 पर है और 180 चौड़ी है, उसे 10.000000 और 180.00000000 के रूप में स्टोर किया जाता है। हर पथ के हर बिंदु पर ऐसा होने से केवल दशमलव ही ड्राइंग से ज़्यादा भारी हो सकते हैं।
यह वेक्टर ही रहता है, इसलिए गुणवत्ता में कोई कमी नहीं आती
यही वह बात है जिसकी लोग बेवजह चिंता करते हैं। SVG में कोई रेज़ोल्यूशन नहीं होता। यह हर बार उस आकार में नया बनता है जिसमें उसे दिखाया जाता है, चाहे वह 16 पिक्सल का फेविकॉन हो या एक होर्डिंग। मेटाडेटा ब्लॉक हटाने से इनमें से कुछ भी नहीं बदलता। जो फ़ाइल आपको वापस मिलती है, वह ठीक उसी तरह स्केल होती है जैसे आपने अपलोड की थी, हर आकार में एक जैसी दिखती है, और आपके बनाए प्रोग्राम में पूरी तरह एडिटेबल रहती है।
क्या हटाया जाता है
साफ-सफाई को जान-बूझकर सतर्कता से किया जाता है। यह केवल उन्हीं चीज़ों को हटाता है जिनका रेंडरिंग पर कोई असर नहीं पड़ता।
| हटाया गया | रखा गया |
|---|---|
| संपादक की टिप्पणियाँ और जनरेटर स्ट्रिंग्स | हर आकृति, पथ और वक्र |
| मेटाडेटा ब्लॉक और उसके RDF नामस्थान | रंग, ग्रेडिएंट और अपारदर्शिता |
| DOCTYPE और XML घोषणा | टेक्स्ट एलिमेंट और फॉन्ट्स |
| ऐसी परिभाषाएँ जिनका कोई संदर्भ नहीं | प्रयुक्त फ़िल्टर, मास्क और क्लिप पथ |
| खाली समूह और लेयर | ट्रांसफॉर्म और viewBox |
| निर्देशांकों में अतिरिक्त दशमलव स्थान | कोई भी चीज़ जो दृश्य को बदलती है |
छोटी SVG फ़ाइलें फ़ोटो से ज़्यादा मायने क्यों रखती हैं
SVG आमतौर पर लोगो या आइकन होता है, यानी यह हर पेज के हेडर में बैठता है और बाकी सब कुछ लोड होने से पहले लोड होता है। फ़ोटो देर से और धीरे-धीरे लोड होती हैं। आइकन ऐसा नहीं करते। हेडर लोगो से कुछ किलोबाइट्स कम करना पेज की स्पीड के लिए उतना ही फायदेमंद है जितना कि किसी आर्टिकल के बीच की इमेज से उतना ही कम करना, क्योंकि ब्राउज़र हेडर के लोड होने का इंतजार करता है तभी वह पेज दिखा सकता है।
डिप्लॉय करने से पहले एक बात ज़रूर जांचें
साफ-सफाई के दौरान फ़ाइल के भीतर आंतरिक id एट्रिब्यूट्स को छोटा किया जाता है। एक ही SVG के भीतर रेफरेंस को भी उसी के अनुसार अपडेट किया जाता है, जिससे ग्रेडिएंट, मास्क और क्लिप पथ पहले की तरह काम करते रहते हैं और ड्राइंग बिल्कुल वैसी ही रेंडर होती है। लेकिन फ़ाइल के बाहर के कोड के बारे में यह नहीं जान सकता। अगर आपकी SVG किसी आइकन स्प्राइट में है जिसे अन्य पेज इस्तेमाल करते हैं, या कोई स्टाइलशीट या स्क्रिप्ट id से किसी एलिमेंट को पकड़ती है, तो फ़ाइल बदलने के बाद उन हुक्स को ज़रूर जांचें। एक साधारण लोगो या एक्सपोर्टेड आइकन के लिए, जो अधिकांश SVG होते हैं, कुछ भी जांचने की ज़रूरत नहीं।
अगर आपकी SVG में कोई फ़ोटो है
कभी-कभी SVG असल में वेक्टर नहीं होती। अगर आप Illustrator में आर्टबोर्ड पर फ़ोटो रखते हैं और SVG के रूप में एक्सपोर्ट करते हैं, तो वह फ़ोटो XML के भीतर एक लंबी base64 स्ट्रिंग के रूप में एम्बेड हो जाती है। फ़ाइल में केवल एक आकृति के साथ भी इसका आकार दो मेगाबाइट हो सकता है। मार्कअप की सफाई उस ब्लॉक को नहीं छूती, क्योंकि वह मार्कअप नहीं है। अगर आपकी फ़ाइल बहुत कम नहीं हुई और उसमें शुरू से ही फ़ोटो थी, तो यही वजह है, और इसका हल है कि इमेज को निकालें और उसे JPEG या PNG के रूप में अलग से संपीड़ित करें।
कुछ भी सेट करने की ज़रूरत नहीं
कोई विकल्प नहीं, कोई संपीड़न स्तर नहीं और कोई एडवांस टैब नहीं। फ़ाइल अपलोड करें, साफ-सुथरी फ़ाइल वापस पाएं। एक साथ कई फ़ाइलें भी वैसे ही काम करती हैं, आप उन्हें एक-एक करके डाउनलोड कर सकते हैं या पूरी सेट को ZIP में डाउनलोड कर सकते हैं।
आपकी फ़ाइलों का क्या होता है
फ़ाइलें एन्क्रिप्टेड कनेक्शन के ज़रिए भेजी जाती हैं, साफ की जाती हैं, और एक घंटे बाद सर्वर से हटा दी जाती हैं। कुछ भी स्टोर नहीं किया जाता, और कुछ भी किसी अन्य उद्देश्य के लिए इस्तेमाल नहीं होता।
आपको क्या मिलता है
- संपादक का मेटाडेटा, जनरेटर टिप्पणियाँ, DOCTYPE और अप्रयुक्त परिभाषाएँ हटाई जाती हैं
- निर्देशांक को नौ दशमलव स्थानों के बजाय उपयुक्त प्रिसीजन तक गोल किया जाता है
- एक फ़ाइल जो अब भी अनंत रूप से स्केल होती है और आपके संपादक में खुलती है
- हर आकार में एक जैसी रेंडरिंग, मूल फ़ाइल से मिलान करके सत्यापित
- बैच अपलोड, एक-एक करके डाउनलोड या पूरी सेट को ZIP में डाउनलोड करें
- कोई खाता नहीं, कोई इंस्टॉल नहीं, और फ़ाइलें एक घंटे बाद सर्वर से हटा दी जाती हैं
अब आगे क्या?
क्या आप ऐसे लोगो के साथ काम कर रहे हैं जो बिटमैप के रूप में भी है? PNG संपीड़ित करें पारदर्शी संस्करण को संभालता है और WebP संपीड़ित करें आधुनिक संस्करण को। और अगर SVG में कोई फ़ोटो छुपी हुई निकली, तो JPG संपीड़ित करें वही जगह है जहाँ उस तस्वीर को जाना चाहिए।
अक्सर पूछे जाने वाले प्रश्न
नहीं, और ऐसा हो ही नहीं सकता। SVG में कोई पिक्सल या रेज़ोल्यूशन नहीं होता। यह ड्राइंग के निर्देशों का एक सेट है जिसे ब्राउज़र हर बार उस आकार में नया बनाता है जिसमें इमेज दिखाई देती है, इसलिए यह फोन पर उतना ही तेज़ दिखता है जितना होर्डिंग पर। फ़ाइल की सफाई से केवल वह टेक्स्ट हटता है जो कुछ बनाता नहीं, जैसे टिप्पणियाँ और मेटाडेटा। आकृतियाँ, वक्र और रंग जस के तस रहते हैं, इसलिए परिणाम हर आकार में एक जैसा दिखता है।
वह कागज़ी काम जो आपके संपादक ने जोड़ा था। Illustrator, Figma और Inkscape सभी एक जनरेटर कमेंट, एक XML घोषणा, एक DOCTYPE, RDF में एक मेटाडेटा ब्लॉक, लेयर के नाम, और अक्सर एक स्टाइल ब्लॉक जिसमें ऐसी क्लासेस होती हैं जिन्हें कोई इस्तेमाल नहीं करता, लिखते हैं। इसके अलावा, निर्देशांक पूरी प्रिसीजन के साथ लिखे जाते हैं, तो 180 का मान 180.00000000 के रूप में स्टोर होता है। एक सामान्य एक्सपोर्टेड लोगो में, ये सब मिलाकर फ़ाइल के लगभग दो-तिहाई हिस्से में होते हैं। जो चित्र बनाता है, वह छोटा हिस्सा है।
हाँ। आउटपुट एक सामान्य SVG है, इसलिए यह Illustrator, Figma, Inkscape या किसी भी टेक्स्ट एडिटर में ठीक वैसे ही खुलता है जैसे मूल फ़ाइल। फर्क सिर्फ इतना है कि संपादक की अपनी कुछ बही-खाता जानकारी हटा दी गई है, इसलिए लेयर के नाम वैसे वापस नहीं आ सकते जैसे आपने छोड़े थे। आर्टवर्क खुद जस का तस और पूरी तरह एडिटेबल रहता है।
इसके दो सामान्य कारण हैं। या तो वह पहले से ही ऑप्टिमाइज़ थी, जैसा कि उन SVGs के साथ होता है जिन्हें ऐसे टूल्स से एक्सपोर्ट किया गया है जो पहले ही सफाई कर देते हैं या जो पहले किसी ऑप्टिमाइज़र से गुजर चुकी हैं, या फिर फ़ाइल में कोई एम्बेडेड फ़ोटो है। दूसरा कारण लोगों को चौंका देता है: अगर आप Illustrator में आर्टबोर्ड पर फ़ोटो रखते हैं और SVG के रूप में एक्सपोर्ट करते हैं, तो वह फ़ोटो XML के भीतर एक base64 ब्लॉक के रूप में एम्बेड हो जाती है। वह ब्लॉक इमेज डेटा होता है, मार्कअप नहीं, इसलिए मार्कअप की सफाई उसे वैसे ही छोड़ देती है। अगर दो मेगाबाइट की SVG में कोई फर्क नहीं पड़ा, तो उसे टेक्स्ट एडिटर में खोलें और data:image से शुरू होने वाली बहुत लंबी स्ट्रिंग देखें।
यह संभव है, और डिप्लॉय करने से पहले यह जानना ज़रूरी है। सफाई के दौरान फ़ाइल के भीतर id एट्रिब्यूट्स को छोटा किया जाता है। एक ही SVG के भीतर रेफरेंस को उसी के अनुसार फिर से लिखा जाता है, जिससे ग्रेडिएंट, मास्क और क्लिप पथ पहले की तरह काम करते रहते हैं और इमेज जस की तस रेंडर होती है। लेकिन फ़ाइल के बाहर का कोड अलग मामला है: अगर कोई स्टाइलशीट id से किसी एलिमेंट को टार्गेट करती है, अगर JavaScript किसी विशेष नोड को एनिमेट करता है, या अगर फ़ाइल किसी स्प्राइट का हिस्सा है जिसे अन्य पेज रेफरेंस करते हैं, तो फ़ाइल बदलने के बाद उन्हें ज़रूर जांचें। एक स्टैंडअलोन लोगो या एक्सपोर्टेड आइकन के लिए, जो अधिकांश SVG होते हैं, चिंता की कोई बात नहीं।
हाँ, और दोनों एक-दूसरे के पूरक हैं, प्रतिस्पर्धी नहीं। यह सफाई वह टेक्स्ट हटाती है जिसे फ़ाइल में होना ही नहीं चाहिए। Gzip, जिसे आपका वेब सर्वर फ़ाइल भेजते समय लागू करता है, जो भी टेक्स्ट बचता है उसे संपीड़ित करता है। दोनों करना सामान्य प्रैक्टिस है और संयुक्त परिणाम अकेले किसी एक से छोटा होता है। यह भी जांचना ज़रूरी है कि आपके सर्वर पर image/svg+xml कंटेंट टाइप के लिए संपीड़न चालू है या नहीं, क्योंकि कुछ डिफ़ॉल्ट कॉन्फ़िगरेशन केवल HTML, CSS और JavaScript को कवर करते हैं।