35: Оптимизација СВГ-а помоћу алата - ЦСС-трикови

Већ смо разговарали о ручној оптимизацији СВГ-а. Ручно бирање детаља и врста ствари које се могу комбиновати или уклонити. У овом сцреенцаст-у ћемо погледати оптимизацију СВГ-а помоћу алата. Алати који могу смањити величину датотеке СВГ без (надамо се) уопште промене изгледа. Ствари које су савршене за аутоматизацију. Као:

Уклањање празног простора
Смањивање прецизности бројева
Уклањање коре метаподатака

Најпопуларнији алат за то је СВГО, командни алат заснован на чворовима за оптимизацију СВГ-а на овај начин. Има верзију ГУИ-ја, тако да можете само превлачити и испуштати као нешто попут ИмагеОптим. (У видеу нам је ово требало да бисмо га распаковали.)

Такође смо погледали алате за оптимизацију СВГ Петера Цоллингридгеа, који су били уредни по томе што можете одабрати која правила желите да примените, а затим видети резултате и величину датотеке.

Ручна оптимизација може бити у реду у неким случајевима када повремено радите са малим бројем датотека. Али ако пуно радите са СВГ-ом, као што правите систем икона, вероватно је најбоље да алатку уградите у систем израде.

Овде смо већ гледали Грунта, па замислимо систем који:

Оптимизира СВГ кад год се СВГ датотека дода или промени у нашем пројекту
Затим их све заједно гради у дефс.свг блок

Прво бисте урадили оптимизацију и направили фасциклу пуну тих (тако да се могу прегледати једну по једну ако је потребно), а затим бисте их заједно направили. Ево како би та Грунтфиле изгледала користећи грунт-свгмин и грунт-свгсторе:

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

Убацићу СВГ слику са којом смо се играли (са Фреепик-а) и зип пројекта Грунт као преузимања.