35: Βελτιστοποίηση SVG με εργαλεία - CSS-Κόλπα

Anonim

Μιλήσαμε για τη βελτιστοποίηση του SVG με το χέρι ήδη. Κάνοντας επιλογές χειροκίνητα σχετικά με τις λεπτομέρειες και τι είδους πράγματα μπορούν να συνδυαστούν ή να αφαιρεθούν. Σε αυτό το σενάριο θα εξετάσουμε τη βελτιστοποίηση του SVG με εργαλεία. Εργαλεία που μπορούν να μειώσουν το μέγεθος του αρχείου SVG χωρίς (ελπίζουμε) να αλλάξουν καθόλου την εμφάνιση του. Πράγματα που είναι τέλεια για αυτοματοποίηση. Αρέσει:

  • Κατάργηση κενού διαστήματος
  • Μείωση της ακρίβειας των αριθμών
  • Κατάργηση τεχνικών μεταδεδομένων

Το πιο δημοφιλές εργαλείο για αυτό είναι το SVGO, ένα εργαλείο εντολών που βασίζεται σε κόμβους για τη βελτιστοποίηση του SVG με αυτόν τον τρόπο. Έχει μια έκδοση GUI, ώστε να μπορείτε να κάνετε μεταφορά και απόθεση, όπως και το ImageOptim. (Στο βίντεο, το χρειαζόμασταν για να το αποσυμπιέσουμε.)

Εξετάσαμε επίσης τα εργαλεία βελτιστοποίησης SVG του Peter Collingridge, τα οποία ήταν τακτοποιημένα στο ότι μπορείτε να διαλέξετε και να επιλέξετε τους κανόνες που θέλετε να εφαρμόσετε και, στη συνέχεια, να δείτε τα αποτελέσματα και το μέγεθος του αρχείου.

Η βελτιστοποίηση με το χέρι μπορεί να είναι εντάξει σε ορισμένες περιπτώσεις όπου εργάζεστε με μικρό αριθμό αρχείων και περιστασιακά. Αλλά αν εργάζεστε πολύ με το SVG, όπως δημιουργείτε ένα σύστημα εικονιδίων, είναι ίσως καλύτερο να ενσωματώσετε το εργαλείο στο σύστημα κατασκευής.

Είδαμε το Grunt εδώ πριν, οπότε ας φανταστούμε ένα σύστημα που:

  1. Βελτιστοποιεί το SVG όποτε προστίθεται ένα αρχείο SVG ή αλλάζει στο έργο μας
  2. Στη συνέχεια τα δημιουργεί όλα μαζί σε ένα μπλοκ defs.svg

Θα κάνατε πρώτα τη βελτιστοποίηση και θα φτιάξατε έναν φάκελο γεμάτο από αυτούς (ώστε να μπορούν να ελεγχθούν ένα προς ένα αν χρειαστεί) και, στη συνέχεια, να τα δημιουργήσετε μαζί. Δείτε πώς θα μοιάζει το Gruntfile χρησιμοποιώντας το grunt-svgmin και το 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')); );

Θα ρίξω την εικόνα SVG με την οποία παίξαμε (από το Freepik) και ένα φερμουάρ του έργου Grunt ως λήψεις.

Αρχεία

  • 35-project.zip
  • 35-santa-example.zip