Maîtrisez les fichiers SVG comme un professionnel
Dans cet article, je vous explique comment créer, ouvrir ou convertir un fichier image SVG sans entrer dans les détails techniques.
Alexis Le Baron
1. Ouvrir un fichier SVG
Pour ouvrir un fichier SVG, vous avez besoin d’un éditeur de texte adapté comme :
- Bloc-notes : Simple et minimaliste.
- Sublime Text : Mon préféré, car il est simple et offre une saisie automatique quand vous tapez un mot.
- Notepad++ : Un très bon choix sur Windows.
- TextEdit : Si vous êtes sur un Mac, c’est parfait.
- Notes : Deuxième choix si vous êtes toujours sur un Mac.
Vous l’avez remarqué, je n’ai pas listé le célèbre éditeur Word, car il ne fonctionnera pas avec ce format (promis, j’ai testé).
Il ne vous reste plus qu’à faire votre choix, puis faire un clic droit sur votre fichier SVG et l’ouvrir avec.
Une fois que vous avez effectué cette action, vous allez voir apparaître quelque chose qui ressemble à ça :
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle fill="#0C3157" cx="50" cy="50" r="50"/>
<rect fill="#75B4F0" x="40" y="40" height="20" width="20"/>
</svg>Cet exemple est volontairement simple, car vous pouvez y retrouver de nombreux éléments qui sont complexes à utiliser.
Voici à quoi ressemble ce code SVG visuellement :
Pour avoir ouvert personnellement des centaines, voire des milliers de fichiers SVG, je peux vous affirmer que certains sont effrayants. Cependant, le code que vous retrouvez à l’intérieur est parfaitement logique pour construire votre image.
Contrairement aux fichiers SVG, une image JPG ou PNG est impossible à éditer. Je vous explique, dans la partie suivante, comment jouer avec ce code, comme sur l’image ci-dessus.
2. Création et édition d’un fichier SVG à la main
Les choses sérieuses commencent ! Vous avez entre les mains des dizaines ou des milliers de lignes de code SVG et vous ne comprenez rien ? Eh bien, n’ayez crainte, je vous explique ce qu’il faut en retenir.
Pour commencer, un fichier SVG est composé d’éléments qui vont créer des formes. Pour en citer quelques-uns, on a :
| Élement | Forme | Édition |
|---|---|---|
| <rect> | Rectangle | Simple |
| <circle> | Cercle | Simple |
| <path> | Trait dessiné avec une plume | Compliqué |
Retrouvez la liste complète des éléments que l’on peut trouver dans un SVG sur ce lien.
L’objectif ici n’est pas de vous expliquer le fonctionnement de chaque élément, mais plutôt de comprendre le fonctionnement général d’un SVG.
Si vous possédez un SVG qui compte plus de 1000 lignes de code, il serait plus judicieux d’utiliser un logiciel spécialisé pour l’éditer.
Nous poursuivons avec des explications, à partir de l’exemple, sur la façon d’ouvrir un fichier SVG.
Création de l’élément <svg>
N’importe quel SVG contient une balise <svg> au début et </svg> à la fin. Cet élément est en quelque sorte la base d’un fichier où l’on va renseigner des informations telles que :
- La hauteur de la grille pour les formes que l’on va inclure ensuite :
height=”100”. - La largeur de la grille pour les formes que l’on va inclure ensuite :
width=”100”. - Le xmlns : il est là car on l’aime bien, cette valeur est toujours la même.
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
...
</svg>Visuellement, ce code n’affiche rien. On obtient une image vide, car aucun élément n’a été placé à l’intérieur. Nous allons donc insérer un cercle dans la partie suivante.
Édition de l’élément <circle>
Pour ajouter un cercle, vous devez définir les informations suivantes :
- La couleur de remplissage :
fill="#0C3157". Ici j’utilise une couleur hexadécimale#0C3157, mais j’aurais très bien pu utiliser une couleur nommée simple commered. - La position X du centre du cercle en fonction de la largeur définie sur l’élément
<svg>:cx="50". - La position Y du centre du cercle en fonction de la hauteur définie sur l’élément
<svg>:cy="50".
J’ai choisi de placer mon cercle au centre en faisant le calcul : hauteur divisée par deux. Idem pour la largeur.
Grâce à ces explications, je peux donc écrire mon cercle comme ceci :
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle fill="#0C3157" cx="50" cy="50" r="50"/>
</svg>Visuellement, j’obtiens enfin un résultat qui m’affiche mon cercle bleu centré :
Si vous souhaitez utiliser ce SVG sur un site Internet, découvrez comment animer un SVG avec un cercle.
Édition de l’élément <rect>
Pour ajouter un rectangle, vous devez définir des informations de type :
- La couleur de remplissage :
fill="#75B4F0". Ici j’utilise une couleur hexadécimale#75B4F0mais j’aurais très bien pu utiliser une couleur primaire commered. - La position X du point en haut à gauche du rectangle :
x="40". Relative à la largeur que j’ai définie pour l’élément<svg>. - La position Y du point en haut à gauche du rectangle :
y="40"relative à la hauteur que j’ai définie pour l’élément<svg>. - La hauteur de mon rectangle :
height="20"relative à la hauteur que j’ai définie pour l’élément<svg>. - La largeur de mon rectangle :
width="20"relative à la largeur que j’ai définie pour l’élément<svg>.
Je peux donc écrire mon rectangle sur le cercle défini précédemment comme ceci :
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle fill="#0C3157" cx="50" cy="50" r="50"/>
<rect fill="#75B4F0" x="40" y="40" height="20" width="20"/>
</svg>Visuellement, j’obtiens un cercle et un rectangle :
Certains fichiers SVG peuvent être construits entièrement à la main grâce à une bonne connaissance de ces éléments.
Pour construire des images beaucoup plus poussées, vous aurez besoin d’un logiciel conçu spécialement pour la création de fichiers SVG. C’est ce que nous verrons dans la partie suivante.
3. Éditer un fichier SVG avec un logiciel
Considérons que vous ayez besoin de créer une image SVG d’une ville avec beaucoup de détails. La réaliser à la main serait tout simplement une perte de temps. Pour accomplir cette mission, vous aurez besoin d’un logiciel de création de SVG :
| Logiciel | Prix | Utilisation |
|---|---|---|
| Inskape | Gratuit | Compliqué à prendre en main. Disponible sur linux. |
| Abode Illustrator | Payant | Conçu pour les designers. Compliqué à prendre en main. |
| Sketch | Payant | Conçu pour les designers. Encore plus compliqué. |
| Canva | 30 jours gratuit et payant | Simple |
4. Où trouver des fichiers SVG ou PNG gratuitement ?
Il existe de nombreux sites Internet pour trouver des fichiers SVG et PNG gratuitement.
Pour cette partie, je ne vais pas vous faire une liste de sites à visiter, mais une recommandation.
Beaucoup de fichiers, même s'il s'agit de SVG, peuvent être mal optimisés. En d’autres termes, ils ont été créés salement n’importe comment. Par exemple :
- Certaines formes SVG peuvent contenir de nombreux points, alors qu’on pourrait les simplifier avec un élément plus adapté et donc réduire le code.
- Certains fichiers SVG contiennent des images JPG (oui, c’est possible d’inclure un JPG dans un SVG...), ce qui rend le format SVG complètement inutile.
- Certains SVG ont été conçus de manière rudimentaire : sans grille ni alignement précis.
Pour obtenir des fichiers SVG optimisés avec un convertisseur PNG, je vous invite à visiter notre librairie SVG avec +3000 images.
5. Convertir un fichier SVG
Il arrive parfois qu’un outil ou un site internet ne gère pas le format SVG et vous demande un fichier JPG ou PNG à la place. Vous cherchez donc un moyen de convertir ce fichier.
La méthode recommandée est d’ouvrir votre fichier SVG avec un logiciel comme décrit ici, puis d’exporter ce fichier au format désiré.
Utilisez les convertisseurs en ligne uniquement en dernier recours, car ils peuvent déformer votre image SVG.
Inscrivez-vous à Flocon de neige et recevez nos derniers articles publiés.
Les questions fréquentes sur les fichiers SVG
Vous avez encore des d’image ?
Les images SVG peuvent être utilisées pour un site Internet, pour des impressions papier, pour des autocollants, pour des pochoirs (Cricut, ScanNCut, etc.), pour les jeux vidéo et bien d’autres domaines.
Une image SVG peut s’agrandir autant qu’on le souhaite sans perte de qualité. La taille d’un fichier SVG est faible, contrairement à celle d’un PNG ou d’un JPG. On peut aussi les éditer manuellement.
Oui, mais uniquement pour les formes simples. Pour les formes plus compliquées, il faut utiliser un logiciel dédié à la création et à l’édition de SVG.
Le sujet du web design vous fascine ? Ces articles devraient également vous intéresser.
Alexis Le Baron
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.
