Wir haben bereits über die manuelle Optimierung von SVG gesprochen. Manuelle Entscheidungen über Details und welche Arten von Dingen kombiniert oder entfernt werden können. In diesem Screencast schauen wir uns die Optimierung von SVG mit Tools an. Tools, die die Dateigröße von SVG reduzieren können, ohne (hoffentlich) das Aussehen zu verändern. Dinge, die sich perfekt für die Automatisierung eignen. Zum Beispiel
- Entfernen von Leerzeichen
- Reduzierung der Genauigkeit von Zahlen
- Entfernen von Metadaten-Ballast
Das beliebteste Tool dafür ist SVGO, ein node-basiertes Kommandozeilen-Tool zur Optimierung von SVG auf diese Weise. Es gibt eine GUI-Version, so dass Sie auch einfach per Drag & Drop ziehen können, ähnlich wie bei ImageOptim. (Im Video brauchten wir dieses, um es zu entpacken.)
Wir haben uns auch Peter Collingridges SVG-Optimierungs-Tools angesehen, die so praktisch waren, dass man auswählen konnte, welche Regeln man anwenden wollte, und dann die Ergebnisse und die Dateigröße sehen konnte.
Manuelle Optimierung ist in manchen Fällen in Ordnung, wenn Sie mit einer kleinen Anzahl von Dateien und gelegentlich arbeiten. Aber wenn Sie viel mit SVG arbeiten, z. B. wenn Sie ein Icon-System erstellen, ist es wahrscheinlich am besten, das Tool in das Build-System zu integrieren.
Wir haben uns bereits mit Grunt beschäftigt, stellen wir uns also ein System vor, das
- SVG optimiert, wann immer eine SVG-Datei in unserem Projekt hinzugefügt oder geändert wird
- Dann baut es alle zu einem defs.svg-Block zusammen
Sie würden zuerst die Optimierung durchführen und einen Ordner voller dieser Dateien erstellen (damit sie bei Bedarf einzeln inspiziert werden können), und dann bauen Sie sie zusammen. So würde diese Gruntfile aussehen, die grunt-svgmin und grunt-svgstore verwendet.
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 einen Zip-Ordner des Grunt-Projekts als Downloads einfügen.