35: Mengoptimalkan SVG dengan Alat - Trik CSS

Kami sudah membicarakan tentang mengoptimalkan SVG dengan tangan. Membuat pilihan secara manual tentang detail dan hal-hal apa yang dapat digabungkan atau dihilangkan. Dalam screencast ini kita akan melihat pengoptimalan SVG dengan alat. Alat yang dapat mengurangi ukuran file SVG tanpa (semoga) mengubah tampilannya sama sekali. Hal-hal yang sempurna untuk otomatisasi. Suka:

Menghapus spasi
Mengurangi ketepatan angka
Menghapus cruft metadata

Alat paling populer untuk itu adalah SVGO, alat perintah berbasis node untuk mengoptimalkan SVG dengan cara ini. Ini memiliki versi GUI, jadi Anda bisa drag-and-drop serta menyukai sesuatu seperti ImageOptim. (Dalam video, kami membutuhkan ini untuk mengekstraknya.)

Kami juga melihat alat pengoptimalan SVG Peter Collingridge, yang rapi karena Anda dapat memilih dan memilih aturan apa yang ingin Anda terapkan kemudian melihat hasil dan ukuran file.

Mengoptimalkan dengan tangan mungkin baik-baik saja dalam beberapa kasus ketika Anda bekerja dengan sejumlah kecil file dan terkadang. Tetapi jika Anda sering bekerja dengan SVG, seperti Anda sedang membangun sistem ikon, mungkin yang terbaik adalah memasukkan alat tersebut ke dalam sistem build.

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

Mengoptimalkan SVG setiap kali file SVG ditambahkan atau diubah dalam proyek kami
Kemudian bangun semuanya menjadi blok defs.svg

Anda akan melakukan pengoptimalan terlebih dahulu dan membangun folder yang penuh dengan itu (sehingga mereka dapat diperiksa satu per satu jika diperlukan), lalu membangunnya bersama. Inilah tampilan 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 dari proyek Grunt sebagai unduhan.