Les fichiers .SVG sont de plus en plus utilisés pour palier aux problèmes de responsive design, et pourtant ils ne sont toujours pas pris en compte nativement par WordPress car ils pourraient être néfaste pour votre site si vous donniez cette capacité a n’importe quel utilisateur.
En effet, le .SVG ( Scable Vector Graphics ) sont des fichiers images que vous pouvez agrandir à l’infini sans perte de qualité et ceux-ci ne sont pas acceptés par défaut par le gestionnaire de média WordPress.
WordPress permet aux utilisateurs de téléverser différents types de fichiers image. Vous reconnaîtrez probablement les formats habituels tels que PNG et JPG. Cependant, l’affichage d’autres types de fichiers tels que les graphiques vectoriels peut poser davantage de problèmes.
Pourquoi ne peut-on pas charger de SVG sur WordPress par défaut ?
En réalité, les fichiers SVG, bien qu’ils apparaissent comme des images visuelles, sont en fait des fichiers au format XML, qui est une version améliorée du langage HTML. Cela signifie qu’ils peuvent contenir du code CSS pour le style et/ou du JavaScript pour rendre l’image interactive.
Permettre l’envoi d’images .SVG dans l’éditeur WordPress
Heureusement, il existe plusieurs façons d’intégrer des fichiers vectoriels sur votre site web. Bien que cela ne soit pas une fonctionnalité native, les fichiers SVG peuvent être utilisés pour afficher des images bidimensionnelles sur les sites WordPress.
Comment permettre le téléchargement de fichiers SVG sur WordPress ?
Pour être capable d’uploader des fichiers SVG sur votre site WordPress, il suffit simplement d’ajouter quelques lignes de code à votre site ou d’utiliser un plugin spécifique.
Chez WordPress pour les nuls, vous nous connaissez depuis le temps, on aime pas utiliser un plugin quand 3 lignes de code suffisent. Nous vous proposons donc simplement de coller un petit bout de code à votre site. Pour ceux qui ne seraient pas à l’aise avec cette méthode, vous pouvez également vous tourner vers un plugin tel que SVG Support qui fera l’affaire.
Si vous avez déjà un peu fouillé les sites de tutos WordPress, il est probable que vous ayez trouver le premier code que nous allons vous mettre ci-dessous, cependant celui-ci n’est pas du tout recommandé.
La mauvaise méthode pour permettre l’envoi de SVG avec WordPress
/* Autoriser les fichiers SVG */
function wpln_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'wpln_mime_types');Cette solution (proposée anciennement sur WPNULS (personne n’est parfait) se contente de permettre l’utilisation de l’extension MIME image/svg+xml sans filtrer ou contrôler ce qu’on en fait. Bref, ce n’est pas correct !
La bonne méthode pour permettre l’envoi de fichiers SVG sur WordPress
Pour pouvoir ajouter des images SVG dans WordPress, il vous suffit d’ajouter le code suivant dans votre fichier functions.php de votre thème enfant.
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function wppln_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'wppln_mime_types' );
function wppln_fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'wppln_fix_svg' );Sauvegardez votre fichier et remettez le sur le serveur. Vous pouvez maintenant uploader des images au format .SVG dans le gestionnaire de média de WordPress et les ajouter dans vos articles et vos pages.
Permettre l’envoi de fichiers SVG avec Elementor
Pour les utilisateurs d’Elementor, vous n’avez pas besoin d’un plugin ou de code supplémentaire pour insérer un fichier SVG dans vos pages. En effet, les développeurs d’Elementor ont prévu le coup et ont ajouter une option vous permettant d’autoriser ou non le chargement de fichiers non filtrés.
Pour cela, il suffit de se rendre dans votre tableau de bord dans : Elementor > Réglages, et ensuite de sélctionner le sous dossier : « Avancé » et d’activer l’option : « Permettre les téléversements de fichiers non filtrés » comme indiqué sur l’image ci-dessous :
Vous pourrez désormais téléverser non seulement des fichiers SVG, mais également des fichiers JSON, par exemple, pour importer des animations Lottie Files et bien d’autres fonctionnalités. Elementor se chargera automatiquement de nettoyer le fichier et supprimera tout code potentiellement malveillant.
Limiter l’envoi de fichiers SVG à certains utilisateurs
Comme nous l’avons évoqués plus tôt dans cet article, les fichiers SVG peuvent être dangereux si ils sont chargés par n’importe qui puisqu’ils peuvent potentiellement inclure du code malicieux. Une solution complémentaire si vous avez des invités qui publient sur votre site, est de restreindre par exemple l’envoi de fichiers SVG uniquement aux administrateurs et aux éditeurs de votre site.
Il existe pour cela des plugins tels que User Role Editor que vous pourrez paramétrer facilement pour restreindre l’upload de fichiers SVG uniquement à certains groupes d’utilisateurs.
Si vous avez besoin de permettre l’autorisation d’autres types de fichiers sur votre site WordPress, suivez le guide : https://www.wpnuls.fr/desole-vous-navez-pas-lautorisation-de-televerser-ce-type-de-fichier-2202.html
