35: Araçlarla SVG'yi Optimize Etme - CSS Hileleri

SVG'yi elle optimize etmekten zaten bahsetmiştik. Ayrıntı ve ne tür şeylerin birleştirilebileceği veya kaldırılabileceği konusunda manuel olarak seçim yapma Bu ekran video kaydında, SVG'yi araçlarla optimize etmeye bakacağız. SVG'nin görünümünü değiştirmeden (umarız) dosya boyutunu küçültebilen araçlar. Otomasyon için mükemmel olan şeyler. Sevmek:

Beyaz boşluk kaldırılıyor
Sayıların kesinliğini azaltmak
Meta veri sorununu kaldırma

Bunun için en popüler araç, SVG'yi bu şekilde optimize etmek için düğüm tabanlı bir komut aracı olan SVGO'dur. Bir GUI sürümü vardır, böylece ImageOptim gibi bir şey gibi sadece sürükleyip bırakabilirsiniz. (Videoda, fermuarını açmak için buna ihtiyacımız vardı.)

Ayrıca Peter Collingridge'in SVG optimizasyon araçlarına da baktık; bunlar, uygulamak istediğiniz kuralları seçip seçip sonuçları ve dosya boyutunu görebilmeniz açısından harika.

Az sayıda dosyayla çalıştığınız bazı durumlarda ve ara sıra elle optimize etmek uygun olabilir. Ancak, SVG ile çok çalışıyorsanız, bir simge sistemi oluşturuyormuşsunuz gibi, aracı yapı sistemine dahil etmek muhtemelen en iyisidir.

Burada Grunt'a daha önce bakmıştık, öyleyse şöyle bir sistem hayal edelim:

Projemize bir SVG dosyası eklendiğinde veya değiştirildiğinde SVG'yi optimize eder
Sonra hepsini bir defs.svg bloğunda oluşturur

Önce optimizasyonu yaparsınız ve bunlarla dolu bir klasör oluşturursunuz (böylece gerekirse tek tek incelenebilirler), sonra bunları birlikte oluşturursunuz. Gruntfile'ın grunt-svgmin ve grunt-svgstore kullanarak nasıl görüneceği burada:

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

Oynadığımız SVG görüntüsünü (Freepik'ten) ve Grunt projesinin bir zip dosyasını indirmeler olarak bırakacağım.