Comment et pourquoi utiliser des SVG dans WordPress • WPShout

By | avril 7, 2020

Formation WordPress

Cet article concerne les SVG: comment et pourquoi utiliser les SVG dans WordPress, y compris comment autoriser les téléchargements de fichiers SVG dans WordPress. Que vous aimiez, craigniez ou ne compreniez tout simplement pas ce format d'image, nous avons ce qu'il vous faut.

Qu'est-ce qu'un SVG?

SVG signifie Image Vectorielle. Il s'agit d'un format de fichier pour les graphiques 2D qui utilise XML.

Selon Mozilla Developer Network, Le SVG est essentiellement aux graphiques ce que le HTML est au texte.

Quels sont les avantages des SVG?

En tant que format vectoriel, les SVG ont une résolution infinie: vous pouvez zoomer pour toujours et ils restent parfaitement nets.

Comme SVG est un format vectoriel, Les fichiers SVG sont évolutifs sans perte de qualité. En d'autres termes, contrairement aux PNG ou JPG, les SVG ont infini résolution: vous pouvez zoomer pour toujours et ils restent parfaitement nets. (Essayez-le sur l'un des SVG dans cet article!)

Les SVG ont aussi généralement, mais pas toujours, des fichiers plus petits que d'autres formats d'image.

De plus, les SVG peuvent être Animé.

Enfin, les SVG peuvent être plus accessible que d'autres formats comme les polices d'icônes, car vous pouvez leur ajouter un balisage supplémentaire qui aide les lecteurs d'écran à comprendre leur objectif.

Quels sont les inconvénients des SVG?

Les SVG sont soumis aux mêmes vecteurs d'attaque que XML.

Les SVG ne sont pas un format qui convient photographies. Bien que vous puissiez convertir des fichiers JPG en SVG, les résultats sont moins que stellaires.

Le principal inconvénient de l'utilisation des SVG est Sécurité. Étant donné que SVG est un format de document et basé sur XML, il est soumis aux mêmes vecteurs d'attaque que XML.

Le post de Fortinet explique les types d'attaques auxquelles les SVG pourraient être vulnérables.

Cette vidéo explique l'anatomie d'un SVG malveillant:

Est-ce à dire que les SVG ne sont pas sûrs à utiliser?

Non, mais vous devez faire preuve de prudence.

Créez vos propres SVG

Vous pouvez créer vos propres SVG à l'aide de n'importe quel logiciel graphique vectoriel.

Traditionnellement, c'était avec Adobe Illustrator, mais il existe des alternatives gratuites.

Deux sont le programme Inkscape ou le site Web de Vectr.

Les SVG peuvent contenir des lignes, des polygones, des formes dessinées à main levée ou du texte. Les SVG colorés ont un ou les deux accident vasculaire cérébral (contour de la forme) et remplir (une couleur unie ou un dégradé).

Un simple rectangle créé avec Inkscape. Le SVG est de 0,76 Ko contre 1,33 Ko (75% de plus) pour un PNG de la même image.

rectangle wordpress svg démo

Lorsque vous avez créé votre SVG, exécutez-le via un optimiseur pour supprimer tout ballonnement de code qui pourrait être ajouté par votre programme graphique.

En voici deux:

Comment les SVG sont-ils ajoutés aux pages Web?

Il existe différentes méthodes pour ajouter des SVG au code HTML.

image cible svg wordpress

Tout d'abord, vous pouvez ajouter un et ajoutez-y le chemin d'accès au fichier SVG.

par exemple.

cible

Deuxièmement, vous pouvez ajouter des SVG en ligne. Cela signifie ajouter le code SVG directement à la page, plutôt que de le référencer dans un fichier.

Troisièmement, vous pouvez ajouter un SVG comme image d'arrière-plan avec CSS.

HTML:

CSS:

.Contexte 

image d'arrière-plan: url (img / target.svg);

background-repeat: pas de répétition;

taille de l'arrière-plan: 200px;

largeur: 200 px;

hauteur: 200px;

Dans chaque cas, le SVG affiche exactement la même chose sur la page. Notez que la largeur et la hauteur sont les mêmes valeurs à chaque fois.

Image cible SVG affichée en tant que source d'image, en ligne et en tant qu'image d'arrière-plan

