35: SVG: n optimointi työkaluilla - CSS-temppuja

Puhuimme SVG: n optimoinnista jo käsin. Valintojen tekeminen manuaalisesti yksityiskohdista ja siitä, minkälaisia asioita voidaan yhdistää tai poistaa. Tässä kuvakaappauksessa tarkastelemme SVG: n optimointia työkaluilla. Työkalut, jotka voivat pienentää SVG: n tiedostokokoa muuttamatta (toivottavasti) sen ulkoasua. Asiat, jotka sopivat täydellisesti automaatioon. Kuten:

Välilyönnin poistaminen
Lukujen tarkkuuden vähentäminen
Poistetaan metadata crft

Suosituin työkalu siihen on SVGO, solmupohjainen komentotyökalu SVG: n optimointiin tällä tavalla. Siinä on GUI-versio, joten voit vetää ja pudottaa yhtä hyvin kuin jotain ImageOptim. (Videossa tarvitsimme tämän sen purkamiseksi.)

Tarkastelimme myös Peter Collingridgen SVG-optimointityökaluja, jotka olivat siistejä siinä mielessä, että voit valita sovellettavat säännöt ja nähdä sitten tulokset ja tiedostokoon.

Käsin optimointi voi olla OK joissakin tapauksissa, joissa työskentelet pienen määrän tiedostoja ja joskus. Mutta jos työskentelet paljon SVG: n kanssa, kuten rakennat ikonijärjestelmää, on luultavasti parasta sisällyttää työkalu rakennusjärjestelmään.

Olemme tarkastelleet Gruntia täällä aiemmin, joten kuvitellaan järjestelmä, joka:

Optimoi SVG: n milloin tahansa SVG-tiedosto lisätään tai sitä muutetaan projektissamme
Rakenna sitten ne kaikki yhdessä defs.svg-lohkoksi

Tehdään ensin optimointi ja rakennetaan kansio täynnä niitä (jotta ne voidaan tarvittaessa tarkastaa yksitellen) ja sitten rakentaa ne yhdessä. Näin Gruntfile näyttää grunt-svgmin- ja grunt-svgstore-sovelluksilla:

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

Pudotan SVG-kuvan, jonka kanssa soitimme (Freepikiltä), ja Grunt-projektin vetoketjun latauksena.