SVG

Il n’y a jamais eu autant de résolutions d’écran différentes qu’en ce moment, ce qui amène son lot de défis. Notamment en termes de gestion des images. D’un côté, tout le monde souhaite avoir des images avec beaucoup de résolution afin qu’elles soient nettes (crisp), peu importe l’écran sur lequel elles sont affichées. D’un autre, tous veulent des images légères et performantes, capables de se charger rapidement. 

Malheureusement, avec des images traditionnelles (matricielles), ces deux qualités sont difficilement conciliables. Augmenter la résolution d’une image diminue systématiquement sa performance et vice versa. Heureusement, il existe une alternative: les images SVG! Ce format offre une excellente performance et est toujours net, peu importe la résolution d’affichage demandée. Ces qualités font en sorte que le format SVG est un incontournable pour les logos, icônes, illustrations, ainsi que plusieurs autres types d'images sur le web.

CodePen | smnarnold 👀

Définition

Le format SVG (Scalable Vector Graphics) est inspiré du format XML. Il contient une balise parent dans laquelle des balises enfants peuvent représenter des formes géométriques de base, de tracés, ou encore tout autre élément créés à même un logiciel de création d’images vectorielles. Cette particularité fait en sorte que le SVG est un format plus proche de la page HTML, avec son concept de balises, que du JPEG traditionnel. 

La proximité entre le HTML et le SVG offre aussi un autre grand avantage: soit celui de pouvoir manipuler les composantes d’un SVG sur le web en CSS ou en JavaScript. Rendant ainsi le SVG beaucoup plus puissant que tout autre format d’images!

Éléments courants

Un SVG peut-être composé de plusieurs éléments.

Voici les plus courants:

• <rect> permets de définir des formes rectangulaires.

• <circle> permets de définir des cercles.

• <ellipse> similaire à circle, mais permet de définir des formes ovales.

• <polygon> permets de définir toute forme géométrique constituée uniquement de lignes droites.

• <path> élément générique permettant de définir n'importe quelle forme, incluant les celles comportant des lignes courbes.

• <g> représente un groupe d'éléments.

Exportation Illustrator

Avant d’exporter un SVG à partir d’Illustrator vers le web, il est important de valider certains points:

Nommage

Porter attention aux noms attribués aux groupes et calques dans Illustrator. Ceux-ci seront utilisés à titre d’id sur les éléments constituant votre SVG. Il sera donc plus facile de savoir quelle balise correspond à quel élément si vous avez pris la peine de les nommer correctement.

Il est possible de remplacer les noms plus tard directement sur le SVG, mais afin d’éviter toute confusion, il est préférable de le faire adéquatement dès le départ.

Polices

Il est préférable de vectoriser tous les textes via l’option:

Texte ➡️ Vectoriser 

Afin de convertir le texte en tracé vectoriel, permettant ainsi d’éviter que le navigateur remplace la police par une autre si celle-ci n’est pas disponible.

Remarquez, si vous importez déjà la police dans vos styles CSS, via Google Fonts ou encore @font-face, il n’est pas nécessaire de vectoriser vos textes. Cependant, si la police n’est pas déjà importée dans votre projet, il est probablement plus performant de vectoriser vos textes que d’importer une police supplémentaire.

Bordures

À moins de prévoir de manipuler les bordures d’un élément, il est préférable de les vectoriser afin de simplifier leur gestion. Pour ce faire, il suffit d’utiliser l’option:

Objet ➡️ Tracé ➡️ Vectoriser le contour

Dimension

Afin d’éviter d’exporter un espace vide superflu autour d’une Illustration, il est préférable de sélection l’option:

Objet ➡️ Plans de travail ➡️ Ajuster aux limites de l’illustration

Exportation

Pour exporter un SVG accéder à partir du menu à:

Fichier ➡️ Enregistrer Sous

Choisissez ensuite le format “SVG (svg)” et cliquez sur “Enregistrer”. Une fenêtre d’options sera alors affichée. Selon votre besoin, deux options seront alors disponibles:

• “Ok” pour sauvegarder le fichier SVG sur votre ordinateur.

