Guide du format d'image Scalable Vector Graphics (SVG)

Il y a un aspect d'Internet dont vous ne pouvez pas vous passer : les images. Au début du Web, il s'agissait d'une affaire stricte de texte uniquement. Cependant, nous avons maintenant des formats d'image dédiés pour nous aider à afficher des visuels nets. Le format Scalable Vector Graphics (SVG) est l'un des plus récents et des plus flexibles disponibles.

Nous expliquerons plus tard, mais un SVG est une collection de données qui se présente sous forme d'image sur le front-end. Cela signifie que vous pouvez utiliser Cascading StyleSheets (CSS) pour manipuler l'image. De plus, vous pouvez le redimensionner selon vos besoins sans perte de qualité.

Pour cet article, nous allons parler davantage des graphiques vectoriels évolutifs et de la manière dont ils peuvent vous aider. Nous discuterons également de la manière de les inclure sur votre site Web WordPress.

Une introduction rapide aux formats d'images Web les plus courants

Avant de passer aux SVG et à leur utilisation, il convient de parler des principaux formats d'image que nous utilisons pour le Web. Il y en a trois à noter :

• Groupe mixte d'experts photographiques (JPEG). Comme son nom l'indique, si vous souhaitez afficher des photos prises avec un appareil photo numérique, c'est le format qu'il vous faut.
• Graphiques réseau portables (PNG). Vous voudrez utiliser le format PNG pour afficher tous les graphiques créés, tels que ceux d'Adobe Illustrator.
• Format d'échange graphique (GIF). Hé, tout le monde aime les clips amusants d'émissions de télévision à utiliser comme réaction sur les réseaux sociaux ! GIF est le format idéal pour les graphiques animés qui sont également portables.

Alors que certains choisiront le format qu'ils aiment, ce ne sera pas une approche optimale. Par exemple, si vous choisissez de créer chaque image GIF, vous pourriez voir des tailles de fichiers astronomiques et des visuels de mauvaise qualité. En revanche, vous ne voudrez pas utiliser JPEGS pour les graphiques, car PNG est un format plus optimal.

Qu'est-ce que le format graphique vectoriel évolutif ?

Vous voudrez être patient avec nous dans cette section, car nous devrons obtenir des informations techniques dans certains domaines. De plus, le concept de SVG peut prêter à confusion.

Les graphiques vectoriels évolutifs n'existent pas (en quelque sorte). En fait, il ne s'agit pas du tout d'un graphique ou d'une image, mais d'une forme de langage de balisage extensible (XML). Pour ceux qui ne le savent pas, il s'agit d'un frère proche du HTML mais sans certains des aspects de ce langage (comme les balises prédéfinies).

À titre de comparaison, vous comprenez peut-être déjà, réfléchissez à la façon dont vous pouvez créer des formes à l'aide de CSS. C'est quelque chose dont nous parlerons plus en détail sous peu. Eh bien, imaginez ce CSS intégré dans un wrapper de document que vous appelez en utilisant un format et une structure de fichier standard ( image.svg , par exemple).

Il est plus exact de dire que, comme HTML fournit un cadre pour définir les en-têtes, les paragraphes, les sections, les listes, etc., SVG fournit le cadre pour définir des formes telles que des cercles et des rectangles. Cependant, cela n'explique toujours pas pourquoi nous avons (et avons parfois besoin) du format SVG. Nous en reparlerons ensuite.

Pourquoi nous avons des SVG

Avant les SVG, vous utilisiez les PNG pour afficher les graphiques. Les premières images sur le Web peuvent être des GIF, mais en général, les PNG sont le format d'image dominant. La question n'est pas tant : "Pourquoi avons-nous des SVG ?", mais plutôt "Que manque-t-il aux formats d'image actuels qu'un SVG résoudra ?" La réponse est : dynamisme.

Si vous regardez les principaux formats d'image Web, deux ne conviennent pas vraiment aux graphiques créés (JPEG et GIF). Cela laisse les PNG à la charge. Cependant, les PNG souffrent de quelques problèmes qui ne sont apparents que maintenant pour le Web moderne :

• Ils sont statiques, en ce sens que vous créez l'image hors ligne et que vous l'exportez dans ce format particulier. Cela signifie qu'il est quelque peu inflexible.
• Par extension, vous ne pouvez pas changer le 'maquillage' de l'image. Étant donné que nous avons un certain nombre d'appareils à créer et à afficher, vous devez parfois vous adapter à ces "fenêtres". Faites l'effort dont vous avez besoin pour créer toutes les tailles de logo uniquement pour les ordinateurs de bureau et les principaux appareils mobiles à l'aide de PNG.
• Bien que les PNG puissent être légers, il est de la responsabilité du concepteur et du propriétaire du site de s'assurer que l'optimisation de l'image a lieu. Un PNG peut être lourd, parfois plus d'un mégaoctet, sans aucune optimisation.

De plus, les PNG ont comblé une partie d'une lacune à une époque où il y avait peu d'options qui pouvaient fournir une qualité d'image suffisamment élevée. À l'époque, CSS en était à ses balbutiements et nous n'avions pas encore la portée de conception et de développement que nous avons maintenant.

Par exemple, nous ne pouvons utiliser la propriété border-radius que depuis 2010. Cela vous permet de définir des bords arrondis et même des cercles. Vous le verrez souvent en action sur les boutons :

Vous utiliserez CSS pour créer des formes qui peuvent être mises à l'échelle et s'adapter à l'écran, mais les graphiques vectoriels évolutifs peuvent faire plus. En fait, vous vous tournerez maintenant vers les SVG plutôt que vers les CSS pour ce faire, bien qu'ils ne soient pas non plus une solution miracle.

