SVG दबाएँ - और देखिए हर बाइट कहाँ गया
ज़्यादातर SVG अनुकूलक आपको एक ही आँकड़ा देते हैं: 42% छोटा। वह आँकड़ा ठीक वही छिपा लेता है जो आपको जानना चाहिए - इनमें से कितने अंक उस इंडेंटेशन को हटाने से आए जिसकी किसी को याद नहीं आएगी, और कितने निर्देशांक गोल करने या सुलभता वाला लेबल हटाने से। यह टूल हर चरण के लिए बाइट का आँकड़ा बताता है, आपकी अपनी फ़ाइल पर, और आपको उनमें से किसी को भी बंद करने देता है। यह पूरी तरह आपके अपने डिवाइस पर एक Web Worker में चलता है - हमारे SVG समूह का इकलौता टूल जो ऐसा कर सकता है, क्योंकि अनुकूलन शुद्ध टेक्स्ट का काम है, उसमें रेंडरिंग है ही नहीं। कुछ अपलोड नहीं होता, और सफ़ाई हर फ़ाइल पर सबसे पहले चलती है, चाहे आप कहें या न कहें, क्योंकि यह टूल आपको स्रोत कोड लौटाता है और वह कोड आपकी किसी पेज में जाकर चिपकेगा।
इस टूल का उपयोग कैसे करें
अपनी SVG फ़ाइलें छोड़ें
ऊपर वाले बक्से पर एक या कई SVG खींचकर छोड़िए, प्रति फ़ाइल 5 MB तक। हर फ़ाइल सामग्री से जाँची जाती है और ठोस कारण के साथ लौटा दी जाती है अगर वह सचमुच SVG नहीं है या उसमें एंटिटी-विस्तार वाला भार है।
चुनें कि कौन-से चरण चलें
बारह स्विच, एक को छोड़कर सब डिफ़ॉल्ट रूप से चालू। <title> तत्व हटाना जान-बूझकर बंद रखा गया है, क्योंकि स्क्रीन रीडर आपकी ग्राफ़िक के लिए यही पढ़ता है - चालू करेंगे तो पैनल वहीं चेतावनी देगा, चालीस बाइट के बदले लेबल चुपचाप गँवाने के बजाय।
निर्देशांक की परिशुद्धता तय करें
स्लाइडर तय करता है कि पथ के आँकड़ों में कितने दशमलव बचें, डिफ़ॉल्ट तीन। संपादक से निकली फ़ाइलों में अक्सर सबसे बड़ी बचत यही होती है, क्योंकि Illustrator आठ दशमलव तक निर्देशांक लिखता है जो किसी भी प्रिंटर की क्षमता से महीन स्थिति बताते हैं।
अनुकूलित कीजिए और तुलना कीजिए
हर फ़ाइल मूल और अनुकूलित रूप साथ-साथ दिखाती है। अगर ये दोनों थंबनेल कभी अलग दिखें तो किसी चरण ने कुछ बिगाड़ा है - यह दृश्य जाँच इसीलिए है, ताकि आपको नतीजे पर आँख मूँदकर भरोसा न करना पड़े।
कॉपी या डाउनलोड करें
अनुकूलित स्रोत सीधे क्लिपबोर्ड में कॉपी कीजिए ताकि इनलाइन चिपकाया जा सके, या फ़ाइल के रूप में डाउनलोड कीजिए। कई फ़ाइलें बदली हों तो पूरा जत्था एक ही ZIP में ले जाइए।
अक्सर पूछे जाने वाले प्रश्न
मेरी फ़ाइल असल में कितनी छोटी होगी?
यह चित्र से कहीं ज़्यादा इस पर निर्भर करता है कि फ़ाइल आई कहाँ से है। हमने चार मापीं: Illustrator शैली का निर्यात 1,091 से 401 बाइट पर आया, यानी 63% कम। Figma शैली का 730 से 525 पर, यानी 28%। Lucide का डाउनलोड आइकन 4% कर पाया, और हमारी अपनी साइट का लोगो सिर्फ़ 2%।
आइकन लगभग छोटा क्यों नहीं हुआ?
क्योंकि वह हम तक पहुँचने से पहले ही अनुकूलित था। Lucide की फ़ाइल 291 बाइट की शुद्ध ज्यामिति है, बिना टिप्पणियों, बिना मेटाडेटा, बिना संपादक के गुणों और छोटे निर्देशांकों के साथ - चित्र बदले बिना हटाने लायक कुछ बचा ही नहीं। अच्छा आइकन संग्रह ऐसी फ़ाइलें देता है जो पहले ही तल पर हैं।
सबसे ज़्यादा कौन-सा चरण बचाता है?
Illustrator के निर्यात पर: मेटाडेटा ब्लॉक हटाने से 216 बाइट बचे, निर्देशांक गोल करने से 131, टिप्पणियों से 94, डिफ़ॉल्ट गुणों से 61, अप्रयुक्त परिभाषाओं से 51, XML घोषणा से 38 और style गुण बदलने से 29। Figma के निर्यात में तस्वीर बिल्कुल अलग थी - उसके बचे 205 बाइट में से 141 अकेले अप्रयुक्त परिभाषाओं से आए।
Figma फ़ाइल में इतना अप्रयुक्त सामान क्यों छोड़ता है?
वह अपनी अंदरूनी परत-संरचना निर्यात कर देता है। फ़्रेम और परत के नाम id गुण बन जाते हैं जिन पर कोई इशारा नहीं करता, और आर्टबोर्ड के लिए तय किए क्लिप पथ और ग्रेडिएंट अक्सर ऐसी फ़ाइल में बचे रह जाते हैं जो उन्हें कभी नहीं बुलाती। वे id मरा हुआ बोझ हैं, और उन्हें हटाना Figma निर्यात में सबसे बड़ी अकेली बचत है।
क्या ID हटाना सुरक्षित है?
लगभग हमेशा, एक अपवाद के साथ जो जानने लायक है। हम सिर्फ़ वही id हटाते हैं जिस पर फ़ाइल में कुछ भी इशारा नहीं करता, और हम url(#…) मान, href गुण और <style> के भीतर का CSS जाँचते हैं। जो हम नहीं देख सकते वह है आपके पेज का बाहरी CSS या JavaScript जो उस id को पकड़ता हो - अगर आप इनलाइन SVG को बाहर से सजाते या चलाते हैं तो यह चरण बंद कर दीजिए।
क्या <title> तत्व हटा देना चाहिए?
आम तौर पर नहीं, और इसीलिए यही इकलौता चरण डिफ़ॉल्ट रूप से बंद है। <title> ग्राफ़िक का सुलभ नाम है: स्क्रीन रीडर यही पढ़ता है, और उसके बिना जो देख नहीं रहे उनके लिए छवि बेनाम रह जाती है। बचत आम तौर पर कुछ दर्जन बाइट की होती है, जो बुरा सौदा है।
क्या निर्देशांक गोल करने से चित्र बिगड़ सकता है?
सामान्य कलाकृति में तीन दशमलव पर नहीं। 24 इकाई के आइकन पर तीन दशमलव उसकी चौड़ाई के लगभग चालीस-हज़ारवें हिस्से जितने हैं, जो न कोई स्क्रीन दिखा सकती है न प्रिंटर। छोटे viewBox पर स्लाइडर को शून्य पर ले जाइए और आकृतियाँ चटकती दिखेंगी - हर फ़ाइल के साथ की झलक इसी को पकड़ने के लिए है।
मुझे कैसे पता चले कि अनुकूलित फ़ाइल अब भी वैसी ही दिखती है?
दो तरीक़ों से। हर फ़ाइल पहले और बाद के थंबनेल साथ-साथ दिखाती है, और हमारी परीक्षण शृंखला कई असली निर्यातों के दोनों रूप बनाकर उन्हें पिक्सेल-दर-पिक्सेल मिलाती है, ज़्यादा से ज़्यादा दो स्तर की स्मूदिंग छूट के साथ। जो चरण चित्र बदल देता वह यह तुलना पास ही न करता।
svgo क्यों नहीं?
उसका ब्राउज़र बंडल पूरा CSS पार्सर ढाँचा और एक प्लगइन वास्तुकला खींच लाता है जिसका हम दसवाँ हिस्सा इस्तेमाल करते, और वह सब इस पन्ने के हर आगंतुक तक पहुँचता। यहाँ वही चरण हैं जो असल दुनिया में सबसे ज़्यादा बचत देते हैं और बस इतना ही, इसलिए पूरा अनुकूलक तभी उतरता है जब आप फ़ाइल छोड़ते हैं।
क्या यह मेरी SVG से स्क्रिप्ट और ट्रैकिंग हटाता है?
हाँ, और वह चरण वैकल्पिक नहीं है। स्क्रिप्ट, इवेंट हैंडलर, दूरस्थ छवि संदर्भ और बाहरी स्टाइलशीट आयात हर फ़ाइल से हटा दिए जाते हैं, और पैनल बता देता है कि क्या मिला। यहाँ यह हमारे बाक़ी SVG टूल से ज़्यादा मायने रखता है, क्योंकि यही टूल आपको अपने पेज में चिपकाने लायक स्रोत लौटाता है।
क्या gzip इसे बेकार कर देता है?
नहीं, हालाँकि फ़ासला ज़रूर घटा देता है। आपका सर्वर SVG को भेजते समय लगभग तय है कि gzip या brotli से दबाता है, और दोहराई गई इंडेंटेशन को कंप्रेशन अच्छी तरह संभालता है। जो वह नहीं कर सकता वह है 216 बाइट का मेटाडेटा ब्लॉक मिटाना या आठ दशमलव के निर्देशांक छोटे करना - वह सामग्री फिर भी दबेगी-खुलेगी और फिर भी बाइट लेगी।
आपको इनकी भी ज़रूरत हो सकती है
कुछ काम नहीं कर रहा? बग रिपोर्ट करें