Corriger les erreurs d’affichage de vos SVG sous WordPress

Corriger les erreurs d’affichage de vos SVG sous WordPress

Certains fichiers vectoriels qui portent l’extension SVG pour Scalable Vector Graphics ne sont pas toujours correctement formatés. Ce phénomène génère un problème d’affichage lors de l’importation sous WordPress avec des visuels réduits à 1 pixel en largeur et en hauteur. Par chance, il existe un filtre pour prévenir ce comportement.

Avant d’aller plus loin, rappelons que les fichiers SVG ne sont pas des fichiers images traditionnels comme par exemple les JPEG. Il s’agit de fichier constitués de lignes de code et qui peuvent donc présenter un risque de sécurité lors de l’envoi sur votre site WordPress.

C’est pour cela que, par défaut, WordPress n’autorise pas l’envoi de fichiers SVG. Vous devrez donc suivre ces instructions pour débloquer cette possibilité.

Maintenant que vous êtes en mesure d’envoyer de tels fichiers, il est possible que le rendu navigateur pose problème. Voici quelques conseils pour limiter les bugs d’affichage :

  1. Les textes doivent être convertis en courbe de sorte que vous ne soyez pas dépendant de la police utilisée. C’est pour cela que certains fichiers vectoriels embarquant du texte affichent ce dernier dans une police native comme Serif ou Times ;
  2. Les attributs de largeur et de hauteur, width et height en anglais, doivent être spécifiés en pixels ou en pourcentage ;
  3. Vérifiez le poids du fichier généré : plus de 50 Ko pour une image vectorielle c’est trop lourd, cela signifie que le format n’est probablement pas adapté. Dans ce cas, un export au format PNG sera à privilégier pour des questions de performances ;

Si malgré ces conseils l’image ne s’affiche pas ou si celle-ci mesure 1 pixel par 1 pixel alors vous devrez utiliser ce bout de code pour empêcher WordPress de définir une taille automatique. Comme toujours, vous pouvez coller ces lignes dans le fichier functions.php de votre thème ou dans un mu-plugin.

function wpc_fix_svg_size_attributes($out, $id) {
$image_url = wp_get_attachment_url($id);
$file_ext = pathinfo($image_url, PATHINFO_EXTENSION);

if (is_admin() || 'svg' !== $file_ext) {
return false;
}

return array($image_url, null, null, false);
}
add_filter('image_downsize', 'wpc_fix_svg_size_attributes', 10, 2);

Les fichiers SVG sont insérés comme des images en passant l’URL dans l’attribut src lorsque vous les envoyez dans l’éditeur de WordPress. Ils ne sont pas affichés directement comme vous pourriez le faire en modifiant votre thème. Si vous analysez le code de ce site, vous noterez que j’utilise très souvent du code pour générer les logos et autres icônes. De cette manière, le rendu est impeccable y compris sur écrans à haute densité de pixels.

Grâce à cette astuce, vos fichiers SVG s’afficheront aux bonnes dimensions. Libre à vous ensuite d’ajuster le résultat via la feuille de style du thème.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Laisser un commentaire