Comment utiliser des icônes SVG sur-mesure sur ton site Internet Showit

6 juillet 2023 

Showit te permet d’utiliser des icônes SVG sur-mesure pour le design de ton site Internet. L’avantage c’est que ton icône ne pourra pas être pixellisée (peu importe sa taille) et tu pourras changer sa couleur directement depuis Showit !

Dans cet article je vais t’expliquer ce qu’est une icône SVG, où les trouver et comment les utiliser dans Showit. Sache qu’avec les templates de site Internet du studio (lite et premium), tu as accès à mes icônes SVG conçues pour toi et libres d’utilisation !

SOMMAIRE
1. Une icône SVG, c’est quoi ?
2. Pourquoi utiliser des icônes SVG sur ton site Internet Showit ?
3. Où trouver des icônes SVG ?
4. Comment utiliser ces icônes SVG sur Showit ?
5. Envie de créer ton site ? Découvre les templates Showit du studio !

Bonne nouvelle, c’est aussi disponible en vidéo ci-dessous !

Une icône SVG, c’est quoi ?

D’après le dictionnaire Larousse une icône c’est :

icône, nom féminin : Symbole graphique affiché sur l’écran d’un ordinateur et correspondant, au sein d’un logiciel, à l’exécution d’une tâche particulière.

Ça c’est le côté historique, aujourd’hui les icônes nous aident également à représenter des statistiques, matérialiser des coordonnées, et pimper le design de nos sites web.

Une icône c’est donc un symbole que l’on peut obtenir sous différentes formes de fichiers : jpg, png, svg et bien d’autres !

L’avantage du format svg (Scalable Vector Graphics) c’est qu’il est composé de vecteurs optimisés pour le web. On peut donc le réduire ou l’augmenter à l’infini sans avoir à se soucier d’avoir un rendu pixellisé de mauvaise qualité.

C’est le format à privilégier pour les logos et il est également idéal pour les icônes !

Pourquoi utiliser des icônes SVG sur ton site Internet Showit ?

J’adore utiliser des icônes SVG sur Showit ! Cela me permet d’avoir un visuel qui ne sera pas pixellisé et l’énorme avantage c’est la possibilité de changer la couleur directement dans Showit. Cela t’évite de devoir importer plusieurs fichiers avec des couleurs différentes à chaque fois pour tester le rendu. Si tu changes ta palette de couleur, les icônes changeront également automatiquement. C’est un réel gain de temps, en plus d’avoir un rendu qualitatif.

Capture d'écran pour montrer la différence de qualité entre un PNG et SVG

Où trouver des icônes SVG ?

Il existe de nombreux sites qui te permettent de trouver des icônes gratuites ou payantes.

Comme pour les photos, assure-toi d’avoir le droit d’utiliser tes icônes pour l’utilisation que tu souhaites en faire. Tu trouveras facilement les conditions d’utilisation et licences sur les sites.

Si tu disposes de logiciels vectoriels comme Adobe Illustrator, tu peux créer les icônes de zéro et les exporter au format SVG.

Comment utiliser ces icônes SVG sur Showit ?

Tu peux importer des fichiers SVG dans ta médiathèque Showit, c’est ce que je te conseille pour ton logo… Mais pour tes icônes afin de pouvoir changer leur couleur directement depuis Showit, on va passer par des icônes !

Pour cela rajoute une icône sur ton Canvas (c’est comme ça qu’on appelle les sections dans Showit). Tu as des icônes déjà disponibles dans Showit parmi lesquelles tu peux choisir. Mais tu peux également cocher la case “custom icon” pour utiliser une icône sur-mesure !

Capture d'écran au sein de Showit pour montrer les réglages d'icônes SVG sur-mesure
Capture d'écran au sein de Showit pour montrer les réglages d'icônes SVG sur-mesure

Tu as ton fichier SVG précédemment téléchargé ou créé. Tu peux maintenant te rendre sur le site SVGOMG et glisser déposer ton document.

Capture d'écran du site SVGOMG pour convertir des icônes SVG en code

Active tous les paramètres sauf « Prettify code » et « Remove viewBox », puis clique sur l’onglet « Markup » en haut. Cela te donnera le code de l’icône que tu peux copier.

Capture d'écran du site SVGOMG pour convertir des icônes SVG en code

Retourne dans Showit et colle le code dans l’encart “custom SVG icon”.

Capture d'écran au sein de Showit pour montrer les réglages d'icônes SVG sur-mesure

Maintenant tu n’as plus qu’à choisir la couleur de ton choix, et déplacer, redimensionner à volonté !

Avec les templates de site Internet du studio (lite et premium), tu as accès à ma bibliothèque personnelle de fichiers SVG que tu peux utiliser à volonté. J’ajoute régulièrement des fichiers à mesure que je les crée. Tu peux dès à présent retrouver des cercles et croix (pour les quizz c’est pratique), des étoiles, des flèches, des lignes, des tâches…

Ordinateur sur un bureau avec sur l'écran l'interface Showit pour créer un site Internet

Partager cet article :

Web Designer spécialisée en solutions no-code & no-stress !

à propos

Moi c'est Samantha !

Construire son propre site Internet n'est pas une mince affaire ! Étant moi-même auto-didacte j'ai eu mon lot d'arrachages de cheveux et de prises de tête ces 15 dernières années.

C'est pourquoi j'ai à coeur de t'offrir des solutions pour enfin obtenir le site de tes rêves sans avoir besoin de compétences techniques. Je t'aide à obtenir un site qui soit abordable et efficace pour t'aider à faire prospérer ton business, attirer tes clients idéaux et te permettre d'atteindre tes rêves.