La principale raison pour laquelle les fichiers SVG sont particulièrement populaires parmi les développeurs et les concepteurs est qu’il s’agit d’un format d’image évolutif, généralement plus petit en taille de fichier (parfois de beaucoup), et qui ne pixelise pas sur les écrans rétina. WordPress par défaut ne vous permet cependant pas de télécharger le format de fichier SVG, principalement pour des raisons de sécurité.
Aujourd’hui, nous allons nous plonger dans ce que sont les SVG, comment ils peuvent être bénéfiques et comment vous pouvez activer le support SVG de WordPress en toute sécurité. Nous discuterons également du support des navigateurs, ainsi que de certains avertissements si vous décidez de passer au format d’image vectoriel.
Espérons qu’un jour nous aurons le SVG comme partie intégrante de WordPress, mais nous n’en sommes pas encore là.
Qu’est-ce qu’un fichier SVG?
SVG (Scalable Vector Graphics) est une image vectorielle basée sur XML qui est couramment utilisée par les sites web et les marques pour afficher des logos et des icônes sur leurs sites web. Wikipedia définit SVG comme :
Un SVG (scalable vector graphics) est un format d’image vectorielle basé sur XML pour les graphiques bidimensionnels avec un support pour l’interactivité et l’animation. La spécification SVG est une norme ouverte développée par le World Wide Web Consortium (W3C) depuis 1999.
Vous pouvez même manipuler les fichiers SVG avec du code ou votre éditeur de texte. Les SVG sont actuellement utilisés par 33 % de tous les sites web et, comme vous pouvez le voir ci-dessous, le taux d’adoption augmente rapidement. Des sites populaires tels que Google, Reddit, Dropbox, ESPN, et même notre propre site web ici chez Kinsta utilisent les SVG.
Support des navigateurs de fichiers SVG
Les fichiers SVG sont actuellement supportés par tous les principaux navigateurs, y compris les navigateurs mobiles. Le seul problème que vous pourriez rencontrer est si vous avez toujours besoin de support pour IE8, ce que nous espérons que vous n’avez pas. IE8 n’a qu’une part de marché d’environ 0,36% et n’est plus supporté. Voici un excellent article de Lubos sur les raisons pour lesquelles les développeurs devraient arrêter de supporter IE8, IE9, et IE10. D’un point de vue commercial, ce n’est peut-être pas toujours possible, mais il soulève quelques points positifs. Si pour une raison désespérée vous avez toujours besoin du support d’IE8, vous pouvez définir une image de secours (PNG ou JPG) pour vos images SVG, mais nous n’allons pas en parler aujourd’hui. Vous trouverez ci-dessous une liste des navigateurs qui prennent en charge le SVG :
- Internet Explorer 9, 10, 11+ and Edge
- Firefox 2+
- Chrome 4+
- Safari 3.1+
- Opera 10+
- iOS Safari 3.2+
- Android Browser 3+
- Firefox for Android 86+
- Opera Mini (tous)
- Opera Mobile 12+
- Chrome for Android 89+
- UC Browser for Android 12.12
- Samsung Internet 4+
- QQ Browser 10.4
- Baidu Browser 7.12
- KaiOS Browser 2.5
Avantages de l’utilisation des fichiers SVG
Le fichier SVG est un format vectoriel, ce qui signifie qu’il est automatiquement redimensionnable dans les navigateurs et les outils de retouche photo. Cela les rend parfaits pour les graphistes et les designers de sites Web. Normalement, lorsque vous essayez d’éditer un PNG ou un JPG dans un outil comme Photoshop, Sketch ou Paint, vous ne pouvez pas les redimensionner sans voir la pixellisation. Avec les SVGs, vous pouvez les redimensionner à l’infini et ils auront l’air de pixels parfaits (ou plutôt vectoriels) à chaque fois. C’est pourquoi ils constituent un format d’image idéal pour les écrans rétina.
Google indexe les fichiers SVG, ce qui est une excellente nouvelle pour le SEO. Le contenu du SVG qui est lié à un fichier lui-même sera indexé et apparaîtra dans la recherche d’images Google. Vous pouvez le voir avec les illustrations SVG que nous utilisons sur Kinsta en faisant une recherche d’images avancée. Note : Les SVGs en ligne, ou plutôt ceux composés uniquement de code, ne sont généralement pas indexés.
Les SVGs sont traditionnellement (pas toujours) plus petits en taille de fichier que les PNGs ou JPGs. En utilisant le SVG, vous pouvez effectivement accélérer votre site WordPress car vous allez réduire la taille globale de votre page. Genki a écrit un excellent article où il compare la taille du SVG vs PNG vs JPEG et voici notre comparaison JPG vs JPEG. Ci-dessous se trouvent quelques extraits de ses tests dans lesquels il a comparé les trois différents types d’images.
JPG (taille optimisée : 81,4 Ko)
PNG (taille optimisée : 85.1 Ko)
SVG (taille optimisée : 6,1 Ko)
Comme vous pouvez le voir ci-dessus, le SVG propose une diminution de la taille du fichier de 92,51% par rapport au JPG. Et par rapport au PNG, 92,83%. Ce sont des différences de taille de fichier assez impressionnantes. Cependant, il y a une mise en garde : comme il a testé des images plus détaillées, les SVGs sont finalement devenus plus gros que les JPGs ou les PNGs.
C’est pourquoi de nombreux sites utilisent les SVGs pour les images moins détaillées comme les logos, les icônes, etc. car ils verront une diminution significative de la taille des fichiers. Mais pour plus d’images avec beaucoup de détails, comme par exemple les » images en vedette » de votre blog, vous devrez peut-être utiliser un PNG ou un JPG, mais vous pouvez toujours les optimiser. De nombreux sites Web utilisent une approche hybride, utilisant les deux types de fichiers ensemble lorsque cela a du sens.
De plus, il est important de noter que les réseaux sociaux comme Facebook et Twitter ne supportent pas les SVGs pour le partage. Si vous utilisez des SVG pour vos images mises en avant, vous devez utiliser la fonction Yoast SEO et téléverser un PNG ou un JPG pour les OG et les balises métas, sinon vous risquez que votre image mise en avant n’apparaisse pas du tout.
Pourquoi la sécurité du SVG est importante
La raison pour laquelle le SVG ne fait pas encore partie du noyau WordPress est qu’il y a des problèmes de sécurité à résoudre. Vous pouvez suivre la discussion active sur les SVGs dans le cœur de WordPress (#24251) qui a commencé en 2013. SVG est un fichier XML, qui en lui-même s’ouvre à différentes vulnérabilités dont les formats d’image normaux ne sont pas affectés. Il s’agit notamment des attaques d’entités externes XML (XXE), bombes d’entités imbriquées et des attaques XSS.
Mario Heiderich a publié une présentation perspicace sur les risques de sécurité liés à l’injection de contenu actif dans les fichiers SVG. Un exemple donné était que JavaScript était intégré dans un SVG et qu’il a réussi à appeler Mario sur Skype. C’est un peu effrayant ! SecuPress, auteur d’un plugin de sécurité WordPress, a également abordé la question de la prudence lors de l’ajout du SVG dans WordPress, et l’importance de le faire correctement.
De nombreux plugins SVG sur le référentiel utilisent le code suivant, qui permet simplement au type MIME de permettre le téléchargement du SVG dans la bibliothèque de médias WordPress. Ce n’est pas la façon la plus sûre de faire ça ! Alors n’y allez pas en téléchargeant simplement le premier plugin SVG gratuit que vous voyez ou en copiant et collant ce code en pensant que c’est bon à utiliser.
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');La solution est que les SVG doivent être désinfectés. C’est essentiellement le nettoyage du code ou des entrées pour éviter les problèmes de sécurité (comme l’injection de code), les conflits de code et les erreurs. Cela pourrait impliquer des choses telles que l’encodage des données, le filtrage et la validation des chaînes de caractères, etc. C’est là que la bibliothèque SVG-Sanitizer de Daryll Doyle entre en jeu, ce qu’il appelle « sa tentative de construire un nettoyeur de SVG décent en PHP ». Regardez la démo de son nettoyeur de SVG pour le voir en action.
Il est également important que vous considériez qui sur votre site a accès au téléchargement des SVGs. Par exemple, si vous êtes sur un site multi-auteurs, vous n’avez aucune idée du type de SVG que quelqu’un d’autre pourrait télécharger, exposant votre site. Il est conseillé de limiter les téléchargements de SVGs aux administrateurs et à ceux qui comprennent certains des problèmes de sécurité.
Comment activer en toute sécurité la prise en charge du SVG dans WordPress
Daryll a développé un plugin, WP SVG (aussi connu sous le nom de Safe SVG), qui utilise la bibliothèque SVG-Sanitizer lors du téléchargement d’images SVG dans votre bibliothèque de médias WordPress. Le plugin vous permet également de visualiser les SVGs comme des images normales dans la médiathèque.
Vous pouvez télécharger Safe SVG gratuitement à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous « Ajouter » extensions.
Il a également une version premium, située sur wpsvg.com, qui vous permet d’empêcher certains utilisateurs de télécharger des SVGs et des optimisations SVG supplémentaires. Dans cet exemple ci-dessous, nous allons simplement utiliser la version gratuite.
Comme extension alternative, vous pouvez consulter SVG Support.
Avant de télécharger votre fichier SVG, il est important de comprendre qu’ils se comportent légèrement différemment des images. Lors de l’exportation d’un SVG à partir de votre outil de retouche photo, vous devrez exporter le texte sous forme de courbes (ou créer un contour), sinon, il pourrait s’afficher légèrement différemment dans les différents navigateurs.
Après avoir installé le plugin, il n’y a pas de paramètres, il va simplement nettoyer vos SVG lors du téléchargement. Sur notre site de test ci-dessous vous pouvez voir que nous avons remplacé notre logo par un fichier SVG, il est visible comme d’habitude dans la médiathèque.
Cela nous a également permis d’utiliser le panneau de contrôle de notre thème pour changer le logo dans notre en-tête WordPress en fichier SVG. Vous pouvez voir ci-dessous qu’il est en effet en train d’Aficher le fichier . svg. Et il est magnifique maintenant sur les écrans rétina.
Il y a un autre ajustement que nous avons dû faire. Dans IE9-11, les fichiers SVG ne sont pas encore correctement redimensionnés sur les ordinateurs de bureau et mobiles. L’ajout de la hauteur et de la largeur corrige ce problème. Cela peut varier selon le thème, mais sur notre site de test, nous avons simplement modifié notre fichier header.php et ajouté ces dimensions personnalisées. Certains thèmes WordPress utilisent le CSS pour modifier la mise à l’échelle, ce qui n’est pas bon pour des raisons de performances, mais en raison de cela, il peut vous demander d’ajouter du code supplémentaire pour corriger le problème sur IE.
Et c’est tout ! Vous avez maintenant activé en toute sécurité le support du SVG dans WordPress. Ce plugin et/ou cette méthode n’est pas supportée par le cœur de WordPress, donc bien sûr, utilisez-le à vos propres risques. Cependant, si vous téléchargiez déjà des SVGs avec seulement l’extrait de type MIME, alors, par tous les moyens, veuillez le faire de cette façon.
Aussi, si vous n’avez jamais utilisé le SVG auparavant, assurez-vous d’avoir activé GZIP sur votre serveur pour le type de fichier « image/svg+xml ». De cette façon, ils seront compressés et se chargeront le plus rapidement possible. Parfois, les administrateurs système n’activent que les types de fichiers les plus standards. Remarque : GZIP est déjà activé sur tous les serveurs de Kinsta pour les SVGs.
Résumé
Les SVGs sont un excellent moyen d’améliorer l’apparence de votre site ! Nous recommandons d’utiliser le SVG, PNG et JPG ensemble pour obtenir les meilleures performances, car les images très détaillées ne fonctionneront pas aussi bien au format SVG. Les SVGs sont parfaits pour votre logo, pour qu’il apparaisse parfaitement sur tous les écrans, avec des icônes.
Qu’en pensez-vous ? Avez-vous déjà utilisé le SVG sur votre site WordPress ?
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire