35: SVG optimaliseren met tools - CSS-trucs

We hadden het al over het handmatig optimaliseren van SVG. Handmatig keuzes maken over details en wat voor soort dingen gecombineerd of verwijderd kunnen worden. In deze screencast kijken we naar het optimaliseren van SVG met tools. Tools die de bestandsgrootte van SVG kunnen verkleinen zonder (hopelijk) het uiterlijk ervan te veranderen. Dingen die perfect zijn voor automatisering. Leuk vinden:

Witruimte verwijderen
De precisie van getallen verminderen
Metadata verwijderen cruft

De meest populaire tool daarvoor is SVGO, een op knooppunten gebaseerde opdrachttool om SVG op deze manier te optimaliseren. Het heeft een GUI-versie, dus je kunt gewoon slepen en neerzetten, net als zoiets als ImageOptim. (In de video hadden we dit nodig om het uit te pakken.)

We hebben ook gekeken naar de SVG-optimalisatietools van Peter Collingridge, die handig waren omdat je kunt kiezen welke regels je wilt toepassen en vervolgens de resultaten en de bestandsgrootte kunt bekijken.

Handmatig optimaliseren kan in sommige gevallen oké zijn als u met een klein aantal bestanden werkt en soms. Maar als u veel met SVG werkt, alsof u een pictogramsysteem bouwt, is het waarschijnlijk het beste om de tool in het buildsysteem op te nemen.

We hebben hier eerder naar Grunt gekeken, dus laten we ons een systeem voorstellen dat:

Optimaliseert SVG telkens wanneer een SVG-bestand wordt toegevoegd of gewijzigd in ons project
Bouwt ze vervolgens allemaal samen in een defs.svg-blok

U zou eerst de optimalisatie doen en een map vol met deze ontwerpen (zodat ze indien nodig een voor een kunnen worden geïnspecteerd), en ze vervolgens samen bouwen. Hier is hoe dat Gruntfile eruit zou zien met grunt-svgmin en 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')); );

Ik zal de SVG-afbeelding waarmee we speelden (van Freepik) en een zip van het Grunt-project als downloads plaatsen.