एक तेज़, प्राइवेट SVG ऑप्टिमाइज़र
वेब पर स्पष्ट और रिज़ॉल्यूशन-इंडिपेंडेंट आइकन और इलस्ट्रेशन के लिए Scalable Vector Graphics (SVGs) एक स्टैंडर्ड हैं। हालाँकि, जब आप किसी डिज़ाइन टूल से SVG एक्सपोर्ट करते हैं, तो वह फ़ाइल शायद ही कभी प्रोडक्शन के लिए ऑप्टिमाइज़ होती है। यह SVG ऑप्टिमाइज़र आपको अपने वेक्टर ग्राफ़िक्स को तुरंत क्लीन करने, अनावश्यक डेटा हटाने और विज़ुअल क्वालिटी से समझौता किए बिना फ़ाइल साइज़ कम करने की सुविधा देता है।
चूँकि यह टूल पूरी तरह से आपके ब्राउज़र में चलता है, इसलिए आपके ग्राफ़िक्स कभी भी किसी सर्वर पर अपलोड नहीं होते हैं। आप प्रोपराइटरी लोगो, अनरिलीज़्ड प्रोडक्ट डिज़ाइन या कॉन्फिडेंशियल डायग्राम वाली SVG फ़ाइलों को सुरक्षित रूप से कंप्रेस कर सकते हैं। इसकी प्रोसेसिंग तुरंत होती है, जो आपको फ़ाइल साइज़ में हुई बचत का रियल-टाइम फीडबैक देती है और यह सुनिश्चित करने के लिए कि आपके ग्राफ़िक्स बिल्कुल सही रहें, पहले और बाद की विज़ुअल तुलना (before-and-after comparison) दिखाती है।
आपको SVG फ़ाइलों को कंप्रेस करने की ज़रूरत क्यों है
रास्टर इमेजेज़ (जैसे JPEGs या PNGs) जो पिक्सेल डेटा स्टोर करती हैं, उनके विपरीत SVGs मुख्य रूप से XML टेक्स्ट फ़ाइलें होती हैं जिनमें आकृतियाँ बनाने के गणितीय निर्देश होते हैं। जब वेक्टर एडिटर्स इन फ़ाइलों को जनरेट करते हैं, तो उनमें अक्सर बहुत सारा ऐसा अतिरिक्त डेटा जुड़ जाता है जिसकी ब्राउज़र को इमेज रेंडर करने के लिए कोई ज़रूरत नहीं होती।
SVG फ़ाइल का साइज़ बढ़ने के मुख्य कारण हैं:
- एडिटर मेटाडेटा: फ़ाइल बनाने वाले सॉफ़्टवेयर से जुड़े टैग्स और एट्रिब्यूट्स, जिनका इस्तेमाल केवल एडिटिंग के लिए किया जाता है।
- कमेंट्स और खाली एलिमेंट्स: डेवलपर नोट्स, खाली ग्रुप्स (
<g>), और हिडन लेयर्स जिनका फ़ाइनल विज़ुअल आउटपुट में कोई काम नहीं होता। - अत्यधिक प्रिसिज़न: छह या उससे ज़्यादा दशमलव स्थानों वाले पाथ कोऑर्डिनेट्स (जैसे,
14.123456), जो बेवजह बाइट्स लेते हैं। - डिफ़ॉल्ट एट्रिब्यूट्स: स्टाइल्स और एट्रिब्यूट्स जो ब्राउज़र के डिफ़ॉल्ट बिहेवियर से मेल खाते हैं और जिन्हें अलग से डिक्लेयर करने की ज़रूरत नहीं होती।
SVG minifier का इस्तेमाल करके, आप इस छिपे हुए टेक्स्ट को हटा सकते हैं। SVG फ़ाइल का साइज़ कम करने से आपके वेब पेज तेज़ी से लोड होते हैं, कम बैंडविड्थ का इस्तेमाल करते हैं, और आपकी साइट की ओवरऑल परफॉरमेंस व SEO रैंकिंग में सुधार होता है।
ऑनलाइन SVG को minify कैसे करें
यह टूल कई कस्टमाइज़ेबल विकल्प देता है जिससे आपको ऑप्टिमाइज़ेशन प्रक्रिया पर पूरा कंट्रोल मिलता है। आप फाइनल ग्राफ़िक का उपयोग कैसे करेंगे, इसके आधार पर फ़ाइल साइज़ और कोड रीडेबिलिटी के बीच सही बैलेंस बनाने के लिए इन सेटिंग्स को एडजस्ट कर सकते हैं।
फ़्लोट प्रिसिशन
वेक्टर पाथ कोऑर्डिनेट्स का उपयोग करके बनाए जाते हैं। डिज़ाइन सॉफ़्टवेयर अक्सर इन कोऑर्डिनेट्स को बहुत अधिक प्रिसिशन के साथ एक्सपोर्ट करते हैं, जिससे नंबरों की लंबी स्ट्रिंग बन जाती है। फ़्लोट प्रिसिशन (दशमलव स्थानों की संख्या) को कम करके, आप अपनी फ़ाइल के कैरेक्टर काउंट को काफी कम कर सकते हैं। वेब आइकन के लिए आमतौर पर 1 या 2 का प्रिसिशन एकदम सही होता है। यदि आपको विज़ुअल प्रीव्यू में कर्व्स कटे-फटे दिखते हैं या शेप्स खिसकते हुए नज़र आते हैं, तो बस प्रिसिशन स्लाइडर को तब तक बढ़ाएं जब तक कि इमेज फिर से सही न दिखने लगे।
मल्टीपास ऑप्टिमाइज़ेशन
ऑप्टिमाइज़ेशन अक्सर एक लेयर्ड प्रक्रिया होती है। एक अनावश्यक एलिमेंट को हटाने से पैरेंट एलिमेंट खाली हो सकता है, जिसे बाद में हटाया भी जा सकता है। "Multipass" सेटिंग को इनेबल करने से ऑप्टिमाइज़र को अपनी क्लीनअप रूटीन को बार-बार चलाने का निर्देश मिलता है, जब तक कि फ़ाइल का साइज़ और कम न हो सके। यह सबसे छोटे संभव आउटपुट की गारंटी देता है।
डाइमेंशन्स हटाएं
डिफ़ॉल्ट रूप से, कई SVG हार्डकोडेड width और height एट्रिब्यूट्स (जैसे, width="500px") के साथ एक्सपोर्ट किए जाते हैं। हालाँकि यह इमेज को एक फिक्स साइज़ में लॉक कर देता है, लेकिन इससे रिस्पॉन्सिव वेब डिज़ाइन मुश्किल हो जाता है। "Remove dimensions" को चेक करने से viewBox को सुरक्षित रखते हुए ये एट्रिब्यूट्स हट जाते हैं। इससे SVG अपने पैरेंट कंटेनर के CSS के आधार पर आसानी से स्केल हो सकता है, जिससे इसे आधुनिक वेब लेआउट में उपयोग करना बहुत आसान हो जाता है।
प्रिटी प्रिंट
यदि आपका लक्ष्य फ़ाइल का साइज़ कम से कम रखना है, तो इसे अनचेक ही रहने दें। टूल कोड की एक सिंगल लाइन आउटपुट करेगा। हालाँकि, यदि आप किसी ऐसे SVG को क्लीन कर रहे हैं जिसे आप मैन्युअल रूप से एडिट करने, एनिमेट करने, या सीधे HTML डॉक्यूमेंट में एम्बेड करने वाले हैं, तो "Pretty print" को चेक करने से आउटपुट साफ़ इंडेंटेशन और लाइन ब्रेक के साथ फ़ॉर्मैट हो जाएगा।
वेक्टर ग्राफ़िक्स के लिए बेस्ट प्रैक्टिस
अपने SVGs को ऑप्टिमाइज़ करना एक तेज़ और एक्सेसिबल वेबसाइट बनाने की दिशा में केवल एक कदम है। वेक्टर ग्राफ़िक्स का उपयोग करते समय, यह ध्यान रखें कि उन्हें कैसे इस्तेमाल किया जाएगा। यदि आप SVG को सीधे अपने HTML में इनलाइन एम्बेड कर रहे हैं, तो HTML डॉक्यूमेंट का साइज़ छोटा रखने के लिए SVG को मिनिफ़ाई करना बहुत ज़रूरी है। बेहतरीन परफॉरमेंस के लिए, आप अपने पूरे पेज को HTML Minifier या CSS Minifier से भी ऑप्टिमाइज़ कर सकते हैं।
ऑप्टिमाइज़ेशन के बाद हमेशा विज़ुअल प्रीव्यू ज़रूर चेक करें। वैसे तो ज़्यादातर SVGs आसानी से कंप्रेस हो जाते हैं, लेकिन जटिल ग्रेडिएंट या सटीक क्लिपिंग पाथ वाले कॉम्प्लेक्स इलस्ट्रेशन की ओरिजिनल क्वालिटी बनाए रखने के लिए हाई फ्लोट प्रिसिजन (float precision) की ज़रूरत पड़ सकती है। इसमें मौजूद 'before-and-after' व्यूअर की मदद से, अपनी मिनिफ़ाइड फ़ाइल डाउनलोड करने से पहले किसी भी अनचाहे बदलाव को आसानी से देखा जा सकता है।
अंत में, भले ही SVGs लोगो, आइकन और फ्लैट इलस्ट्रेशन के लिए बेहतरीन हैं, लेकिन ये जटिल तस्वीरों के लिए सही नहीं हैं। अगर आपके SVG में मुख्य रूप से एम्बेडेड रास्टर इमेज (जैसे base64-encoded JPEGs) हैं, तो ऑप्टिमाइज़ेशन का कोई खास असर नहीं होगा। ऐसे मामलों में, SVG to PNG कनवर्टर का उपयोग करके ग्राफ़िक को पूरी तरह से कन्वर्ट करना एक बेहतर विकल्प हो सकता है।