35: SVG optimeerimine tööriistadega - CSS-trikid

Me rääkisime juba SVG optimeerimisest käsitsi. Detailide käsitsi valimine ja seda, milliseid asju saab kombineerida või eemaldada. Selles ekraanikuva vaatleme SVG optimeerimist tööriistadega. Tööriistad, mis võivad SVG-faili suurust vähendada ilma selle loodetavat (loodetavasti) muutmata. Asjad, mis sobivad ideaalselt automatiseerimiseks. Nagu:

Tühiku eemaldamine
Numbrite täpsuse vähendamine
Metaandmetega töötamise eemaldamine

Selle jaoks on kõige populaarsem tööriist SVGO, sõlmepõhine käsutööriist SVG optimeerimiseks sel viisil. Sellel on graafilise kasutajaliidese versioon, nii et saate lihtsalt lohistada nii nagu midagi ImageOptimi taolist. (Videos vajasime seda selle lahti pakkimiseks.)

Vaatasime ka Peter Collingridge'i SVG-i optimeerimise tööriistu, mis olid korralikud, kuna saate valida ja valida, milliseid reegleid soovite rakendada, seejärel vaadake tulemusi ja faili suurust.

Käsitsi optimeerimine võib mõnel juhul olla korras, kui töötate vähese hulga failidega ja mõnikord. Kuid kui te töötate palju SVG-ga, näiteks ehitate välja ikoonisüsteemi, on tõenäoliselt kõige parem lisada see tööriist ehitussüsteemi.

Oleme Grunti siin varem vaadanud, nii et kujutagem ette süsteemi, mis:

Optimeerib SVG-d igal ajal, kui meie projektis lisatakse või muudetakse SVG-faili
Seejärel ehitab need kõik koos defs.svg-plokiks

Kõigepealt teete optimeerimise ja koostate kaustu täis (nii et neid saab vajadusel ükshaaval kontrollida), seejärel koostage need koos. See, kuidas see Gruntfile välja näeb, kasutades grunt-svgmin ja 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')); );

Panen alla SVG-pildi, millega me mängisime (Freepikult), ja projekti Grunt allalaaditavatena.