35: Otimizando SVG com ferramentas - CSS-Tricks

Já falamos sobre como otimizar o SVG manualmente. Fazer escolhas manualmente sobre os detalhes e quais tipos de coisas podem ser combinados ou removidos. Neste screencast, veremos como otimizar o SVG com ferramentas. Ferramentas que podem reduzir o tamanho do arquivo SVG sem (espero) alterar sua aparência. Coisas que são perfeitas para automação. Gostar:

Removendo espaço em branco
Reduzindo a precisão dos números
Removendo dados cruft de metadados

A ferramenta mais popular para isso é o SVGO, uma ferramenta de comando baseada em nó para otimizar o SVG dessa maneira. Ele tem uma versão GUI, então você também pode arrastar e soltar como algo como ImageOptim. (No vídeo, precisávamos disso para descompactá-lo.)

Também vimos as ferramentas de otimização de SVG de Peter Collingridge, que são excelentes porque você pode escolher quais regras deseja aplicar e ver os resultados e o tamanho do arquivo.

A otimização manual pode ser boa em alguns casos em que você está trabalhando com um pequeno número de arquivos e ocasionalmente. Mas se você está trabalhando muito com SVG, como se estivesse construindo um sistema de ícones, provavelmente é melhor incorporar a ferramenta ao sistema de construção.

Já vimos o Grunt aqui antes, então vamos imaginar um sistema que:

Otimiza SVG sempre que um arquivo SVG é adicionado ou alterado em nosso projeto
Em seguida, os constrói todos juntos em um bloco defs.svg

Você faria a otimização primeiro e criaria uma pasta cheia deles (para que possam ser inspecionados um por um, se necessário) e, em seguida, os construiria juntos. Esta é a aparência do Gruntfile usando grunt-svgmin e 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')); );

Vou inserir a imagem SVG com a qual jogamos (do Freepik) e um zip do projeto Grunt para download.