Qu'est-ce qu'un fichier SVG (et comment l'utilisez-vous) ?

Un graphique vectoriel évolutif (SVG) est un type unique de format d'image. Contrairement à d'autres variétés, les SVG ne reposent pas sur des pixels uniques pour composer les images que vous voyez. Au lieu de cela, ils utilisent des données « vectorielles ».

En utilisant des SVG, vous obtenez des images qui peuvent évoluer jusqu'à n'importe quelle résolution, ce qui est pratique pour la conception Web parmi de nombreux autres cas d'utilisation. Dans cet article, nous poserons la question : Qu'est-ce qu'un fichier SVG ? Nous vous apprendrons ensuite à utiliser le format.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Qu'est-ce qu'un fichier SVG ?

Les SVG sont des graphiques construits à l'aide de vecteurs. Pour les non-initiés, un vecteur est un élément avec une magnitude et une direction spécifiques. En théorie, vous pouvez générer presque tous les types de graphiques que vous souhaitez en utilisant une collection de vecteurs. Prenez cette image d'un rectangle bleu avec une bordure noire et une ombre, par exemple :

Il s'agit d'un autre type de fichier image appelé Portable Network Graphic (PNG), utilisé pour les illustrations et les dessins. Si vous souhaitez reproduire quelque chose de similaire à l'aide de graphiques vectoriels, vous devez le générer avec du code XML (le même que celui utilisé pour les plans de site.) Le code suivant pourrait obtenir le même résultat :

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

En théorie, si vous prenez ce code et le déposez dans un fichier HTML, vous verrez un ensemble de rectangles similaire au PNG, c'est-à-dire tant que le navigateur que vous utilisez prend en charge les fichiers SVG. Bien que les deux images se ressemblent, les fichiers SVG offrent de nombreux avantages que les autres formats n'offrent pas. Par exemple, les SVG sont capables de conserver la qualité de l'image à mesure qu'ils augmentent ou diminuent.

Si vous continuez à zoomer sur le rectangle PNG, vous remarquerez que sa qualité commence à se dégrader à un moment donné. Avec des graphiques basés sur des pixels plus complexes, la dégradation devient évidente beaucoup plus rapidement. Cependant, les SVG semblent bons à pratiquement toutes les résolutions.

Pourquoi utiliser un fichier SVG ?

De nombreux sites Web utilisent des formats tels que PNG et JPEG de manière presque interchangeable. Les SVG ne sont cependant pas aussi polyvalents. Si vous essayez de recréer une photographie complexe à l'aide de vecteurs, vous vous retrouverez généralement avec des fichiers SVG volumineux et inutilisables.

Cependant, le format SVG est une option fantastique pour tout un ensemble d'autres scénarios :

• Conception de logos. Étant donné que vous réutiliserez probablement les logos sur les sites Web et les réseaux sociaux, l'utilisation de SVG résout tous les problèmes d'évolutivité potentiels.
• Diagrammes. Les SVG conviennent parfaitement aux diagrammes et à tout autre type d'illustration reposant sur des lignes simples.
• Éléments animés. Vous pouvez utiliser CSS pour animer les SVG, ce qui en fait un composant utile dans la conception de sites Web, en particulier pour les microinteractions.
• Tableaux et graphiques. Vous pouvez utiliser des SVG pour créer des graphiques et des tableaux évolutifs prenant en charge les animations.

Étant donné que les SVG utilisent le format XML, cela les rend également consultables et indexables. Les lecteurs d'écran peuvent interpréter les fichiers SVG tant que vous utilisez les balises d'accessibilité correctes.

Enfin, les fichiers SVG ont tendance à être beaucoup plus petits que leurs équivalents haute résolution dans d'autres formats. Sur le papier, cela signifie que vous pourrez peut-être réduire certaines tailles de vos pages et réduire les temps de chargement. Cependant, à moins que vous ne prévoyiez de convertir la plupart de vos images en SVG, l'augmentation des performances sera probablement minime.

Comment créer un fichier SVG (2 façons)

Il existe deux approches que vous pouvez adopter en ce qui concerne les fichiers SVG. Vous pouvez les créer à partir de zéro ou prendre une image existante et la convertir. Commençons par la méthode manuelle.

1. Créez un fichier SVG manuellement

La création d'un fichier SVG n'implique généralement pas la saisie d'informations vectorielles comme nous l'avons fait précédemment. C'était juste un exemple pour montrer le concept. Au lieu de cela, vous créez des SVG comme n'importe quel autre graphique - en utilisant un programme de conception et en enregistrant le fichier au format SVG. De nombreux outils de conception graphique modernes prennent en charge les SVG prêts à l'emploi. Certaines des meilleures options incluent :

• Adobe Illustrator, Photoshop, Animate et InDesign
• Microsoft Visio
• Inkscape
• GIMP

Les deux dernières options de cette liste sont des solutions open source. Cela en fait une excellente option pour expérimenter la création de SVG sans payer pour un logiciel premium. En fait, ils peuvent être tout ce dont vous avez besoin.

Si vous n'avez aucune expérience en conception graphique, créer vos propres logos ou autres éléments pour votre site Web sera un défi. Dans ce cas, votre meilleur pari sera de prendre des images existantes et de les convertir en SVG.

2. Convertir des images existantes en SVG

Il existe de nombreux outils gratuits que vous pouvez utiliser pour convertir des images d'autres formats en SVG. La plupart des logiciels que nous avons mentionnés dans la dernière section vous permettent d'ouvrir vos images et de les enregistrer sous forme de fichiers SVG.

Si vous ne souhaitez télécharger aucun logiciel, vous pouvez également utiliser des outils de conversion en ligne – et il existe de nombreux services auxquels vous pouvez vous tourner. Un exemple est Vector Magic, que vous pouvez utiliser pour convertir toutes sortes de types de fichiers en SVG :

Nous aimons cet outil particulier car il vous montre un aperçu de votre fichier SVG avant de le télécharger. Vous pouvez également utiliser un éditeur intégré pour apporter de petites modifications et corrections avant de télécharger le fichier :

Bien sûr, ce n'est qu'une option. Les autres services de conversion PNG et JPG en SVG incluent Convertio et Img2Go. Vous voudrez faire des recherches pour trouver la solution la plus adaptée à vos besoins.

D'après notre expérience, la plupart des convertisseurs SVG offrent des résultats de qualité similaire. Pour les meilleurs résultats possibles, le convertisseur que vous utilisez n'a pas autant d'importance que les images que vous sélectionnez.

En règle générale, il n'est logique d'utiliser le format SVG que pour des images « simples », c'est-à-dire des images avec des bordures définies et des lignes épurées. Plus l'image est complexe, plus il est probable que vous vous retrouviez avec un fichier SVG massif qui est une corvée à éditer manuellement ou à animer.

Comment utiliser un fichier SVG (dans et hors de WordPress)

Les SVG ne sont pas si difficiles à utiliser. L'ajout d'un fichier SVG à votre site Web est aussi simple que de prendre son code et de le coller dans un document HTML là où vous voulez que l'image aille.

Si vous et les visiteurs de votre site utilisez des navigateurs prenant en charge les fichiers SVG (et la plupart le font de nos jours), ils pourront voir l'élément. L'animation de SVG est bien sûr plus délicate car elle nécessite l'utilisation de CSS.

Cependant, le processus change si vous utilisez WordPress. Le système de gestion de contenu (CMS) ne prend pas en charge les SVG prêts à l'emploi. Si vous souhaitez activer la prise en charge de SVG afin de pouvoir télécharger des fichiers directement sur votre site Web, vous devrez utiliser un plugin tel que Safe SVG :

Il est également possible d'activer manuellement le support SVG dans WordPress, mais le processus est beaucoup plus complexe. Dans ce cas, l'utilisation d'un plugin est l'option la plus sûre.

Conclusion

Adapter votre site Web pour utiliser des fichiers SVG est beaucoup plus facile que vous ne l'imaginez. Le vrai défi réside dans la conception de SVG à partir de zéro ou dans le choix des bonnes images à convertir au format. Heureusement, il existe de nombreux outils que vous pouvez utiliser pour faire les deux.

Certaines options intéressantes incluent Adobe Illustrator, InDesign et GIMP. En utilisant ces outils, vous pouvez créer et convertir des images existantes en SVG. Si vous utilisez WordPress, vous pouvez télécharger ces SVG à l'aide du plugin Safe SVG, puis vous amuser à les animer.

Vous avez des questions sur l'utilisation des fichiers SVG ? Parlons-en dans la section commentaires ci-dessous!

Vignette de l'image de l'article par VectorsMarket / shutterstock.com