35: SVG optimizavimas naudojant įrankius CSS-gudrybės

Mes jau kalbėjome apie SVG optimizavimą rankomis. Neautomatiškai pasirinkti detales ir tai, kokius dalykus galima derinti ar pašalinti. Šiame ekrano etape apžvelgsime, kaip optimizuoti SVG naudojant įrankius. Įrankiai, galintys sumažinti SVG failo dydį (tikiuosi) visiškai nepakeičiant jo išvaizdos. Daiktai, kurie puikiai tinka automatizavimui. Kaip:

Tarpų pašalinimas
Sumažinti skaičių tikslumą
Pašalinamas metaduomenų greitis

Populiariausias įrankis tam yra SVGO - mazgų pagrindu sukurta komandų priemonė, skirta tokiu būdu optimizuoti SVG. Ji turi GUI versiją, todėl galite tiesiog nuvilkti ir panašiai kaip „ImageOptim“. (Vaizdo įraše mums to reikėjo, kad jį išpakuotume.)

Mes taip pat apžvelgėme Peterio Collingridge'o SVG optimizavimo įrankius, kurie buvo tvarkingi, nes galite pasirinkti ir pasirinkti taisykles, kurias norite taikyti, tada pamatyti rezultatus ir failo dydį.

Kai kuriais atvejais, kai dirbate su nedideliu failų skaičiumi, kartais gali būti gerai optimizuoti rankomis. Bet jei daug dirbate su SVG, pavyzdžiui, kuriate piktogramų sistemą, tikriausiai geriausia įrankį įtraukti į kūrimo sistemą.

Čia jau anksčiau žiūrėjome į „Grunt“, todėl įsivaizduokime sistemą, kuri:

Optimizuoja SVG bet kuriuo metu, kai mūsų projekte pridedamas arba keičiamas SVG failas
Tada sukomponuokite juos visus į defs.svg bloką

Pirmiausia atliksite optimizavimą ir sukursite aplanką, kuriame būtų pilna jų (kad prireikus juos būtų galima apžiūrėti po vieną), tada susikurkite juos kartu. Štai kaip ši „Gruntfile“ atrodys naudojant „grunt-svgmin“ ir „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')); );

Įkelsiu į SVG vaizdą, su kuriuo grojome (iš „Freepik“), ir „Grunt“ projekto ZIP failą kaip atsisiuntimus.