• “Code SVG…” afin d’obtenir le code directement.

Optimisation SVGOMG

Par défaut les fichiers SVG exportés par Illustrator sont complexes. Les rendant ainsi moins performants et plus complexes à manipuler. Il est donc suggéré de les optimiser via SVGOMG afin de retirer le code superflu. Cet outil réussit souvent à retirer plus de la moitié du code constituant un SVG fraîchement sorti d’Illustrator.

Pour l’utiliser, vous pouvez télécharger votre fichier via l’option “Open SVG” ou simplement le glisser-déposer sur la page de SVGOMG afin de le charger.

Si vous avez choisi l’option “Code SVG…” afin d’obtenir le code directement, vous pouvez cliquer sur “Paste markup” et coller le code à cet endroit simplement.

Options suggérés

Certaines “Features” permettent d’améliorer grandement la qualité du fichier retourné par SVGOMG. Il est donc conseillé de les activées.

• Round/rewrite paths afin de retirer tous les points superflus dans vos formes.

• Shapes to (smaller) paths afin de convertir les formes en path lorsque cette alternative est plus performante.

• Prefer viewBox to width/height indique à votre SVG un ratio à garder plutôt qu'une largeur et une hauteur fixe. 

Un aperçu du résultat est alors disponible. Il est possible de télécharger la nouvelle version du fichier SVG via la flèche bleue pointant vers le bas ou encore de récupérer le code optimisé dans le presse-papier via l’icône de copie au-dessus de ladite flèche.

Utilisation

Il existe plusieurs façons d’afficher une image SVG sur le web avec leurs différents avantages et inconvénients.

Img

Comme toute image traditionnelle (jpg, png, etc.), il est possible d’afficher un SVG via une balise <img>. Cependant, cette approche limite grandement les possibilités de manipulation dudit SVG.

Background-image

Il est aussi possible d’afficher un SVG en image d’arrière-plan comme une image traditionnelle. Cependant, cette approche limite grandement les possibilités de manipulation dudit SVG.

Object

La balise object est la méthode de prédilection afin d’afficher un SVG puisqu’elle permet non seulement de l’afficher, mais aussi de manipuler ses composantes et de la mettre à jour facilement, simplement en remplaçant le fichier SVG.

Inline

Coller le code d’un SVG dans une page HTML est la méthode la plus facile d’afficher un SVG tout en gardant ses capacités de manipulation. Cependant, chaque fois que ledit SVG sera modifié, il faudra re-exporter son code et aller le coller dans les pages HTML aux endroits l’affichant.

Remarquez l'attribut viewbox. Les 4 chiffres à l'intérieur définissent les dimensions de base de l'image. Les deux premiers représentent la largeur et la hauteur minimale de l'image (généralement, ces chiffres ont une valeur de 0). Les deux suivants représentent la largeur et la hauteur de référence utilisée afin de positionnement les éléments de l'image.

Tous les éléments à l'intérieur de la balise <svg> sont des formes à afficher dans l'image.

1. La première est un rectangle rouge 🔴 de 100 par 100, donc couvrant l'ensemble de la surface de l'image.

2. La deuxième est un polygone vert 🟢 affiché par-dessus le carré rouge. L'attribut points correspond à la position des points X et Y constituant la forme à afficher. Par exemple, 0,0 indique que le 1^er point est positionné à la position X:0 et Y:0. Le 2^e à la position X:50 et Y:0 et ainsi de suite.

3. La troisième est aussi un polygone, cette fois-ci bleu 🔵, assez similaire au polygone précédent.

Manipulation CSS et JS

Lorsqu'une image SVG est importée en ligne, il est possible de manipuler ses formes en CSS et JavaScript, comme toute autre balise HTML.

CSS

Plusieurs propriétés CSS de base sont compatibles avec les formes SVG. Cependant, certaines propriétés leur sont propres:

• fill contrôlant la couleur de fond (équivalent de background-color).

• stroke contrôlant la bordure (équivalent de border).

Par exemple, la propriété fill de la forme verte 🟢 est modifiée lorsque la forme est survolée.

CodePen | smnarnold 👀