35: टूल्स के साथ एसवीजी का अनुकूलन - सीएसएस-ट्रिक्स

हमने पहले ही हाथ से एसवीजी को अनुकूलित करने के बारे में बात की थी। विवरण के बारे में मैन्युअल रूप से चुनाव करना और किस प्रकार की चीजों को संयुक्त या हटाया जा सकता है। इस पेंचकस में हम एसवीजी को उपकरणों के साथ अनुकूलित करते हुए देखेंगे। ऐसे उपकरण जो बिना एसवीजी के फ़ाइल आकार को कम कर सकते हैं (उम्मीद है) इसे बिल्कुल भी नहीं बदल सकते हैं। ऐसी चीजें जो स्वचालन के लिए एकदम सही हैं। पसंद:

व्हाट्सएप को हटाना
संख्याओं की शुद्धता को कम करना
मेटाडेटा cruft को हटाना

इसके लिए सबसे लोकप्रिय उपकरण SVGO है, SVG को इस तरह से ऑप्टिमाइज़ करने के लिए नोड-आधारित कमांड टूल। इसका GUI वर्जन है, जिससे आप सिर्फ ImageOptim जैसी किसी चीज को ड्रैग-एंड-ड्रॉप कर सकते हैं। (वीडियो में, हमें इसे अनज़िप करने के लिए इसकी आवश्यकता थी।)

हमने पीटर कॉलिंग्रिज के एसवीजी ऑप्टिमाइज़ेशन टूल्स को भी देखा, जो कि इसमें साफ-सुथरे थे कि आप चुन सकते हैं और चुन सकते हैं कि आप किन नियमों को लागू करना चाहते हैं, फिर परिणाम और फाइल का आकार देखें।

हाथ से ऑप्टिमाइज़ करना कुछ मामलों में ठीक हो सकता है जहां आप कम संख्या में फ़ाइलों और अवसर पर काम कर रहे हैं। लेकिन अगर आप एसवीजी के साथ काम कर रहे हैं, जैसे कि आप एक आइकन सिस्टम बना रहे हैं, तो संभवत: टूल को बिल्ड सिस्टम में शामिल करना सबसे अच्छा है।

हमने पहले यहां ग्रंट को देखा है, तो चलिए एक प्रणाली की कल्पना करते हैं:

SVG को ऑप्टिमाइज़ करता है कभी भी हमारे प्रोजेक्ट में कोई SVG फ़ाइल जोड़ी जाती है या बदल दी जाती है
फिर उन सभी को एक साथ मिलकर एक डीप्सिव ब्लॉक में बनाता है

आप पहले अनुकूलन करेंगे और उन लोगों से भरा एक फोल्डर तैयार करेंगे (ताकि जरूरत पड़ने पर एक-एक करके उनका निरीक्षण किया जा सके), फिर उन्हें एक साथ बनाएँ। यहां बताया गया है कि ग्रंटफाइल ग्रंट-स्वगमिन और ग्रंट-स्विगस्टोर का उपयोग करते हुए कैसा दिखेगा:

module.exports = function(grunt) ( grunt.initConfig(( svgmin: ( options: ( plugins: ( ( removeViewBox: true ), ( removeUselessStrokeAndFill: false ) ) ), dist: ( files: (( expand: true, cwd: "svg/", src: ('*.svg'), dest: 'svgo/' )) ) ), svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svgo/*.svg'), ) ) ) )); grunt.loadNpmTasks('grunt-svgstore'); grunt.loadNpmTasks('grunt-svgmin'); grunt.registerTask('default', ('svgmin', 'svgstore')); );

मैं एसवीजी इमेज में डाउनलोड करूँगा जिसे हमने (फ्रीपिक से) और डाउनलोड के रूप में ग्रंट प्रोजेक्ट की ज़िप के साथ खेला था।