SVG अनुकूलन और पूर्वावलोकन टूल
SVG कोड को तुरंत पूर्वावलोकन और अनुकूलित करें
SVG कोड को तुरंत पूर्वावलोकन और अनुकूलित करें
SVG फ़ाइल अनुकूलन निम्नलिखित स्थितियों में वेब इंजीनियरों की कार्य दक्षता में काफी सुधार करता है:
डिज़ाइनरों से प्राप्त SVG आइकन या लोगो Adobe Illustrator या Figma जैसे उपकरणों द्वारा उत्पन्न मेटाडेटा से फूले हुए हैं। अनुकूलन से HTML या CSS में एम्बेड किए गए SVG का फ़ाइल आकार 30-50% कम किया जा सकता है और पेज लोड गति में सुधार किया जा सकता है।
मोबाइल वातावरण में, संचार मात्रा और रेंडरिंग गति महत्वपूर्ण हैं। अनावश्यक जानकारी हटाकर हल्के SVG मोबाइल उपयोगकर्ता अनुभव में उल्लेखनीय सुधार कर सकते हैं। विशेष रूप से बहुत सारे आइकन का उपयोग करने वाले UI में प्रभाव स्पष्ट है।
Illustrator, Sketch, Figma जैसे डिज़ाइन उपकरण SVG में परत जानकारी, गाइड, छिपे हुए तत्व और अन्य संपादन डेटा शामिल करते हैं। ये डेटा प्रदर्शन के लिए अनावश्यक हैं, इस टूल से बैच में हटाया जा सकता है।
जब SVG को सीधे HTML में एम्बेड किया जाता है, तो कोड की पठनीयता महत्वपूर्ण है। अनुकूलन अनावश्यक टिप्पणियों और रिक्त स्थान को हटाता है, HTML स्रोत को साफ रखते हुए फ़ाइल का आकार भी कम करता है।
एक आइकन सिस्टम में जो कई SVG आइकनों को प्रतीकों के रूप में प्रबंधित करता है, प्रत्येक SVG को अनुकूलित करने से समग्र बंडल आकार में काफी कमी आ सकती है। विशेष रूप से React, Vue जैसे घटक-आधारित विकास में प्रभावी।
SVGO जैसे स्वचालन उपकरणों को पेश करने से पहले, इस टूल से मैन्युअल पुष्टि करके अनुकूलन प्रभाव का पूर्व मूल्यांकन किया जा सकता है। CI/CD पाइपलाइन में एकीकृत करने से पहले परीक्षण के रूप में भी उपयोगी।
SVG अनुकूलन छवि की उपस्थिति को बदले बिना SVG फ़ाइल में शामिल अनावश्यक जानकारी को हटाकर फ़ाइल का आकार कम करने की प्रक्रिया है। यह टूल निम्नलिखित तत्वों को स्वचालित रूप से हटाता है:
नहीं, अनुकूलन केवल मेटाडेटा और टिप्पणियों जैसी प्रदर्शन को प्रभावित न करने वाली जानकारी हटाता है, इसलिए SVG की उपस्थिति बिल्कुल नहीं बदलती है। रंग, आकार, आकार सभी संरक्षित हैं।
डिज़ाइन टूल से आउटपुट किए गए SVG के लिए, आमतौर पर 30-50% आकार में कमी की उम्मीद की जा सकती है। Adobe Illustrator या Sketch से आउटपुट की गई फ़ाइलों में विशेष रूप से उच्च कमी प्रभाव होता है।
हाथ से लिखे सरल SVG में मेटाडेटा शामिल नहीं है, इसलिए कमी प्रभाव छोटा हो सकता है। मुख्य रूप से डिज़ाइन टूल से आउटपुट किए गए SVG के लिए प्रभावी।
यह टूल प्रदर्शन से संबंधित तत्वों (<path>, <circle>, <animate> आदि) को बिल्कुल नहीं बदलता है, इसलिए एनिमेशन या CSS शैली, JavaScript हेरफेर सामान्य रूप से काम करते हैं।
हाँ, यह टूल फ़ाइल आकार कम करने को प्राथमिकता देता है, इसलिए <title> और <desc> भी हटा दिए जाते हैं। यदि पहुँच महत्वपूर्ण है, तो अनुकूलन के बाद मैन्युअल रूप से जोड़ें या SVGO जैसे उन्नत टूल का उपयोग करें।
वर्तमान संस्करण एक-एक करके संसाधित करता है। यदि बड़ी संख्या में फ़ाइलों को संसाधित करने की आवश्यकता है, तो SVGO जैसे कमांड लाइन टूल की सिफारिश की जाती है।
हटाई गई जानकारी को पुनर्स्थापित नहीं किया जा सकता है। मूल SVG फ़ाइल को हमेशा अलग से सहेजने की सिफारिश की जाती है। इस टूल से संसाधित करने से पहले कृपया मूल का बैकअप लें।
SVGO एक Node.js-आधारित उच्च-कार्यक्षमता अनुकूलन टूल है, जो पथ सरलीकरण जैसे उन्नत अनुकूलन कर सकता है। यह टूल ब्राउज़र में चलता है और मेटाडेटा हटाने जैसे बुनियादी अनुकूलन में विशेषज्ञता रखता है। इसकी विशेषता सुविधा और तत्काल पूर्वावलोकन है।