35: Az SVG optimalizálása eszközökkel - CSS-trükkök

Beszéltünk már az SVG kézzel történő optimalizálásáról. Manuálisan dönt a részletekről és arról, hogy milyen dolgokat lehet kombinálni vagy eltávolítani. Ebben a képernyõben megvizsgáljuk az SVG eszközökkel történõ optimalizálását. Eszközök, amelyek csökkenthetik az SVG fájlméretét anélkül, hogy (remélhetőleg) megváltoztatnák annak megjelenését. Az automatizáláshoz tökéletes dolgok. Tetszik:

A szóköz eltávolítása
A számok pontosságának csökkentése
A metaadatok hibájának eltávolítása

A legnépszerűbb eszköz erre az SVGO, egy csomópont alapú parancs eszköz az SVG ilyen módon történő optimalizálására. GUI verziója van, így egyszerűen húzhat és dobhat, mint például az ImageOptim. (A videóban erre szükségünk volt a kibontáshoz.)

Megnéztük Peter Collingridge SVG-optimalizáló eszközeit is, amelyek rendben voltak abban, hogy kiválaszthatja, milyen szabályokat szeretne alkalmazni, majd megtekintheti az eredményeket és a fájlméretet.

A kézi optimalizálás bizonyos esetekben rendben lehet, ha kevés fájllal dolgozik, és alkalmanként. De ha sokat dolgozik az SVG-vel, például ikonrendszert épít, valószínűleg az a legjobb, ha az eszközt beépíti a build rendszerbe.

Korábban már megnéztük itt a Gruntot, tehát képzeljünk el egy rendszert, amely:

Bármikor optimalizálja az SVG-t, amikor egy SVG-fájlt hozzáadnak vagy módosítanak a projektünkben
Ezután összesíti őket egy defs.svg blokkba

Először meg kell tennie az optimalizálást, és ki kell építenie egy ilyenekkel teli mappát (hogy szükség esetén egyesével ellenőrizhetők legyenek), majd össze kell építeni őket. Így néz ki a Gruntfile a grunt-svgmin és a grunt-svgstore használatával:

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')); );

Letöltöm az SVG-képet, amellyel játszottunk (a Freepiktől), és a Grunt projekt egy zipjét.