La fenêtre SVG, viewBox et la taille SVG

Les SVG ne se comportent pas comme les autres images en termes de taille. C'est parce que ce sont vraiment des documents.

Le SVG fenêtre montre la zone visible du SVG. Cela est défini par les attributs de largeur et de hauteur dans le élément.

Si vous ne spécifiez pas d'unité pour la largeur ou la hauteur, il est supposé que vous utilisez des pixels.

Sinon, vous pouvez utiliser plusieurs autres mesures, notamment em,%, mm, cm et pouces.

Lorsqu'aucune unité n'est utilisée, le viewBox L'attribut peut définir où se trouve le SVG dans la fenêtre et quelle quantité il est vu. Il est composé de 4 paramètres: X, y, largeur et la taille.

J'ai trouvé difficile de comprendre le fonctionnement du système de coordonnées, jusqu'à ce que je tombe sur les éléments SVG de mise à l'échelle d'Amélie Wattenberger, qui propose une brillante démo interactive.

Amélie compare viewBox à un télescope, avec les coordonnées x et y utilisées pour le panoramique et la largeur et la hauteur pour zoomer.

Comprendre viewBox - Démo interactive d'Amélie Wattenberger

Voici le code d'un carré SVG que j'ai ajouté à une page en ligne pour expérimenter viewBox.

Voir ce qui arrive au carré lorsqu'il est différent viewBox des valeurs sont définies:

Carré SVG avec différentes valeurs de viewBox

Voici deux autres bons blogs sur ce sujet:

  1. Comment mettre à l'échelle SVG
  2. Comprendre les systèmes de coordonnées SVG et les transformations (Partie 1) – La fenêtre d'affichage, la viewBox et la conserve AspectRatio

Le moyen le plus prévisible que j'ai trouvé pour contrôler la taille d'un SVG et sa réactivité est de le rendre assez grand dans le programme graphique que vous utilisez. Il semble beaucoup plus facile de réduire un SVG que de le faire évoluer.

Téléchargements WordPress et SVG dans la médiathèque

WordPress n'autorise pas les téléchargements SVG vers la médiathèque, pour les raisons de sécurité susmentionnées.

Si vous essayez, vous verrez un message comme celui-ci:

«Example.svg» n'a pas réussi à télécharger.
Désolé, ce type de fichier n'est pas autorisé pour des raisons de sécurité.

Alors, comment pouvez-vous contourner cela?

La réponse est avec les plugins.

Plugins pour les téléchargements SVG dans WordPress

Deux plugins qui promettent une utilisation SVG sûre sont Prise en charge SVG et SVG sécurisé.

Les deux ont un nettoyage de fichiers intégré pour analyser les fichiers SVG et supprimer tout code malveillant.

Puisqu'aucun logiciel de désinfection n'est parfait, faites attention au téléchargement et à l'utilisation de SVG à partir de sources non fiables. Vous pouvez d'abord ouvrir le fichier dans un éditeur de code juste pour vérifier.

Une fois que vous avez activé les téléchargements SVG, toute personne ayant le rôle Auteur ou supérieur sur votre site sera autorisée à ajouter des SVG à votre site – sauf si vous avez activé les restrictions de téléchargement via votre plug-in. Cela dépend de la confiance que vous accordez à vos utilisateurs!

Prise en charge SVG

Plugin WordPress pour le support SVG

Le support SVG est ce que nous avons utilisé pour ajouter des SVG à cet article.

Le support SVG est gratuit et possède des fonctionnalités puissantes:

  • Ajouter des SVG dans balises ou en ligne
  • Ajoutez une classe pour styliser ou animer vos SVG: le support SVG utilise style-svg mais vous pouvez changer cela
  • Restreindre les téléchargements aux administrateurs uniquement
  • Forcer tous les SVG à s'afficher en ligne (nécessaire pour certains créateurs de pages comme Divi)

Le support SVG est ce que nous avons utilisé pour ajouter des SVG à cet article. Cela fonctionne très bien hors de la boîte. Pour des raisons de sécurité, nous nous sommes assurés d'activer sa fonction "Restreindre aux administrateurs?" , permettant uniquement aux utilisateurs de l'administrateur WPShout de télécharger des SVG sur le site:

capture d'écran de démonstration de support svg

Au moment de la rédaction, l'ajout de votre propre classe à un SVG dans un bloc d'image Gutenberg pour le rendre en ligne ne fonctionne pas comme prévu en raison de la façon dont le bloc est balisé. Il s'agit d'un problème connu qui devrait être résolu dans une prochaine version.

SVG sécurisé

Plugin WordPress SVG sécurisé

Safe SVG a à la fois une version gratuite et une version premium.

La version gratuite désinfecte les SVG et affiche des aperçus dans la médiathèque.

Pour la suite complète de fonctionnalités, vous devez mettre à niveau. Les prix commencent à 39 £ pour un seul site.

La version Pro vous permet:

  • Choisissez qui peut télécharger des SVG par utilisateur
  • Analyser les SVG précédemment téléchargés
  • Ajouter des SVG en ligne, y compris dans Gutenberg
  • Optimiser les SVG lors du téléchargement
  • Afficher un journal de désinfection
  • Accédez au support premium

Il existe une démonstration en ligne du désinfectant Safe SVG si vous souhaitez le tester.

Elementor

Si vous êtes un utilisateur du plugin Elementor, vous pouvez activer la prise en charge SVG pour télécharger des SVG pour les widgets Icon du plugin. L'option n'est pas activée par défaut.

Elementor tentera de nettoyer vos SVG mais vous avertit du risque potentiel d'autoriser les téléchargements de SVG.

Activation des téléchargements SVG dans Elementor

Apparition SVG dans WordPress

Dans le thème Twenty Twenty, le style suivant affecte les images, y compris les SVG, lorsque vous utilisez l'éditeur classique:

svg, img, embed, object 

bloc de visualisation;

hauteur: auto;

largeur max: 100%;

Je n'ai pas vérifié cela avec de nombreux autres thèmes, mais il semble qu'ils utilisent également hauteur: auto; et largeur max: 100%;pour les images.

Si vous utilisez l'éditeur de blocs, quel que soit le thème, ce style s'applique (à toutes les images):

.wp-block-image img 

largeur max: 100%;

Vous pouvez redimensionner votre SVG en passant à l'une des tailles de support prédéfinies ou en définissant la largeur ou la hauteur en pixels.

Impression de patte de démonstration WordPress SVG

Grande taille

WordPress SVG demo paw print small

280px de large

J'ai trouvé qu'essayer d'utiliser une taille% pour un SVG dans l'éditeur de blocs ne fonctionnait pas – cela a fait disparaître complètement le SVG.

Animations SVG WordPress

Vous pouvez animer des SVG avec CSS ou JS.

Jackie d’Elia a un joli didacticiel sur ce sujet, Utilisation de l’animation SVG dans WordPress, qui comprend un correctif pour les différents comportements d’affichage de Firefox.

Il existe plusieurs outils pour créer des animations. J'ai essayé SVGator, qui est gratuit sur un essai de 14 jours.

J'ai créé une animation simple en déplaçant un rectangle d'une position en haut à gauche en bas à droite.

Rectangle violet se déplaçant en diagonale à gauche et en bas

Il y a des instructions spéciales pour ajouter une animation SVG de SVGator à WordPress car c'est un peu compliqué. J'ai utilisé la méthode 2.

Autres façons d'utiliser les SVG dans WordPress

Certains thèmes et plug-ins incluent des icônes SVG dans l'un des dossiers de thèmes ou de plug-ins, il n'y a donc pas de problème de téléchargement.

Ils constituent un moyen simple et sûr d'utiliser les SVG.

Thèmes «Twenty» WordPress

Depuis Twenty Seventeen, les thèmes WordPress par défaut ont un menu Liens sociaux qui utilise des SVG.

Vingt-dix-sept icônes de menu social

Une seule icône a ce code:

Si vous connaissez les sprites d'image, le # icon-twitter fait référence à l'icône Twitter dans le fichier svg-icons.svg, qui contient toutes les icônes.

Le code d'icône Twitter dessine la forme:





Police Awesome

Le plugin Font Awesome apporte son jeu d'icônes populaire à WordPress.

Dans les paramètres avancés du plugin, il est possible de choisir des icônes SVG dans la liste déroulante Méthode.

Sélection de la police impressionnante comme SVG

Effets SVG impressionnants

L'option SVG de Font Awesome vous permet de faire certaines choses que vous ne pouvez pas faire avec les polices d'icônes.

Rotation, masquage et superposition

Vous pouvez tourner une icône par degrés.

Vous pouvez aussi faire du cool masquage effets.

De plus, vous pouvez couche plusieurs icônes.

6

Une voiture en rotation, une icône de musique masquée et une icône en couches avec le numéro 6

Animation de rotation

Vous pouvez également utiliser le fa-spin classe à tourner une icône en continu.

Icônes de baseball et de CD impressionnantes

Accessibilité SVG

Rendre une image SVG accessible dépend du but de l'image et de la façon dont vous l'incluez.

SVG décoratifs

Si l'image est décorative et ajoutée via un , il doit avoir un attribut alt nul.

Si le SVG est utilisé en ligne, ajoutez aria-hidden = "true" à la étiquette.


SVG sémantiques (significatifs)

Pour les SVG avec une signification utilisant un tag, ajouter role = "img" et un texte alternatif représentant ce que représente l'image.

La pluie tombe d'un nuage gris

échantillon de wordpress svg raincloud

Voici un exemple de code pour un SVG en ligne significatif.



La pluie tombe d'un nuage gris





Notez que:

  1. le la balise a role = "img" et aria-labelledby les attributs.
  2. le </code> tag vient juste après <code><svg></code> et a un <code>id</code> avec une valeur correspondant à la <code>aria-labelledby</code> valeur (nuage de pluie).</li> <li>Le contenu du <code><title></code> tag représente l'image.</li> </ol> <h3>SVG liés</h3> <p>Cela devient plus compliqué si vos SVG sont liés! Pour obtenir des conseils, lisez ce qui suit:</p> <h3>Animations SVG accessibles</h3> <p>Si vous souhaitez que vos SVG animés soient accessibles, vos animations ne doivent pas être lues automatiquement pendant plus de 5 secondes sans contrôle de pause. En outre, vous devez éviter d'utiliser des images qui clignotent ou clignotent 3 fois par seconde ou plus rapidement.</p> <h3>Accessibilité SVG impressionnante</h3> <p>La page d'accessibilité de Font Awesome contient des conseils pour rendre les icônes SVG accessibles.</p> <p>Si l'image est <strong>décoratif</strong>, il vous suffit d'ajouter le code HTML de l'icône.</p> <pre class="language-markup"><code><i class="fas fa-arrow-right"></i></code></pre> <p>Font Awesome ajoute automatiquement le balisage correct pour identifier l'icône en tant qu'image mais la masquer à un lecteur d'écran.</p> <p>Voici le code de sortie sur la page:</p> <pre class="language-markup"><code><svg class="svg-inline--fa fa-arrow-right fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></code></pre> <p>Si l'image a un <strong>sens</strong>, copiez le code de l'icône souhaitée et ajoutez un <code>Titre</code> lui attribuer la signification de l'icône, comme ceci:</p> <pre class="language-markup"><code><i title="Accessible" class="fab fa-accessible-icon fa-2x"></i></code></pre> <p>Voici la sortie:</p> <pre class="language-markup"><code><svg title="Accessible" class="svg-inline--fa fa-accessible-icon fa-w-14 fa-2x" aria-labelledby="svg-inline--fa-title-mVQUTxhc8E1E" data-prefix="fab" data-icon="accessible-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><title id="svg-inline--fa-title-mVQUTxhc8E1E">Accessible

    Police décorative Icônes de flèche impressionnantes et icône accessible sémantique

    Résumer

    Les SVG peuvent être très utiles pour leur taille de fichier plus petite, leur meilleure accessibilité et leur potentiel d'animation. Ils sont particulièrement utiles comme icônes.

    Vous devez trouver un équilibre entre ces pros et l'ajout d'un ou plusieurs plugins pour les utiliser, en maintenant la sécurité de votre site et en apprenant la manière SVG de faire les choses.

    Mais dans l'ensemble, je pense que l'inclusion de SVG dans WordPress en vaut la peine.