Changer la couleur des icônes SVG dans Elementor

Interface Illustrator avec sélecteur de couleur ouvert
Édition d’un cube bleu dans Adobe Illustrator. Le sélecteur de couleur est ouvert pour ajuster la teinte.

Table des matières

Vidéo pas à pas

Qu’est-ce qu’un fichier SVG ?

Scalable Vector Graphics (SVG) est un format de fichier vectoriel adapté au web. Contrairement aux fichiers raster basés sur des pixels comme les JPEG, les fichiers vectoriels stockent les images via des formules mathématiques basées sur des points et des lignes sur une grille. Cela signifie que les fichiers vectoriels comme les SVG peuvent être redimensionnés de manière significative sans perdre de leur qualité, ce qui les rend idéaux pour les logos et les graphiques complexes en ligne.

Abeille - SVG

SVG – Taille 3 Ko

Abeille - PNG - 1024px

PNG (1024px) – Taille 85 Ko

Abeille

PNG (150px) – Taille 13 Ko

La taille d’un fichier SVG dépend de la quantité de données d’image qu’il contient, mais elle est généralement inférieure à celle de la plupart des autres types de fichiers. Les graphiques complexes avec de nombreux chemins et points d’ancrage occuperont plus d’espace de stockage que les designs plus simples et épurés.

Ce ne sont pas seulement leurs capacités de redimensionnement qui rendent les SVG très populaires auprès des concepteurs web. Les SVG sont écrits en code XML, ce qui signifie qu’ils stockent toute information textuelle sous forme de texte littéral plutôt que de formes. Cela permet aux moteurs de recherche comme Google de lire les graphiques SVG pour leurs mots-clés, ce qui peut potentiellement aider un site web à monter dans les classements de recherche.

Vous pouvez facilement détecter un fichier SVG par son extension .svg.

Histoire du fichier SVG

L’histoire du fichier SVG remonte à la fin des années 1990, lorsque le World Wide Web Consortium (W3C) a invité les développeurs à soumettre des propositions pour un nouveau type de format graphique vectoriel. Six propositions concurrentes ont été présentées et ont contribué à l’élaboration de ce qui est finalement devenu le format SVG du W3C.

Les SVG ont mis du temps à gagner en popularité. Ils ont bénéficié de relativement peu de support jusqu’en 2017, lorsque les gens ont commencé à voir les avantages d’utiliser les SVG dans les navigateurs web modernes. Les fichiers SVG sont désormais largement utilisés pour les images de sites web en 2D, car la plupart des navigateurs et des applications de dessin pour fichiers vectoriels peuvent les gérer facilement.

À quoi servent les fichiers SVG ?

Les graphiques vectoriels évolutifs ont parcouru un long chemin ces dernières années, mais à quoi servent les SVG en pratique ?

Icônes et logos de site web.

Les concepteurs utilisent souvent les SVG pour afficher les icônes de sites web comme les boutons, ainsi que les logos d’entreprise. La capacité de ce type de fichier à s’agrandir ou à se réduire sans compromettre sa qualité signifie qu’ils sont idéaux pour les graphiques qui doivent apparaître à plusieurs endroits et dans une variété de tailles.

Infographies et illustrations.

Grâce à l’utilisation de XML dans les fichiers SVG, les moteurs de recherche comme Google peuvent lire des tableaux et des graphiques riches en texte, ce qui peut aider à l’optimisation pour les moteurs de recherche. Parce que Google peut détecter des mots-clés dans les SVG, cela peut potentiellement propulser une page web à un classement plus élevé dans les résultats de recherche. De plus, pour rendre les pages web beaucoup plus intéressantes, les SVG prennent également en charge l’animation.

Avantages et inconvénients des fichiers SVG

Il est utile de se renseigner sur les avantages et les inconvénients du SVG avant d’enregistrer vos images dans ce format de fichier.

Avantages des fichiers SVG

  • Contrairement aux fichiers raster, qui sont composés de pixels, les graphiques vectoriels comme les SVG conservent toujours leur résolution, quelle que soit leur taille. Vous n’avez pas à vous soucier que les images SVG perdent leur qualité dans certains navigateurs ou lorsque vous les redimensionnez pour qu’elles apparaissent à différents endroits.
  • Les fichiers SVG de base sont généralement plus petits que les images raster, qui sont créées à partir de nombreux pixels colorés au lieu d’utiliser des algorithmes mathématiques.
  • Parce que les fichiers SVG traitent le texte comme du texte (et non comme un design), les lecteurs d’écran peuvent scanner tout mot contenu dans les images SVG. C’est très utile pour les personnes qui ont besoin d’aide pour lire les pages web. Les moteurs de recherche peuvent également lire et indexer le texte des images SVG.

