35: Optymalizacja SVG za pomocą narzędzi - CSS-Tricks

Rozmawialiśmy już o ręcznej optymalizacji SVG. Ręczne dokonywanie wyborów dotyczących szczegółów i rodzajów elementów, które można łączyć lub usuwać. W tym screencastie przyjrzymy się optymalizacji SVG za pomocą narzędzi. Narzędzia, które mogą zmniejszyć rozmiar pliku SVG bez (miejmy nadzieję) zmiany jego wyglądu. Rzeczy idealne do automatyzacji. Lubić:

Usuwanie spacji
Zmniejszenie dokładności liczb
Usuwanie cruft metadata

Najpopularniejszym narzędziem do tego jest SVGO, narzędzie poleceń oparte na węzłach do optymalizacji SVG w ten sposób. Ma wersję GUI, więc możesz po prostu przeciągnąć i upuścić, a także coś takiego jak ImageOptim. (W filmie potrzebowaliśmy tego, aby go rozpakować.)

Przyjrzeliśmy się także narzędziom optymalizacji SVG Petera Collingridge'a, które były zgrabne, ponieważ można było wybrać i wybrać reguły, które chcesz zastosować, a następnie zobaczyć wyniki i rozmiar pliku.

Ręczna optymalizacja może być dobra w niektórych przypadkach, gdy pracujesz z niewielką liczbą plików i czasami. Ale jeśli dużo pracujesz z SVG, na przykład tworzysz system ikon, prawdopodobnie najlepiej jest włączyć to narzędzie do systemu kompilacji.

Już wcześniej patrzyliśmy na Grunt, więc wyobraźmy sobie system, który:

Optymalizuje SVG za każdym razem, gdy plik SVG jest dodawany lub zmieniany w naszym projekcie
Następnie buduje je wszystkie razem w blok defs.svg

Najpierw przeprowadzisz optymalizację i utworzysz folder pełen tych elementów (aby można było je przeglądać jeden po drugim w razie potrzeby), a następnie skompiluj je razem. Oto jak wyglądałby ten plik Gruntfile przy użyciu 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')); );

Wrzucę obraz SVG, z którym graliśmy (z Freepik) i plik ZIP projektu Grunt jako pliki do pobrania.