35: Optimalizácia SVG pomocou nástrojov - Triky CSS

O optimalizácii SVG sme už hovorili ručne. Ručné rozhodovanie o detailoch a o tom, čo je možné kombinovať alebo odstrániť. V tomto vysielaní sa pozrieme na optimalizáciu SVG pomocou nástrojov. Nástroje, ktoré môžu zmenšiť veľkosť súboru SVG bez toho, aby (dúfajme) vôbec zmenili jeho vzhľad. Veci, ktoré sú ideálne pre automatizáciu. Páči sa mi to:

Odstraňujú sa medzery
Znižovanie presnosti čísel
Odstraňuje sa podstata metadát

Najpopulárnejším nástrojom na to je SVGO, príkazový nástroj založený na uzloch na optimalizáciu SVG týmto spôsobom. Má verziu s grafickým používateľským rozhraním, takže môžete jednoducho drag-and-drop pustiť niečo ako ImageOptim. (Vo videu sme to potrebovali na rozbalenie.)

Pozreli sme sa tiež na optimalizačné nástroje SVG Petera Collingridga, ktoré boli prehľadné v tom, že si môžete vybrať, ktoré pravidlá chcete použiť, a potom zobraziť výsledky a veľkosť súboru.

Ručná optimalizácia môže byť v niektorých prípadoch, keď pracujete s malým počtom súborov, v poriadku. Ak ale veľa pracujete s programom SVG, napríklad budujete ikonový systém, je pravdepodobne najlepšie tento nástroj začleniť do systému zostavovania.

Na Grunt sme sa tu už pozreli predtým, tak si predstavme systém, ktorý:

Optimalizuje SVG kedykoľvek, keď je v našom projekte pridaný alebo zmenený súbor SVG
Potom ich všetky spojí do bloku defs.svg

Najskôr by ste vykonali optimalizáciu a vytvorili ste ich plný priečinok (aby ich bolo možné v prípade potreby skontrolovať jeden po druhom), potom ich vytvorte spoločne. Takto by vyzeral súbor Gruntfile pomocou súborov grunt-svgmin a 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')); );

Ako súbory na stiahnutie vložím obrázok SVG, s ktorým sme hrali (od Freepiku), a zip projektu Grunt.