Importer un fichier SVG dans WordPress avec Elementor

Comment impoter des fichiers svg avec Elementor ?

Tu viens de télécharger un super logo ou une icône au format SVG, mais impossible de l’importer dans Elementor ? Ou tu ne peux pas changer les couleurs dans Elementor ? 

Pas de panique, c’est normal. Et surtout : c’est facile à corriger.

Tu peux aussi regarder la vidéo tuto juste ici 👇

SOMMAIRE

C’est quoi un fichier SVG (et quand l’utiliser) ?

Quand tu télécharges des images, tu croises souvent plusieurs formats :

  • .jpg / .jpeg : parfait pour les photos, légères mais non transparentes ;

  • .png :  avec fond transparent, idéal pour les visuels avec logos ou détourages ;

  • .svg :  fichier vectoriel, parfait pour les icônes, logos et éléments graphiques.

L’avantage du SVG, c’est qu’il ne se pixelise jamais :
tu peux l’agrandir ou le réduire à l’infini, il restera net et propre.

Et bonus : il pèse très peu, ce qui rend ton site plus rapide à charger.
Un bon point pour ton SEO et ton expérience utilisateur

Pourquoi Elementor bloque les fichiers SVG ?

Par défaut, Elementor (et même WordPress) bloque les fichiers SVG.


Pourquoi ? Parce qu’un SVG, ce n’est pas juste une image…C’est aussi du code XML, et ce code peut contenir du JavaScript malveillant.

Autrement dit : si tu télécharges un SVG d’un site douteux, tu pourrais importer du code dangereux sur ton site. 

Rien de dramatique si tu fais attention, mais mieux vaut être prudent.

Comment autoriser l’import des SVG dans Elementor ?

Heureusement, la solution est toute simple 👇

Méthode 1 — Depuis les réglages d’Elementor

  1. Ouvre ton tableau de bord WordPress.

  2. Va dans Elementor → Réglages → Avancé.

  3. Active l’option “Autoriser le téléchargement de fichiers non filtrés”.

  4. Clique sur Enregistrer les modifications.

 

Et voilà ! Tu peux maintenant importer tes fichiers SVG directement dans la bibliothèque de médias d’Elementor.

Important : pense à désactiver cette option une fois que tu as fini tes imports.
C’est une précaution utile pour éviter tout risque futur.

 

Méthode 2 — Avec un plugin (si tu n’as pas Elementor)

Si tu veux autoriser les SVG sur tout ton site WordPress (et pas seulement dans Elementor), tu peux utiliser le plugin gratuit SVG Support.

  1. Installe et active le plugin.

  2. Va dans Réglages → SVG Support.

  3. Coche “Activer le support SVG”.

  4. (Optionnel) Active le mode avancé pour gérer les restrictions de sécurité.

C’est pratique si tu bosses sur un thème sans Elementor, mais pour les utilisateurs d’Elementor, la méthode intégrée est largement suffisante.

Les bonnes pratiques avec les fichiers SVG

  • Télécharge toujours tes SVG depuis des sources fiables (Figma, Flaticon, Iconfinder, etc.).
  • Garde un dossier dédié pour tes icônes et logos.
  • Si tu modifies un SVG, passe-le au validateur SVGOMG pour nettoyer le code et le rendre plus léger.
  • Et surtout : pense à optimiser le poids de tes autres images (JPG, PNG) pour garder ton site fluide.

 

Importer un fichier SVG dans Elementor, c’est une question de 3 clics.
Mais c’est aussi une question de sécurité et d’optimisation : bien maîtrisé, ce format rend ton site plus pro, plus rapide et plus net.

S'inscrire à la newsletter

2 fois par mois, je te partage mes conseils pour créer une communication visuelle impactante, des contenus exclusifs et les coulisses de ma vie d’indépendante.

Une newsletter 100% fun, 0% bullshit

À télécharger

Besoin d’un site pour trouver des typographies, des couleurs, photographies ? ou encore d’outils précis.

Retrouve tout dans ma liste de ressources sur Notion.