35: Optimalizace SVG pomocí nástrojů - Triky CSS

Už jsme mluvili o ruční optimalizaci SVG. Ruční výběr podrobností a toho, jaké věci lze kombinovat nebo odebrat. V tomto screencastu se podíváme na optimalizaci SVG pomocí nástrojů. Nástroje, které mohou zmenšit velikost souboru SVG, aniž by (doufejme) vůbec změnily jeho vzhled. Věci, které jsou ideální pro automatizaci. Jako:

Odstranění mezer
Snížení přesnosti čísel
Odebírání metadat

Nejpopulárnějším nástrojem je SVGO, uzlový příkazový nástroj pro optimalizaci SVG tímto způsobem. Má verzi grafického uživatelského rozhraní, takže můžete jednoduše přetahovat a podobně jako něco jako ImageOptim. (Ve videu jsme to potřebovali k rozbalení.)

Podívali jsme se také na optimalizační nástroje SVG Petera Collingridgea, které byly čisté v tom, že si můžete vybrat, která pravidla chcete použít, a zobrazit výsledky a velikost souboru.

Ruční optimalizace může být v pořádku v některých případech, kdy pracujete s malým počtem souborů a příležitostně. Pokud ale hodně pracujete se SVG, jako například vytváříte systém ikon, je pravděpodobně nejlepší tento nástroj začlenit do systému sestavení.

Už jsme se zde na Grunt podívali, tak si představme systém, který:

Optimalizuje SVG kdykoli je v našem projektu přidán nebo změněn soubor SVG
Poté je všechny spojí do bloku defs.svg

Nejprve byste provedli optimalizaci a vytvořili složku plnou těchto (aby je bylo možné v případě potřeby zkontrolovat jeden po druhém), pak je vytvořte společně. Takto by vypadal Gruntfile pomocí 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')); );

Při stahování vložím obrázek SVG, se kterým jsme hráli (od Freepik), a zip projektu Grunt.