35: Optimizarea SVG cu instrumente - CSS-Tricks

Am vorbit deja despre optimizarea SVG manual. Alegerea manuală a detaliilor și a tipurilor de lucruri care pot fi combinate sau eliminate. În acest screencast vom analiza optimizarea SVG cu instrumente. Instrumente care pot reduce dimensiunea fișierului SVG fără (sperăm) să schimbe deloc aspectul acestuia. Lucruri care sunt perfecte pentru automatizare. Ca:

Eliminarea spațiului alb
Reducerea preciziei numerelor
Se elimină metadatele cruft

Cel mai popular instrument pentru aceasta este SVGO, un instrument de comandă bazat pe noduri pentru optimizarea SVG în acest fel. Are o versiune GUI, deci puteți trage și plasa la fel de bine ca ceva de genul ImageOptim. (În videoclip, aveam nevoie de asta pentru a-l dezarhiva.)

De asemenea, ne-am uitat la instrumentele de optimizare SVG ale lui Peter Collingridge, care erau îngrijite în sensul că puteți alege și alege ce reguli doriți să aplicați, apoi să vedeți rezultatele și dimensiunea fișierului.

Optimizarea manuală poate fi OK în unele cazuri în care lucrați cu un număr mic de fișiere și ocazional. Dar dacă lucrați mult cu SVG, ca și cum ați construi un sistem de pictograme, este cel mai bine să încorporați instrumentul în sistemul de construire.

Ne-am uitat la Grunt aici înainte, așa că haideți să ne imaginăm un sistem care:

Optimizează SVG de fiecare dată când un fișier SVG este adăugat sau modificat în proiectul nostru
Apoi le construiește pe toate împreună într-un bloc defs.svg

Ar trebui să faceți mai întâi optimizarea și să construiți un folder plin de acestea (astfel încât să poată fi inspectate unul câte unul dacă este necesar), apoi să le construiți împreună. Iată cum ar arăta acel Gruntfile folosind grunt-svgmin și 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')); );

Voi introduce imaginea SVG cu care ne-am jucat (de la Freepik) și un zip al proiectului Grunt ca descărcări.