Tu viens de télécharger un super logo ou une icône au format SVG, mais impossible de l’importer dans Elementor ?
Ou pire : tu ne peux pas changer les couleurs une fois importé ?
Pas de panique, c’est normal. WordPress bloque les fichiers SVG par défaut pour des raisons de sécurité.
La bonne nouvelle ? Tu peux résoudre ça en 2 minutes chrono.
Dans ce tutoriel, tu vas apprendre à :
✅ Activer l‘import de fichiers SVG dans Elementor
✅ Comprendre pourquoi WordPress les bloque (et comment rester en sécurité)
✅ Optimiser tes SVG pour un site plus rapide
Tu peux aussi regarder la vidéo tuto juste ici 👇
SOMMAIRE
C'est quoi un fichier SVG (et pourquoi c'est génial) ?
Quand tu télécharges des images, tu croises souvent plusieurs formats :
Les formats classiques :
.jpg / .jpeg : parfait pour les photos, léger mais sans transparence
.png : avec fond transparent, idéal pour les logos et détourages
.svg : fichier vectoriel, la solution pour les icônes et logos
Pourquoi le SVG est super ?
Le SVG (Scalable Vector Graphics) a 3 super-pouvoirs :
1. Qualité infinie : tu peux l’agrandir à l’infini, il restera net et propre (jamais pixelisé)
2. Ultra-léger : il pèse beaucoup moins lourd qu’un PNG
3. Modifiable: tu peux changer les couleurs directement dans Elementor
Résultat : ton site charge plus vite = meilleur SEO + meilleure expérience utilisateur.
Pourquoi WordPress bloque les fichiers SVG par défaut ?
Attention, c’est important à comprendre. Par défaut, Elementor (et même WordPress) bloque les fichiers SVG.
Pourquoi ? Parce qu’un SVG, ce n’est pas qu’une simple image. C’est aussi du code XML, et ce code peut contenir du JavaScript malveillant.
Autrement dit : si tu télécharges un SVG depuis un site douteux, tu pourrais importer du code dangereux sur ton site. Rien de dramatique si tu fais attention, mais WordPress préfère jouer la carte de la prudence par défaut.
La règle d’or : télécharge toujours tes SVG depuis des sources fiables (on en parle plus bas).
Comment activer l'import SVG dans Elementor (méthode simple) ?
Méthode 1 — Depuis les réglages d’Elementor
Ouvre ton tableau de bord WordPress.
Va dans Elementor → Réglages → Avancé.
Active l’option “Autoriser le téléchargement de fichiers non filtrés”.
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)
Tu préfères ne pas toucher aux réglages d’Elementor ? Il existe un plugin dédié : SVG Support.
Installe et active le plugin.
Va dans Réglages → SVG Support.
Coche “Activer le support SVG”.
(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
Pour tirer le meilleur parti de tes fichiers SVG :
- Télécharge toujours tes SVG depuis des sources fiables (Flaticon, Freepik, The noun project…).
- 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.
Un fichier SVG dans Elementor, c’est une question de 3 clics.
1. Va dans Elementor → Réglages → Avancé
2. Active « Autoriser le téléchargement de fichiers non filtrés »
3. Importe tes SVG depuis des sources fiables
4. Désactive l’option après import (optionnel mais recomman
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.
