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 rentrer 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 note : Simple et minimaliste.
- SublimText : 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 Apple, c’est parfait.
- Notes : Second choix si vous êtes toujours sur Apple.
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 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 retrouver beaucoup d’éléments qui sont complexes à utiliser.
Voici à quoi ressemble ce code SVG visuellement :
Pour avoir ouvert personnellement des centaines voir 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 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 codes SVG et vous ne comprenez rien ? Et 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 lister quelques, on a :
| Élement | Forme | Édition |
|---|---|---|
| <rect> | Rectangle | Simple |
| <circle> | Cercle | Simple |
| <path> | Trait dessiné avec une plume | Compliqué |
Retrouver la liste complète des éléments qu’on peut retrouver dans un SVG sur ce lien.
L’objectif ici n’est pas de vous expliquer comment chaque élément fonctionne, mais plutôt de comprendre le fonctionnement général d’un SVG.
Si vous possédez un SVG qui représente plus de 1000 lignes de codes, il serait plus judicieux d’utiliser un logiciel spécialisé de SVG pour l’éditer.
On continue avec des explications sur l’exemple repris sur comment ouvrir un fichier SVG.
Création de l’élément <svg>
N’importe quel SVG contient une balise <svg> au départ et </svg> à la fin. Cet élément est un peu la base d’un fichier où on va renseigné des informations comme :
- La hauteur de la grille pour les formes qu’on va inclure après :
height=”100”. - La largeur de la grille pour les formes qu’on va inclure après :
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 on a mis aucun élément à 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 des informations du type :
- La couleur de remplissage :
fill="#0C3157”. Ici j’utilise une couleur hexadécimal#0C3157mais j’aurais très bien pu utiliser une couleur primaire simple commered. - La position X du point centré du cercle en fonction de la largeur définit sur l’élément
<svg>:cx="50”. - La position Y du point centré du cercle en fonction de la hauteur définit sur l’élément
<svg>:cy="50”.
J’ai choisi de placer mon cercle au centre en faisant le calcul, hauteur divisée par 2. 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 du type :
- La couleur de remplissage :
fill="#75B4F0”. Ici j’utilise une couleur hexadécimal#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éfinis pour l’élément<svg>. - La position Y du point en haut à gauche du rectangle :
y="40”relative à la hauteur que j’ai définis pour l’élément<svg>. - La hauteur de mon rectangle :
height="20"relative à la hauteur que j’ai définis pour l’élément<svg>. - La largeur de mon rectangle :
width="20"relative à la largeur que j’ai définis pour l’élément<svg>.
Je peux donc écrire mon rectangle sur mon cercle précédemment défini 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 fichier 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 fichier SVG. C’est ce que nous allons voir dans la partie suivante.
3. Éditer un fichier SVG avec un logiciel
Considérons que vous ayez besoin de construire une image SVG d’une ville avec beaucoup de détails. Le faire à la main serait tout simplement une perte de temps. Pour accomplir cette mission, vous aurez besoin d’un logiciel de création de SVG comme :
| 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 si ce sont des fichiers SVG peuvent être conçu de façon “dés-optimisé”. 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. C’est-à-dire sans grille et sans alignement précis.
Pour obtenir des fichiers SVG optimisé 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 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 doutes sur ce format d'image?
Les images SVG peuvent être utilisées pour un site internet, les impressions papier, autocollant ou encore les pochoirs (cricut, scanncut, ect), les jeux vidéo et bien d’autres domaines.
Une image SVG peut s'agrandir autant que l'on veut sans perte de qualité. La taille d’un fichier SVG est faible contrairement à un PNG ou JPG. On peut aussi les éditer manuellement.
Oui, mais uniquement 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, alors ces articles devraient vous intéresser également.
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.
