35: SVG mit Tools optimieren - CSS-Tricks

Wir haben bereits über die Optimierung von SVG von Hand gesprochen. Manuelle Auswahl von Details und welche Arten von Dingen kombiniert oder entfernt werden können. In diesem Screencast werden wir uns mit der Optimierung von SVG mit Tools befassen. Tools, die die Dateigröße von SVG reduzieren können, ohne (hoffentlich) das Aussehen überhaupt zu ändern. Dinge, die perfekt für die Automatisierung sind. Mögen:

Leerzeichen entfernen
Reduzierung der Genauigkeit von Zahlen
Entfernen der Metadaten-Cruft

Das beliebteste Tool dafür ist SVGO, ein knotenbasiertes Befehlstool zur Optimierung von SVG auf diese Weise. Es hat eine GUI-Version, so dass Sie auch einfach Drag & Drop wie etwas wie ImageOptim können. (Im Video brauchten wir dies, um es zu entpacken.)

Wir haben uns auch die SVG-Optimierungstools von Peter Collingridge angesehen, bei denen Sie auswählen können, welche Regeln Sie anwenden möchten, und dann die Ergebnisse und die Dateigröße anzeigen können.

Die manuelle Optimierung kann in einigen Fällen in Ordnung sein, in denen Sie gelegentlich mit einer kleinen Anzahl von Dateien arbeiten. Wenn Sie jedoch viel mit SVG arbeiten, wie z. B. beim Aufbau eines Icon-Systems, ist es wahrscheinlich am besten, das Tool in das Build-System zu integrieren.

Wir haben uns Grunt hier schon einmal angesehen. Stellen wir uns also ein System vor, das:

Optimiert SVG jedes Mal, wenn eine SVG-Datei hinzugefügt oder in unserem Projekt geändert wird
Baut sie dann alle zusammen zu einem defs.svg-Block zusammen

Sie führen zuerst die Optimierung durch und erstellen einen Ordner mit diesen Ordnern (damit sie bei Bedarf einzeln überprüft werden können). Anschließend erstellen Sie sie zusammen. So würde diese Grunt-Datei mit grunt-svgmin und grunt-svgstore aussehen:

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

Ich werde das SVG-Bild, mit dem wir gespielt haben (von Freepik) und eine Zip-Datei des Grunt-Projekts als Downloads hinzufügen.