Le code HTML d’un fichier SVG peut être bien pratique dans de nombreuses situations. Par exemple, sur Webflow, il peut être intéressant d’insérer le code HTML d’un fichier SVG dans un embed plutôt qu’une image en SVG pour jouer sur la couleur de l’icône.

Dans notre tuto du jour, nous allons vous montrer comment récupérer le code HTML de n’importe quel fichier SVG en quelques étapes.

Option 1 : Avec Figma et un éditeur de code

Étape 1 : Téléchargez votre fichier SVG dans vos fichiers

La première étape va tout simplement consister à télécharger votre icône, image en SVG. Par exemple dans Figma, vous pouvez exporter votre fichier en vector SVG. Vous pouvez également télécharger votre fichier SVG directement depuis une librairie d’icône SVG.

Étape 2 : Allez sur le site Online IDE

Une fois que vous avez téléchargé votre icône en SVG sur votre appareil, vous pouvez vous rendre sur le site Online IDE. Online IDE est un éditeur de code en ligne, c’est un environnement de développement intégré. En d’autres termes, c’est un logiciel permettant de coder ou d’éditer du code. Online IDE est un outil parmi tant d’autres, vous pouvez donc utiliser l’IDE que vous préférez. L’avantage d’Online IDE est que vous pouvez y accéder gratuitement et directement en ligne (sans télécharger de logiciel).

Étape 3 : Ouvrez votre fichier SVG sur le site

Quand vous êtes sur Online IDE, vous avez une fonctionnalité vous permettant d’ouvrir un fichier dans le logiciel depuis votre gestionnaire de fichiers. Pour ce faire, il vous suffit de cliquer sur la première icône (représentant un dossier/fichier) en haut à gauche (”open file from disk”).

Vous allez maintenant chercher votre fichier SVG et vous allez double-cliquer dessus.

Étape 4 : Copiez le code HTML du fichier SVG

Lorsque vous avez inséré votre fichier SVG dans le logiciel, une nouvelle page s’est créée (au nom de votre fichier). Vous remarquez qu’il y a maintenant le code HTML de votre fichier SVG dans l’éditeur de code. Vous pouvez récupérer ce code en sélectionnant tout l’éditeur (Ctrl + A ou Cmd + A) et en le copiant (Ctrl + V ou Cmd + V).

Étape 5 : Collez le code HTML du fichier SVG

Vous avez maintenant récupéré le code HTML de votre fichier SVG et vous pouvez en faire ce que vous voulez. Pour aller plus loin, nous allons vous montrer comment l’implémenter dans Webflow.

Pour ce faire, ouvrez votre projet Webflow, insérez l’élément “embed” à l’endroit que vous souhaitez et collez dans l’éditeur de code Webflow le code SVG préalablement copié. Vous pouvez cliquer sur “Save & close”. Vous voyez alors votre icône dans votre projet. Pour plus d’info 👉 Insérer une icône SVG avec du code

Le problème est que notre icône n’est pas forcément à la bonne taille ou n’a pas forcément la bonne couleur. Pour modifier cela, on va agir sur le code.

Étape 6 : Modifiez le code selon votre convenance

Lorsque vous implémentez une icône via son code HTML SVG, vous pouvez modifier le code pour qu’elle réponde à vos besoins.

Pour que la couleur soit identique à celle de votre texte, vous allez supprimer tous les “fill” correspondant à une couleur sauf le premier. Pour le premier “fill”, il faut mettre “fill=currentcolor”.

Vous pouvez également jouer sur la taille de votre icône grâce aux champs width (largeur) et height (hauteur).

Bref, il faut savoir que vous pouvez personnaliser le code pour que votre icône s’intègre parfaitement dans votre design grâce à plus de flexibilité qu’une image.

Option 2 : En 2 clics depuis Figma

Étape 1 : Insérez votre fichier SVG dans Figma

Tout comme la première étape de l'option n°1, il faudra insérer un fichier SVG dans votre projet Figma.

Étape 2 : Copier en SVG dans Figma

Figma, nous offre la possibilité de copier des éléments de plusieurs façon. Dans notre cas, ce qui nous intéresse est de copier comme SVG. Pour ce faire, il est nécessaire de faire un clic droit sur votre élément SVG, puis dans le sous-menu de "Copy/Paste as" cliquer sur "Copy as SVG".

Étape 3 : Coller là où vous le souhaitez

Ensuite, il ne vous reste qu'à coller ce que vous venez de copier dans un éditeur de code (par exemple directement dans un élément embed Webflow). A partir de ce moment, vous pouvez répliquer les étapes 5 et 6 de l'option n°1 pour l'utiliser dans Webflow.

Tuto 👉 Apprendre à Designer un embed code dans pour les rich text !

Pour plus de tips et tutoriels, retrouvez notre blog no-code & low-code.