35: Mengoptimumkan SVG dengan Alat - Trik CSS

Kami sudah bercakap mengenai mengoptimumkan SVG dengan tangan. Membuat pilihan secara manual mengenai perincian dan jenis perkara yang boleh digabungkan atau dikeluarkan. Dalam screencast ini kita akan melihat pengoptimuman SVG dengan alat. Alat yang dapat mengurangkan saiz fail SVG tanpa (semoga) mengubah penampilannya sama sekali. Perkara yang sesuai untuk automasi. Seperti:

Mengeluarkan ruang kosong
Mengurangkan ketepatan nombor
Mengeluarkan kerangka metadata

Alat yang paling popular untuk itu adalah SVGO, alat arahan berasaskan nod untuk mengoptimumkan SVG dengan cara ini. Ia mempunyai versi GUI, jadi anda boleh drag-and-drop juga seperti sesuatu seperti ImageOptim. (Dalam video, kami memerlukannya untuk membuka zipnya.)

Kami juga melihat alat pengoptimuman SVG Peter Collingridge, yang rapi sehingga anda dapat memilih dan memilih peraturan apa yang ingin anda gunakan kemudian melihat hasil dan ukuran fail.

Mengoptimumkan dengan tangan mungkin baik dalam beberapa kes di mana anda bekerja dengan sebilangan kecil fail dan kadang-kadang. Tetapi jika anda banyak bekerjasama dengan SVG, seperti membina sistem ikon, mungkin lebih baik memasukkan alat tersebut ke dalam sistem binaan.

Kami telah melihat Grunt di sini sebelumnya, jadi mari kita bayangkan sistem yang:

Mengoptimumkan SVG bila-bila masa fail SVG ditambahkan atau diubah dalam projek kami
Kemudian bina semuanya bersama menjadi blok defs.svg

Anda akan melakukan pengoptimuman terlebih dahulu dan membina folder yang penuh (sehingga mereka dapat diperiksa satu persatu jika diperlukan), kemudian buat bersama. Inilah rupa Gruntfile menggunakan grunt-svgmin dan grunt-svgstore:

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')); );

Saya akan memasukkan gambar SVG yang kami mainkan (dari Freepik) dan zip projek Grunt sebagai muat turun.