Le format SVG est parfait pour conserver tous les détails d’une image tout en restant extrêmement léger.
Bien plus que les formats classiques comme JPG, PNG ou WEBP, à condition de l’utiliser pour des images vectorielles comme des logos ou des pictogrammes !
Temps de chargement ultra rapide, qualité d’image imbattable… le format SVG a tout pour plaire. Sauf qu’il n’est pas pris en charge nativement par WordPress.
Bonne nouvelle : en quelques lignes de code, le problème est réglé !
Pourquoi choisir le format SVG pour vos images ?
Le format SVG, c’est top : c‘est léger et d’une qualité parfaite (peu importe le niveau de zoom, l’image reste toujours nette).
Mais attention, toutes vos images ne doivent pas être en SVG !
Une photo de profil ou de paysage en SVG serait des centaines de fois plus lourde qu’une image en PNG ou JPG.
C’est pourquoi le format SVG est à réserver à quelques cas d’usages :
L’affichage d’un logo
Des dessins vectoriels
Des animations
(passez la souris sur les sacoches !)
De la décoration
Mais au-delà de l’affichage, il offre de nombreuses possibilités de personnalisation.
Avec du CSS, vous pouvez facilement modifier ses couleurs, et avec JavaScript, animer vos éléments sans alourdir votre site (voir le vélo ci-dessus).
Bref, le SVG, c’est génial !
WordPress est-il compatible avec les SVG ?
Si vous essayez d’importer un fichier SVG sur WordPress, voici ce qui se passe :
Aïe, impossible… Mais pourquoi WordPress bloque-t-il l’upload des fichiers SVG ?
Pourquoi il n’est pas possible d’uploader des fichiers SVG sur WordPress ?
Si le format SVG est si léger, c’est parce qu’il est construit sous forme de texte (du XML). Avec quelques connaissances, on peut même en créer à la main.
Problème : cette structure textuelle permet aussi d’y intégrer du code malveillant, ce qui ouvre la porte à des attaques cross-site scripting et XML external entity.
En d’autres termes, il faut faire attention aux fichiers SVG que vous téléversez sur votre site WordPress.
Si vous n’êtes pas sûr à 100 % de l’origine et de la fiabilité d’un SVG, scannez-le avec un outil comme SVG Sanitizer avant de l’importer.
Maintenant que vos fichiers sont sécurisés, voyons comment les ajouter sur WordPress.
Comment téléverser un fichier SVG sur WordPress ?
Il existe plusieurs manières de le faire, la plus simple : utiliser un plugin.
Mais personnellement, je préfère limiter l’usage des plugins aux fonctionnalités vraiment essentielles. Si deux lignes de code suffisent à régler un problème, pourquoi surcharger votre site avec un plugin ?
Les plugins sont souvent la principale source de vulnérabilités sur un site WordPress, alors mieux vaut en limiter le nombre.
Cela dit, si vous ne voulez pas toucher au code source, voici une solution simple avec un plugin.
1. SVG Support : le plugin pour transférer des SVG sur WordPress
L’avantage de ce plugin ? Il nettoie automatiquement chaque fichier SVG avant son import sur WordPress, plus besoin de le scanner manuellement.
Installation :
- Allez dans l’onglet Extensions > Ajouter dans WordPress.
- Recherchez SVG Support et installez-le.
- Une fois l’installation terminée, rendez-vous dans Réglages > SVG Support.
- Activez l’option qui limite l’import des SVG aux administrateurs (recommandé pour plus de sécurité).
- Cliquez sur Enregistrer et téléversez vos fichiers SVG dans la médiathèque !
2. La solution optimisée : ajouter du code dans functions.php
Si vous voulez éviter d’ajouter un plugin pour une simple ligne de code, voici une alternative rapide.
📌 Avant toute modification, pensez à sauvegarder votre fichier functions.php pour éviter tout risque d’erreur.
Rendez-vous dans le fichier functions.php de votre thème :
📂 wp-content/themes/votre-theme/functions.php
Ajoutez ce code à la fin du fichier :
function allow_custom_file_types($allowed_types) {
$allowed_types['svg'] = 'image/svg+xml';
return $allowed_types;
}
add_filter('upload_mimes', 'allow_custom_file_types');
💾 Enregistrez les modifications et voilà, vous pouvez téléverser des fichiers SVG !
Besoin d’aide ?
Si vous préférez confier cette tâche à un professionnel ou si vous souhaitez aller plus loin (ajouter des animations SVG, créer des fichiers SVG personnalisés…), n’hésitez pas à me contacter !
Conclusion
Les fichiers SVG sont un excellent moyen d’optimiser la vitesse de votre site sans perte de qualité d’image.
WordPress ne les prend pas en charge nativement, mais avec un plugin ou l’ajout d’une fonction dans le code et le problème est résolu.
⚠️ Pensez simplement à sécuriser vos fichiers avant de les téléverser pour éviter toute faille de sécurité.
Laisser un commentaire