Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment récupérer le code HTML SVG d'un fichier SVG ?

Thibaut Legrand
Thibaut Legrand
April 19, 2022
Personnage 3d avec une pancarte dans les mains, ou il est écrit "HTML"

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.

É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.

Icône SVG dans Figma

É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.

Interface online-IDE.com

É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).

Code HTML d'un fichier SVG

É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

Embed code HTML fichier SVG dans Webflow

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).

fill curentcolor code HTML fichier SVG

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.

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions