Comment utiliser SVG dans WordPress

Bien que SVG ait été standardisé au début des années 2000, le format d'image très attrayant n'a pas vu le jour en raison d'une mauvaise prise en charge des navigateurs. Tout cela a radicalement changé ces dernières années, car SVG devient rapidement la forme d'image de facto sur le Web.

Et ce ne sont pas seulement les graphistes qui tombent amoureux du SVG, mais aussi les utilisateurs de WordPress qui souhaitent accélérer leurs blogs en réduisant la taille globale de l'image. Cet article va explorer le sujet de l'utilisation de SVG sur un site basé sur WordPress.

Qu'est-ce que SVG ?

SVG (Scalable Vector Graphics) est un format d'image basé sur XML pour afficher des graphiques sur le Web et dans les applications. Fondamentalement, un fichier SVG est simplement une collection de code XML qui spécifie différentes formes et couleurs utilisées dans une image SVG.

Et puisque vous pouvez ouvrir des fichiers SVG avec un éditeur de texte, il est également facile de faire des personnalisations en utilisant le code CSS3 et JS de base. En conséquence, les SVG sont très appréciés des utilisateurs Web modernes en raison de leur flexibilité polyvalente.

Plus important encore, le W3C reconnaît SVG comme une norme leader de l'industrie. Ainsi, SVG fonctionne parfaitement avec d'autres technologies Web telles que DOM, HTML, etc.

Pourquoi SVG est-il important ?

Les images SVG sont vectorielles, par conséquent, une image SVG peut être redimensionnée à l'infini sur l'écran sans perte de qualité. L'interaction principale à cet égard est le XML du navigateur ; où le navigateur trace la spécification XML avec chaque augmentation ou diminution.

Inutile de dire que les fichiers SVG sont beaucoup plus flexibles que les formats traditionnels tels que PNG ou JPEG. Et l'interaction directe entre CSS et JavaScript signifie que vous pouvez adapter vos images SVG lors de vos déplacements. Ceci est essentiel lorsque vous travaillez sur un nouveau design ou autre.

En ce qui concerne les performances, les images SVG ont tendance à être beaucoup plus petites que leurs homologues. Par conséquent, il est courant de voir des illustrations, des logos et des icônes sous forme de graphiques vectoriels. Cela a également conduit au développement de nombreuses polices d'icônes, que nous mentionnerons brièvement dans l'article plus tard.

En un mot, les SVG offrent une flexibilité, une taille d'image réduite et une base solide pour améliorer les performances des images sur votre site WordPress.

Comment les images SVG sont-elles créées ?

La création d'images SVG peut se faire de deux manières : écrire du "code" et utiliser un logiciel de conception graphique moderne. La première méthode, qui consiste à écrire un script XML, est la méthode traditionnelle de création de fichiers SVG, mais peut s'avérer être une technique lente et inefficace.

Une simple collection de carrés pourrait ressembler à ceci au format XML :

Comme vous pouvez le voir, écrire cela de manière répétitive pour des graphiques complexes revient à se tirer une balle dans le pied.

L'autre méthode consiste à utiliser un logiciel, et c'est le moyen le plus rapide et le plus efficace de créer des graphiques SVG. Avec un logiciel vectoriel, vous pouvez vous concentrer sur la création de graphiques et plus tard les exporter sous forme de fichiers SVG prêts à l'emploi.

Affinity Designer est un programme d'édition de vecteurs professionnel bien connu, tout comme des logiciels comme Adobe Illustrator, Sketch, Figma et Inkscape.

Quel que soit le logiciel que vous décidez d'utiliser, la seule chose qui compte vraiment, ce sont vos plans pour le type de graphiques que vous souhaitez créer. La fonctionnalité d'exportation fonctionne de la même manière dans tous les programmes modernes.

Inutile de dire que SVG est toujours la même structure XML. Ainsi, vous pouvez utiliser des images SVG à la fois comme document mais aussi les insérer en ligne.

WordPress prend-il en charge SVG ?

Aussi étrange que cela puisse paraître, une plate-forme de la portée de WordPress ne prend pas en charge le format de fichier SVG. Mais seulement à cause de graves problèmes de sécurité.

Vous voyez, contrairement aux types de fichiers PNG/JPG/GIF — SVG n'est pas une image pixellisée mais un vecteur. Par conséquent, SVG est exposé aux risques d'exploitation de JavaScript, et WordPress a choisi de ne pas autoriser SVG dans WordPress par défaut. C'est logique à tous points de vue.

Même si les contributeurs de WordPress parlent de SVG depuis de nombreuses années, il y a trop d'angles à aborder pour prévenir les problèmes de sécurité à grande échelle.

Ainsi, la seule façon de contourner ce problème consiste à utiliser des plugins ou en activant SVG comme format de fichier à l'aide des fonctions de thème.

Comment activer les images SVG sur un site WordPress ?

Avant d'en venir à la partie plugins, vous pouvez en fait activer SVG dans WordPress via le fichier functions.php dans votre répertoire de thème. C'est certainement le moyen le plus rapide, mais aussi le moins sûr puisque vous activez SVG au format brut.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

retourne $file_types ;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Et votre autre option - plus sûre - consiste à utiliser des plugins. Voici trois des plugins les plus importants pour activer SVG dans WordPress.

Prise en charge SVG

L'ajout de la prise en charge de SVG représente la moitié de la bataille, vous pouvez également ajouter un style personnalisé, des effets d'animation et activer des restrictions. Mais pour faire tout cela, vous avez besoin d'un certain soutien.

Avec le support SVG, vous pouvez commencer à ajouter des fichiers SVG à vos articles et pages en utilisant la balise Image traditionnelle. Par exemple, vous pouvez ajouter une nouvelle classe CSS à vos images : "style-SVG", qui récupérera votre image SVG téléchargée et affichera son contenu dans un affichage en ligne.

Les principales fonctionnalités de ce plugin sont :

• Activez la gestion des fichiers SVG dans la bibliothèque multimédia WordPress.
• Convertissez les images SVG téléchargées en code en ligne.
• Prend en charge le widget d'image pour ajouter des balises Alt et Caption à toutes les images SVG.
• Stylez des images SVG individuelles à l'aide de CSS personnalisés.
• Implémentez des effets d'animation en utilisant CSS3 et JavaScript.
• Pages de paramètres détaillées dans le tableau de bord du plugin.
• Appliquez un accès basé sur les autorisations. Par exemple, restreindre le téléchargement uniquement aux comptes disposant de privilèges d'administrateur.

Attention, malgré ce que propose ce plugin, les risques d'exploitation SVG sont assez réels. N'activez pas la gestion des fichiers SVG pour les utilisateurs auxquels vous ne faites pas confiance. Donc, idéalement, vous n'activerez cette fonctionnalité que pour les utilisateurs au niveau administrateur.

Pour rappel, toute personne disposant de privilèges de téléchargement peut télécharger de nouveaux fichiers SVG, mais comme les fichiers SVG sont basés sur XML, ils sont ouverts à l'exploitation par des injections malveillantes et autres.

SVG sécurisé

Safe SVG est un plugin qui va vous donner la tranquillité d'esprit en termes de souci des risques de sécurité potentiels. Le plugin est conçu spécifiquement pour nettoyer tout nouveau téléchargement SVG et empêcher les intentions malveillantes. De plus, Safe SVG ajoute la possibilité de voir quel type de fichiers SVG vous avez téléchargé via votre médiathèque.

Avec 50 000 utilisateurs actifs, vous pouvez compter sur Safe SVG pour fournir un excellent bilan de performances sûres. Il convient de noter qu'il existe deux versions différentes pour ce plugin ; gratuit et payant.

La version gratuite inclut une fonctionnalité pour nettoyer les nouveaux téléchargements et ajoute également la prise en charge de l'affichage SVG dans la médiathèque.

Si vous optez pour la version Pro, vous obtiendrez des fonctionnalités supplémentaires telles que l'optimisation SVGO. Cette technique d'optimisation réduira encore la taille du fichier de vos téléchargements SVG.

De plus, avec Pro, vous pouvez choisir qui peut ou non télécharger de nouveaux fichiers SVG. Par conséquent, vous pouvez limiter l'accès à des utilisateurs spécifiques uniquement. Et enfin, en achetant le plugin, vous avez accès à une assistance premium - obtenez des réponses à vos questions chaque fois que vous en avez le plus besoin.

Ajouter un support SVG complet

Vous devriez obtenir des résultats raisonnables avec les deux premiers plugins que nous avons répertoriés. Mais si vous aimez l'idée d'ajouter du SVG à votre site à l'aide de Shortcodes, consultez ce plugin.

Ce plugin ajoute des fonctionnalités SVG à votre WordPress et utilise une technique SVG basée sur une idée d'Alexey Ten. Cette façon d'inclure des images SVG dans HTML semble être celle qui offre la meilleure combinaison de performances et de compatibilité pour le moment.

Ajouter une prise en charge complète de SVG permet le téléchargement de SVG et la génération de codes courts. De plus, vous pouvez personnaliser le style de chaque élément SVG à l'aide de CSS personnalisés. Enfin, vous pouvez spécifier une photo de secours pour tout ou partie des SVG que vous avez téléchargés.

Quels sont les autres plugins SVG utiles pour WordPress ?

Outre l'ajout du support SVG à un site WordPress, quels autres plugins existent qui pourraient bénéficier à votre site ? Tout le monde et leur grand-mère savent qu'il existe des avantages significatifs en termes de performances. À la fois en termes de taille de fichier, mais également de capacité du navigateur à afficher des graphiques vectoriels en ligne.

Icônes WP SVG

Les icônes sont un élément visuel, et ces éléments ont tendance à donner une nouvelle vie aux conceptions. Chose intéressante, ce plugin est né d'une nécessité personnelle. L'auteur voulait commencer à implémenter plus de fichiers SVG dans ses conceptions, mais n'a pas trouvé de solution. Alors, il a pris son temps et ses efforts et a créé les icônes WP SVG.

Ce plugin est super facile à utiliser et vous pouvez remplacer les icônes existantes sur votre site en quelques clics seulement. Mieux encore, vous n'avez pas non plus besoin de recréer chaque image pour les écrans Retina, tant que vous définissez la largeur maximale, l'icône se redimensionnera automatiquement.

Tout comme dans le cas des auteurs, ce plugin est exceptionnel pour toutes sortes de travaux de développement, multisites et clients. Sans aucune restriction, vous n'avez pas à vous soucier de la compatibilité des thèmes ou de quoi que ce soit de cette nature.

Il semble également y avoir une version premium sur l'offre avec une fonctionnalité qui permet le téléchargement d'icônes personnalisées. Ainsi, vous n'êtes pas limité aux icônes intégrées.

Menu social SVG

Il s'agit d'un plugin qui fonctionne comme un widget pour afficher des icônes de médias sociaux via des images SVG. Pour que ce plugin fonctionne, il vous suffit de créer un nouveau menu WordPress avec des liens vers vos profils de réseaux sociaux.

Ensuite, sélectionnez l'emplacement personnalisé du menu social SVG et enregistrez le nouveau menu. Ensuite, vous pouvez utiliser le widget SVG Social Menu soit dans votre barre latérale, soit dans d'autres zones de votre blog prêtes pour les widgets.

Les icônes actuellement disponibles sont pour les sites et plateformes suivants : plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logo SVG et effets de texte

SLATE est un plugin qui permet la prise en charge des shortcodes pour ajouter des effets SVG personnalisés. Vous pouvez utiliser ce plugin pour promouvoir une image de marque forte, mettre en valeur les widgets CTA ou faire ressortir des éléments à leur manière. L'utilisation intelligente de la prise en charge des codes abrégés signifie que vous pouvez modifier et personnaliser vos effets à tout moment.

Par exemple, vous pouvez mélanger différentes couleurs, polices, filtres et utiliser de nombreux motifs de remplissage qui se manifestent par des effets de conception accrocheurs. SLATE offre autant de liberté créative qu'un logiciel d'édition vectorielle, mais seulement sans que vous ayez besoin d'utiliser un logiciel !

Alors, quelles sont certaines des fonctionnalités clés?

• Texte. Générez des codes abrégés qui peuvent reproduire les effets d'effets de texte accrocheurs mais conviviaux pour le référencement. Tout comme ce que vous voyez dans l'instantané ci-dessus.
• Polices. Vous ne savez pas où trouver des polices personnalisées ? Pas de soucis puisque SLATE est pré-emballé avec l'énorme bibliothèque de Google Fonts.
• Motifs de remplissage. Les lettres sont remplies avec un motif de remplissage de votre choix. Les motifs de remplissage ont des paramètres. Contrôlez différentes tailles, distances et couleurs pour produire des variations uniques, ou laissez les valeurs par défaut travailler pour vous.

Et bien plus encore ! Ce plugin est une centrale électrique pour obtenir votre texte et vos logos avec une précision exceptionnelle. Et grâce à SVG, rien de moins.

Où pouvez-vous trouver des graphiques SVG ?

Que pouvez-vous faire si vous n'avez aucune expertise préalable en conception graphique vectorielle ? Heureusement, trouver des SVG de nos jours est simple et direct. Tout au plus, vous n'avez qu'à établir un lien vers l'auteur original qui a créé le graphique. Et de nombreuses plateformes fournissent des images gratuites sans exigence d'attribution.

Voici quelques sites incroyables proposant du contenu SVG gratuit :

• FontAwesome - Font Awesome, la bibliothèque d'icônes de polices la plus impressionnante au monde. Le projet se poursuit depuis plusieurs années et offre un support approfondi non seulement pour les navigateurs, mais également pour les frameworks spécifiques et les logiciels de conception. Ce package de polices orienté accessibilité est un tueur absolu et si simple à utiliser ! En fait, je suis sûr qu'il existe une douzaine de plugins WordPress prenant en charge Font Awesome !
• Vecteezy - Vecteezy est sans doute la plus grande plate-forme de graphiques vectoriels de la planète. Alimenté par des conceptions personnalisées, des contributions de la communauté et des données Web : Vecteezy propose des vecteurs dans n'importe quel type de catégorie, de forme ou de forme. Et il est également très facile de télécharger des fichiers. Tout ce que vous avez à faire est de renvoyer à la page de l'auteur à partir de laquelle vous avez obtenu le fichier. C'est un site que j'utilise fréquemment.
• Arrière-plans SVG — Suivez-vous les dernières tendances en matière de conception Web ? Il y a tellement de domaines créatifs dans lesquels les conceptions sont explorées maintenant. Et l'un de ces domaines est les arrière-plans SVG. Vous les avez vus aussi. Motifs ondulés, lignes courbes, etc. Utilisez ce site pour générer des arrière-plans SVG facilement accessibles !
• SVG Grabber - Cette extension Chrome est une aubaine absolue pour obtenir des images SVG à partir de différentes pages de sites Web. Cliquez simplement sur l'icône et l'extension peut récupérer chaque fichier SVG sur une page. Bien sûr, vous devez suivre les règles du droit d'auteur partout où vous le pouvez, mais dans l'ensemble, cela ressemble à une extension solide à utiliser fréquemment.
• Zone de logo vectoriel — Selon le créneau dans lequel vous travaillez, il peut être utile d'avoir une collection de logos vectoriels des plus grandes marques mondiales. Vous pouvez également utiliser ces fichiers lorsque vous faites des annonces ou des promotions spécifiques. Et la plupart des éditeurs de photos de nos jours peuvent convertir des fichiers SVG en PNG et autrement de toute façon.

Et c'est nous qui touchons la surface de ce qui existe, vraiment. Personnellement, SVG a fait une grande différence dans la façon dont je travaille avec la conception de sites Web et même la création d'images en vedette. Avec un SVG, vous pouvez vraiment tout faire sur le spectre des couleurs, les différents alignements de formes, etc.

Bien sûr, ce n'est pas la même chose que d'utiliser de belles photographies réelles, mais sur n'importe quel site Web, vous pouvez trouver de nombreux endroits où un JPG pourrait être remplacé par un graphique vectoriel. Et c'est précisément le but de cet article, pour vous donner un large aperçu de la façon d'utiliser SVG avec WordPress.

Que nous ayons atteint cet objectif, nous vous en laisserons le juge. Si vous souhaitez ajouter quelque chose à ce message ou si vous avez des ressources supplémentaires à partager, sachez que notre section de commentaires est toujours ouverte.