35: Optimizacija SVG z orodji - CSS-triki

O ročni optimizaciji SVG smo že govorili. Ročno izbiranje podrobnosti in vrst stvari, ki jih je mogoče kombinirati ali odstraniti. V tem predvajanju zaslona si bomo ogledali optimizacijo SVG z orodji. Orodja, ki lahko zmanjšajo velikost datoteke SVG, ne da bi (upam) sploh spremenili njen videz. Stvari, ki so kot nalašč za avtomatizacijo. Všeč mi je:

Odstranjevanje presledkov
Zmanjšanje natančnosti števil
Odstranjevanje razpoke metapodatkov

Najbolj priljubljeno orodje za to je SVGO, ukazno orodje na osnovi vozlišča za optimizacijo SVG na ta način. Ima različico grafičnega uporabniškega vmesnika, tako da lahko povlečete in spustite, kot npr. ImageOptim. (V videoposnetku smo to potrebovali, da smo ga razpakirali.)

Ogledali smo si tudi orodja za optimizacijo SVG Petra Collingridgea, ki so bila urejena tako, da si lahko izberete, katera pravila želite uporabiti, nato pa si oglejte rezultate in velikost datoteke.

Ročna optimizacija je včasih v redu, če delate z majhnim številom datotek in občasno. Če pa veliko delate s SVG, kot da gradite sistem ikon, je verjetno najbolje, da orodje vključite v sistem gradnje.

Tu smo že gledali Grunta, zato si predstavljajmo sistem, ki:

Optimizira SVG kadar koli je datoteka SVG dodana ali spremenjena v našem projektu
Nato jih vse skupaj zgradi v blok defs.svg

Najprej bi naredili optimizacijo in sestavili mapo, polno teh (tako da jih je mogoče po potrebi pregledati enega za drugim), nato pa jih ustvarili skupaj. Tukaj je, kako bi ta Gruntfile izgledal z uporabo grunt-svgmin in 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')); );

Snemil bom sliko SVG, s katero smo se igrali (iz Freepik), in zip projekta Grunt kot prenose.