Les avantages des graphiques vectoriels évolutifs

Comme tous les autres formats d'image, les graphiques vectoriels évolutifs ne sont pas parfaits. Il y a beaucoup de points positifs, bien sûr :

• Un SVG s'adapte aux dimensions d'un appareil, souvent sans autre intervention de votre part. Cela réduit votre temps de développement ou de création.
• Le fichier associé à une image est petit, car vous n'avez besoin que d'un seul SVG. En revanche, un logo PNG doit proposer plusieurs tailles et dimensions différentes. Cela prend de l'espace sur le serveur.
• De plus, les SVG sont plus performants que les PNG, car vous n'avez besoin de charger qu'un seul fichier pour un coût de plusieurs kilo-octets. Ce paquet de fichiers PNG peut atteindre plusieurs mégaoctets en fonction de leur qualité, de leur quantité et de leur optimisation.

Dans l'ensemble, vous pouvez faire plus avec les SVG que n'importe quel autre format d'image. Un développeur et un graphiste peuvent tous deux créer des SVG, soit par code, soit en exportant une création typique à partir d'une application de dessin dédiée. Parce qu'ils sont plus étroitement liés au développement du Web, leur adoption est en augmentation.

Les inconvénients des graphiques vectoriels évolutifs

Cependant, tout n'est pas rose. Les SVG ont encore quelques problèmes dont vous voudrez être conscient :

• La technologie se développe, contrairement à la plupart des autres aspects fondamentaux du Web. Parce que beaucoup de gens attendent beaucoup des graphiques vectoriels évolutifs, il y a un "écart" entre ce que vous pouvez faire et ce que vous voulez faire.
• Bien que la prise en charge de base de SVG soit disponible dans la plupart des navigateurs, l'ensemble complet des fonctionnalités n'est toujours pas disponible selon le navigateur que vous utilisez. Encore une fois, les SVG ont plus de potentiel qui n'est pas encore apparent : nous avons besoin d'une meilleure prise en charge des navigateurs pour des fonctionnalités plus avancées afin de voir de quoi le format est capable.
• Dans certains cas, vous pourriez trouver que les images SVG sont moins précises ou simplement fausses. En effet, vous devez vous fier au chargement d'un site comme vous vous en doutez. Si vous vous souvenez d'un moment où vous avez dû recharger une page Web à cause d'erreurs, imaginez que cela se produise uniquement avec vos images SVG.

Nous dirions également qu'il est également plus difficile de créer des SVG sans connaissances en codage dans certains cas. Il existe une bien meilleure prise en charge dans les programmes graphiques tels que Affinity Designer et Adobe Illustrator. L'exportation SVG est également prise en charge dans des applications telles que Google Drawing :

C'est un domaine qui s'améliore, mais qui reste légèrement en retrait par rapport aux autres formats d'image.

Malgré ces inconvénients, vous pouvez les atténuer. Certes, pour une utilisation de base, vous pouvez les mettre en œuvre presque immédiatement. En fait, WordPress offre même ce support en quelques étapes, et nous en discuterons ensuite.

Comment utiliser les SVG sur votre site WordPress

La mauvaise nouvelle est que si vous souhaitez télécharger un SVG sur WordPress sans aucun travail, vous ne pourrez pas le faire. Un problème supplémentaire avec la prise en charge actuelle des graphiques vectoriels évolutifs est que WordPress ne vous permet pas de télécharger ces images en standard pour des raisons de sécurité :

Les raisons dépassent le cadre de cet article. En bref, étant donné que le format SVG est un document plutôt qu'une image réelle, un utilisateur malveillant pourrait créer des attaques potentielles par script. Cela signifie que vous devrez trouver une alternative plus sûre.

Ailleurs sur le Web, vous trouverez des instructions pour ajouter du code à votre fichier functions.php afin d'activer les téléchargements SVG. Cependant, nous n'allons pas passer par cette étape car nous ne pouvons pas garantir qu'elle est sécurisée. Au lieu de cela, vous pouvez faire ce que vous feriez souvent avec WordPress : vous tourner vers un plugin. Nous recommandons le support SVG :

Une fois que vous avez installé et activé le plugin, dirigez-vous vers l'écran Paramètres > Support SVG dans WordPress. Cela vous montrera quelques écrans, mais il vous suffit de cocher la case Restreindre aux administrateurs ? case à cocher dans le panneau Paramètres.

Par défaut, le plugin permettra à tous les utilisateurs de télécharger des SVG. Cela pourrait être une mauvaise nouvelle en raison des problèmes de sécurité inhérents, et c'est exactement pourquoi WordPress ne vous permet pas de télécharger ces fichiers en premier lieu. Cependant, si vous cochez cette case, le plugin limitera le téléchargement aux administrateurs du site uniquement, tout en rendant l'utilisation des SVG plus sécurisée en standard.

En résumé

Il existe de nombreuses façons d'afficher des images sur le Web, et la plupart des gens ne réfléchissent pas à deux fois au format qu'ils utilisent. Cependant, si vous prenez le temps d'adapter le format au besoin, vous obtiendrez des images détaillées et nettes qui seront superbes sur tous les écrans.

Au cours de cet article, nous avons proposé de nombreuses informations sur les graphiques vectoriels évolutifs. Vous utiliserez CSS pour adapter l'image à vos besoins, et les possibilités de manipulation sont bien plus grandes que les PNG et JPEG. De plus, ils sont légers, donc parfaits pour les petits écrans et les mauvaises connexions Internet.

Voulez-vous utiliser des graphiques vectoriels évolutifs sur votre site Web, et si oui, cet article vous aidera-t-il ? Faites-nous savoir dans la section commentaires ci-dessous!

Crédit image : GDJ.