35: SVG optimizēšana ar rīkiem CSS-triki

Mēs jau runājām par SVG optimizēšanu ar rokām. Manuāli izdarot izvēli par detaļām un to, kāda veida lietas var kombinēt vai noņemt. Šajā ekrānuzņēmumā mēs apskatīsim SVG optimizēšanu ar rīkiem. Rīki, kas var samazināt SVG faila lielumu, (cerams) nemainot tā izskatu. Lietas, kas ir ideāli piemērotas automatizācijai. Patīk:

Atstarpes noņemšana
Skaitļu precizitātes samazināšana
Metadatu izspiešanas noņemšana

Vispopulārākais rīks tam ir SVGO, uz mezgliem balstīts komandu rīks šādā veidā SVG optimizēšanai. Tam ir GUI versija, tāpēc jūs varat vienkārši vilkt un nomest tāpat kā kaut ko līdzīgu ImageOptim. (Videoklipā mums tas bija vajadzīgs, lai to noņemtu.)

Mēs arī apskatījām Pītera Kolingridžas SVG optimizācijas rīkus, kas bija veikls, jo jūs varat izvēlēties un izvēlēties noteikumus, kurus vēlaties piemērot, pēc tam redzēt rezultātus un faila lielumu.

Dažos gadījumos, kad jūs strādājat ar nelielu failu skaitu un dažreiz, optimizēšana ar rokām var būt laba. Bet, ja jūs daudz strādājat ar SVG, piemēram, veidojat ikonu sistēmu, iespējams, vislabāk ir iekļaut rīku būvēšanas sistēmā.

Mēs šeit iepriekš apskatījām Grunt, tāpēc iedomāsimies sistēmu, kas:

Optimizē SVG jebkurā laikā, kad mūsu projektā tiek pievienots vai mainīts SVG fails
Tad izveido tos visus kopā defs.svg blokā

Vispirms jūs veicat optimizāciju un izveidojat pilnu mapi (lai vajadzības gadījumā tos varētu pārbaudīt pa vienam), pēc tam izveidojiet tos kopā. Lūk, kā šī Gruntfile izskatīsies, izmantojot grunt-svgmin un 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')); );

Es ielādēšu SVG attēlu, ar kuru mēs spēlējām (no Freepik), un Grunt projekta zip failu kā lejupielādes.