SVG 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. La principale raison pour laquelle ils sont particulièrement populaires parmi les développeurs et les designers est qu’il s’agit d’un format d’image redimensionnable, 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 voir la seule façon d’activer en toute sécurité le support du SVG dans WordPress, discuter du support des navigateurs, ainsi que quelques mises en garde si vous décidez de passer au format d’image vecteur.

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 SVG ?

Selon Wikipedia, un SVG (Scalable Vector Graphics) est un format d’image vectorielle basé sur XML pour des graphiques bidimensionnels avec support pour l’interactivité et l’animation. Vous pouvez même les manipuler avec du code ou votre éditeur de texte. La spécification SVG est un standard ouvert développé par le World Wide Web Consortium depuis 1999. Les SVGs ne sont actuellement utilisés que par 3,4% de tous les sites web, mais comme vous pouvez le voir ci-dessous, le taux d’adoption augmente rapidement. Les sites populaires tels que Google, Reddit, Dropbox, ESPN, et même notre propre site Web ici chez Kinsta utilisent SVG.

Statistiques d'utilisation du SVG de avril 2016 à avril 2017

Statistiques d’utilisation du SVG de avril 2016 à avril 2017

Support du SVG par les navigateurs

Les SVGs sont actuellement pris en charge par tous les principaux navigateurs et 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 SVGs, 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 3+
  • Chrome 4+
  • Safari 3.2+
  • Opera 10+
  • iOS Safari 3.2+
  • Opera Mini (tous)
  • Android Browser 4.4+
Support des navigateurs SVG

Support des navigateurs SVG

Avantages du SVG

Le 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 SVGs, ce qui est une excellente nouvelle pour le référencement. 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 le 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. 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)

Image JPG

Image JPG

PNG (taille optimisée : 85.1 Ko)

Image PNG

Image PNG

SVG (taille optimisée : 6,1 Ko)

SVG (taille optimisée : 6,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. Donc, si vous avez utilisé du SVG pour vos images en vedette, vous devrez utiliser une fonction de Yoast SEO et télécharger un PNG ou JPG pour les balises OG et meta.

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.

Démonstration du nettoyeur de SVG

Démonstration du nettoyeur de SVG

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.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
Plugin WP SVG

Plugin WP SVG

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.

Avant de télécharger votre 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.

Affinity Designer

Affinity Designer – Exporter le texte sous forme de courbes SVG

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.

SVG dans la médiathèque WordPress

SVG dans la médiathèque WordPress

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.

SVG dans l'en-tête WordPress

SVG dans l’en-tête WordPress

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.

Fichier header.php modifié pour le problème de mise à l'échelle du SVG sous IE

Fichier header.php modifié pour le problème de mise à l’échelle du SVG sous 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 ?