InMy.Live

L’une des étapes que vous devez effectuer lorsque vous travaillez avec SVG consiste à optimiser le code SVG après l’avoir exporté depuis l’éditeur et avant de l’intégrer à votre page Web. Pour cela, plusieurs outils d’optimisation autonomes existent. Les deux outils que je mentionne habituellement dans mes articles et conférences sont l’éditeur en ligne de Peter Collingridge et SVGO. Dans cet article, je vais vous présenter un nouvel outil SVGO qui nous fournit tout ce que fait l’outil de Peter, et un peu plus.

Cela ne veut pas dire que l’outil de Peter n’est plus utile – il l’est certainement. Mais si vous utilisez SVGO, vous savez à quel point il est pratique avec tous les outils disponibles qui l’accompagnent.

Qu’est-ce que SVGO ?

Pour ceux d’entre vous qui ne sont pas familiers avec SVGO : il s’agit d’un outil d’optimisation SVG basé sur node-js. (SVGO est l’abréviation de Optimisation SVG). Il est livré avec un ensemble d’outils et de plugins qui en font un excellent outil que vous pouvez intégrer dans presque tous les types de flux de travail. (Nous reviendrons sur ces outils sous peu.)

Cependant, SVGO a un inconvénient : il peut facilement casser votre SVG, surtout s’il est animé ou scripté, la structure du document changera et finira par casser les animations ou les scripts appliqués.

Même avec les nombreux outils et plugins SVGO disponibles, malheureusement, nous n’avions aucun moyen de prévisualiser le résultat de l’application des optimisations SVGO à un SVG, pour dire s’ils le casseront ou non… jusqu’à présent.

Présentation de SVGOMG

Le mois dernier, lorsque j’ai écrit l’article sur les performances SVG pour Perf Calendar, Google Jacques Archibald tech-a examiné l’article. Et tout en discutant de la section d’optimisation du code, j’ai mentionné comment SVGO manque d’une interface graphique qui nous permet de prévisualiser le résultat de l’exécution des optimisations sur nos SVG, et comment il doit être utilisé avec prudence à cause de cela.

Une semaine ou deux plus tard, Jake a créé l’interface graphique SVGOMG, une interface qui vous permet d’optimiser les SVG en sélectionnant vos optimisations et en obtenant un aperçu en direct de l’apparence de votre SVG avec ces optimisations appliquées.

Si vous avez déjà utilisé l’outil de Peter, vous pouvez vous attendre à la même chose de SVGOMG, et plus.

Vous pouvez télécharger un fichier SVG, coller du code SVG ou charger le SVG de démonstration par défaut, si vous essayez simplement l’application. Un ensemble d’options sera alors révélé sur le côté droit de l’écran (voir capture d’écran ci-dessus). Ces options représentent les optimisations intégrées à SVGO. Les optimisations SVGO sont des plugins que vous pouvez activer et désactiver selon vos besoins, et SVGOMG vous offre un moyen visuel de le faire.

La section d’aperçu en direct se mettra à jour au fur et à mesure que vous choisirez vos optimisations, vous permettant de détecter et de désactiver toute optimisation qui casserait votre SVG.

Dans le coin supérieur droit, vous pouvez voir la taille actuelle du fichier et le pourcentage d’optimisation. Vous avez également la possibilité d’afficher le SVG d’origine, qui affichera également la taille du fichier d’origine, pour le comparer à votre version optimisée.

SVGOMG est un outil en ligne. Mais si vous connaissez Jake, vous vous attendez probablement à ce qu’il fonctionne également hors ligne, étant donné qu’il pourrait bien être le plus grand partisan de ServiceWorker et hors ligne en premier. Il en a beaucoup parlé sur son blog. Ainsi – comme on pouvait s’y attendre –l’interface graphique fonctionne également hors ligne dans n’importe quel navigateur qui a ServiceWorker. (Pour un aperçu de l’état de ServiceWorker, reportez-vous à cette page de compatibilité du navigateur.) Une fois que vous avez ouvert l’application (essayez-la dans Chrome, par exemple), vous recevrez une notification quelques secondes plus tard vous indiquant que l’interface graphique est prêt à travailler hors ligne.

Très utile, n’est-ce pas ?

Autres outils SVGO

Il existe de nombreux plugins SVGO disponibles qui peuvent être utilisés de différentes manières, en fonction de votre flux de travail préféré :

Plugin Adobe Illustrator

Une interface graphique permettant de sélectionner les optimisations que vous souhaitez appliquer existe également dans un autre outil SVGO appelé SVG MAINTENANT.

SVG NOW est un plugin Illustrator qui apporte les optimisations de SVGO dans Illustrator. Il s’agit d’un exportateur SVG alternatif pour l’IA, visant à optimiser les fichiers SVG en post-traitant le code SVG généré à l’aide de SVGO. C’est certainement utile, mais SVG NOW ne vous montre pas un aperçu en direct de la façon dont le SVG est affecté par les optimisations que vous choisissez.

Plug-in InkscapeName

Semblable à SVG MAINTENANT, SVGO-Inkscape est un plugin Inkscape qui vous permet de supprimer de nombreuses informations redondantes et inutiles telles que les métadonnées de l’éditeur, les commentaires, les éléments cachés, les valeurs par défaut ou non optimales et d’autres éléments générés par Inkscape et qui peuvent être supprimés ou convertis en toute sécurité sans affecter le rendu SVG résultat.

Plug-in d’esquisse

SVGO Compressor est la version Sketch du plug-in SVGO, qui compresse les actifs SVG à l’aide de SVGO, juste au moment où vous les exportez. Comme avec les autres outils SVGO, il n’y a aucun moyen de dire comment le SVG exporté sera affecté par les optimisations appliquées.

D’après mon expérience personnelle, j’ai constaté que les SVG exportés à l’aide de Sketch étaient plus susceptibles de se casser lorsqu’ils étaient optimisés avec SVGO, en raison de la façon dont Sketch exporte certaines formes SVG à l’aide de chemins de détourage et de masques. Il est donc utile de se rappeler que vous devrez peut-être réexporter et réoptimiser le SVG d’une autre manière si et quand cela se produit.

Notez que le plugin a besoin Sketch 3.8, et donc cela ne fonctionnera pas avec les anciennes versions de l’application.

Interface graphique glisser-déposer

Un autre type d’interface graphique pour SVGO existe – appelé IUG SVGO – qui vous permet de glisser-déposer vos SVG, puis d’optimiser ces SVG à la volée, en remplaçant vos originaux par les versions optimisées.

Cette interface graphique est utile pour les optimisations en masse rapides, mais elle est risquée étant donné que 1) vous ne pouvez pas prévisualiser le SVG optimisé 2) vos SVG d’origine sont instantanément remplacés par les versions optimisées, ce qui signifie que vos SVG peuvent se casser et que les cassés remplaceront le ceux d’origine. Si vous envisagez d’utiliser cette interface graphique, assurez-vous d’avoir une sauvegarde avant d’optimiser.

Plugins Grunt et Gulp

SVGO est probablement surtout connu pour ses Plug-in de grognementet sa sœur la Plug-in GulpComment. Ces deux plugins vous permettent d’activer et de désactiver les optimisations SVGO selon vos besoins. Par exemple, une optimisation SVGO par défaut supprimera le viewBox attribut de votre SVG. C’est quelque chose que vous devriez complètement éviter, car, sans le viewBox , le SVG ne peut pas être rendu réactif. (Pour plus d’informations sur le viewBox attribut, reportez-vous à mon tutoriel ici.)

Lorsque vous configurez SVGO dans Grunt, par exemple, vous pouvez désactiver tous les plugins que vous souhaitez. Par exemple, pour désactiver la suppression du viewBoxajouter removeViewBox: false au Plugins objet dans votre fichier de configuration.

grunt.initConfig({
    svgmin: {
        options: {
            plugins: [
                {
                    removeViewBox: false
                }, {
                    removeUselessStrokeAndFill: false
                }
            ]
        },
        dist: {
            files: {
                'dist/unicorn.svg': 'app/unicorn.svg'
            }
        }
    }
});

Vous pouvez vous référer au référentiel Github du plugin pour plus d’informations.

Action de dossier OS X

SVGO est également livré avec un Action de dossier OS X que vous pouvez joindre à n’importe quel dossier, puis optimisez vos SVG à la volée dès que vous les placez dans ce dossier. Encore une fois, les versions optimisées remplaceront les versions originales, alors soyez prudent.

Derniers mots

Quel que soit votre flux de travail, SVGO peut probablement s’y intégrer, d’une manière ou d’une autre.

Je suis sûr que d’autres outils d’optimisation SVG existent, mais avec toutes les options fournies par SVGO, si vous me le demandez, c’est l’outil que je recommanderais.

Optimisez ces SVG, construisez quelque chose de beau et partagez-le avec le monde.

Merci pour la lecture.