35: Optimizacija SVG-a s alatima - CSS-trikovi

Već smo razgovarali o ručnoj optimizaciji SVG-a. Ručno odabiranje detalja i vrsta stvari koje se mogu kombinirati ili ukloniti. U ovom screencast-u pogledat ćemo na optimizaciju SVG-a pomoću alata. Alati koji mogu smanjiti veličinu datoteke SVG-a bez (nadam se) uopće promjene izgleda. Stvari koje su savršene za automatizaciju. Kao:

Uklanjanje razmaka
Smanjivanje preciznosti brojeva
Uklanjanje kore metapodataka

Najpopularniji alat za to je SVGO, naredbeni alat zasnovan na čvorovima za optimizaciju SVG-a na ovaj način. Ima verziju GUI-ja, tako da možete jednostavno povući i ispustiti poput nečega poput ImageOptima. (U videozapisu nam je ovo trebalo da bismo ga raspakirali.)

Također smo pogledali alate za optimizaciju SVG Petera Collingridgea, koji su bili uredni po tome što možete odabrati koja pravila želite primijeniti, a zatim vidjeti rezultate i veličinu datoteke.

Ručna optimizacija može biti u redu u nekim slučajevima kada povremeno radite s malim brojem datoteka. Ali ako puno radite sa SVG-om, kao što izrađujete sustav ikona, vjerojatno je najbolje alat uključiti u sustav gradnje.

Već smo ovdje gledali Grunta, pa zamislimo sustav koji:

Optimizira SVG kad god se SVG datoteka doda ili promijeni u našem projektu
Zatim ih sve zajedno gradi u defs.svg blok

Prvo biste izvršili optimizaciju i izradili mapu punu takvih (tako da ih prema potrebi mogu pregledati jednu po jednu), a zatim ih zajedno izraditi. Evo kako bi ta Gruntfile izgledala pomoću grunt-svgmin i 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')); );

Ubacit ću SVG sliku s kojom smo se igrali (s Freepika) i zip projekta Grunt kao preuzimanja.