Inconvénients des fichiers SVG

  • Les fichiers SVG sont excellents pour les graphiques web comme les logos, les illustrations et les graphiques. Mais leur manque de pixels rend difficile l’affichage de photographies numériques de haute qualité. Les fichiers JPEG sont généralement meilleurs pour les photographies détaillées.
  • Seuls les navigateurs modernes peuvent prendre en charge les images SVG. Il peut être difficile d’utiliser des fichiers SVG avec Internet Explorer 8 et d’autres navigateurs plus anciens.
  • Le code contenu dans les images SVG peut être difficile à comprendre si vous débutez avec ce format de fichier.

Comment ajouter une image SVG avec Elementor

Il existe de nombreux widgets Elementor qui nous permettent de télécharger des images ou des icônes au format SVG. Nous pouvons télécharger ce type de fichiers depuis la médiathèque sans aucune restriction, mais si nous voulons le faire depuis le constructeur Elementor, nous devons d’abord activer la capacité d’Elementor à télécharger ce type de fichiers.

Autoriser le téléchargement de fichiers non filtrés

Cette fenêtre contextuelle s’affichera lorsque vous cliquerez sur le bouton Télécharger SVG inclus dans certains widgets utilisant des icônes.

Autoriser le téléchargement de fichiers non filtrés
Autoriser le téléchargement de fichiers non filtrés

La première fois que vous tenterez de télécharger une icône SVG, un message d’avertissement vous sera présenté pour vous alerter que le téléchargement de tout fichier, y compris les fichiers SVG, peut présenter un risque de sécurité potentiel. Si vous comprenez les risques encourus et acceptez de continuer, cliquez sur le bouton Activer.

Ce fichier n’est pas autorisé pour des raisons de sécurité

Vous verrez ce message en essayant de télécharger un fichier SVG depuis le widget Image ou un autre widget qui n’est pas expressément destiné au téléchargement d’icônes SVG.

Ce fichier n’est pas autorisé pour des raisons de sécurité
Ce fichier n’est pas autorisé pour des raisons de sécurité

Vous pouvez résoudre ce problème depuis la page Elementor > Réglages.

  1. Cliquez sur l’onglet Avancé.
  2. Dans Autoriser le téléchargement de fichiers non filtrés, sélectionnez Activer dans le menu déroulant.
  3. Cliquez sur le bouton Enregistrer les modifications.

Changer la couleur d’une icône SVG

Dans ce tutoriel, je vais utiliser le logiciel Adobe Illustrator pour créer ou modifier des fichiers SVG. Pour que nous puissions changer la couleur d’une icône SVG depuis le constructeur Elementor, les conditions suivantes doivent être remplies :

  • Nous devons remplir avec la couleur #000000 (c’est la couleur noire au format hexadécimal) la totalité ou la partie de l’icône que nous voulons changer depuis le constructeur Elementor.
Sélecteur de couleur d’Adobe Illustrator
  • Dans Adobe Illustrator, nous pouvons attribuer une couleur de contour (bordure) et une couleur de remplissage. Elementor ne changera que la couleur de remplissage, il est donc préférable de ne pas attribuer de couleur de contour à l’icône et de ne laisser que la couleur de remplissage.
Changer la couleur avec Adobe Illustrator
  • Lorsque nous enregistrons le fichier au format SVG, Adobe Illustrator nous affichera une boîte de dialogue d’options SVG. Dans cette boîte, nous devons nous assurer que dans la section Options avancées, le sélecteur Propriétés CSS : est réglé sur l’option Attributs de présentation.
Enregistrer le fichier SVG

Où utiliser notre icône dans le constructeur Elementor

Une fois que nous avons créé notre icône en suivant les directives précédentes, nous pouvons l’utiliser dans le constructeur Elementor dans tous ces widgets :

  • BASIQUE
    • Bouton.
    • Séparateur.
    • Icône.
  • PRO
    • Formulaire.
    • Menu de navigation.
    • Point chaud.
    • Boîte à bascule.
    • Appel à l’action.
    • Avis.
    • Table des matières.
    • Liste de lecture vidéo.
    • Bouton PayPal.
    • Bouton Stripe.
  • GÉNÉRAL
    • Boîte d’icônes.
    • Liste d’icônes.
    • Accordéon.
    • Commutateur.
    • Icônes sociales.
  • INDIVIDUEL
    • Infos de publication.

Nous pouvons également l’utiliser comme logo du site et dans d’autres widgets comme Image, mais sans la capacité de changer la couleur depuis Elementor.

Insérer une icône SVG dans Elementor

Liens d’intérêt