Qu'est-ce qu'un fichier SVG ? 5 choses à savoir

Qu'est-ce qu'un fichier SVG ? Pendant que vous travaillez sur la conception d'un site Web WordPress aussi convivial que possible, vous rencontrerez probablement des problèmes avec les images. surtout en ce qui concerne la résolution de l'image. Et il est important d'obtenir une bonne qualité d'image car moins de choses semblent plus amateur sur une page Web qu'une photo ou un logo déformé et mal mis à l'échelle.

Les exigences de conception réactive ne font qu'aggraver les problèmes que nous rencontrons avec les images et l'évolutivité. Les utilisateurs du site consultent votre contenu sur toutes sortes d'appareils différents. Et à cause de cela, vos images doivent être entièrement optimisées pour chaque appareil.

Dans cet article, nous verrons ce qu'il faut pour avoir un format de fichier qui facilite l'obtention d'images impeccables, quelle que soit leur taille, avec des fichiers SVG.

La bonne nouvelle est que quelqu'un l'a déjà fait. Et c'est la réponse à la question « qu'est-ce qu'un fichier SVG ? Un fichier SVG est une solution parfaite pour toutes les images non photographiques sur votre site WordPress.

Un fichier SVG générera des graphiques parfaitement nets à n'importe quelle échelle et sera entièrement optimisé pour tous les moteurs de recherche.

Ce sont aussi :

• Taille de fichier plus petite que les autres formats de fichiers image
• Programmable
• Capable d'animations dynamiques

Et il y a encore plus à décompresser sur les fichiers SVG que vous ne le pensez.

Qu'est-ce qu'un fichier SVG ?

SVG signifie fichier graphique vectoriel évolutif. Il s'agit d'un type de fichier utilisé pour afficher des images en deux dimensions sur le Web.

Contrairement aux autres formats de fichiers standard pour les images, SVG stocke les images dans un format vectoriel composé de lignes, de points, de formes et de courbes basées sur des formules mathématiques.

Mais qu'est-ce qu'un graphique vectoriel exactement ?

Vecteur vs raster

Les images que vous voyez sur Internet aujourd'hui peuvent être divisées en deux catégories distinctes : les graphiques vectoriels et les graphiques matriciels. Vous connaissez sans doute déjà les fichiers image JPEG et PNG. Ceux-ci sont tous deux créés en tant que formats graphiques raster.

Le format raster fait référence aux fichiers image qui stockent les informations sur l'image dans une grille appelée bitmap. Les carrés individuels d'un bitmap se combinent pour nous montrer une image reconnaissable, un peu comme les pixels sur votre écran de télévision ou d'ordinateur.

Un graphique raster est idéal pour les images photographiques incroyablement détaillées, dans lesquelles la couleur exacte de chaque pixel individuel doit être spécifiée de manière unique. Ces types d'images ont une résolution fixe, ce qui signifie que lorsque vous augmentez la taille de l'image, la qualité de l'image est réduite.

Les PDF et SVG sont des formats graphiques vectoriels et fonctionnent de manière très différente. Ils stockent les images sous forme de points individuels et de lignes entre ces points. Les formules mathématiques permettent de déterminer la forme et l'emplacement des lignes et des points tout en maintenant la relation spatiale lorsque les images sont réduites ou agrandies.

Les graphiques vectoriels sont capables de stocker des informations sur les couleurs et peuvent afficher du texte.

Comment fonctionne un fichier SVG ?

Un fichier SVG est toujours écrit dans un code appelé XML. Il s'agit d'un langage de balisage courant utilisé pour transférer et stocker des informations numériques. Le code XML dans les fichiers SVG spécifie plusieurs éléments importants, notamment :

• Couleurs
• Formes
• Le texte dans une image

Lorsqu'un navigateur Web (ou toute autre application) traite un fichier SVG, il prend les informations XML, les traite, puis les affiche sous forme d'image vectorielle sur l'écran de l'utilisateur.

Quels sont les avantages d'utiliser des fichiers SVG ?

Les fichiers SVG sont non seulement pratiques mais aussi extrêmement puissants pour une utilisation dans la conception Web WordPress. Voici pourquoi:

Les fichiers SVG ont une évolutivité infinie

Un fichier SVG peut être redimensionné à n'importe quelle taille sans perte de qualité d'image. La taille d'un fichier SVG n'a pas d'importance, car ils auront le même aspect, quelle que soit leur taille sur votre site Web.

Et cette évolutivité est importante. Après tout, la taille des images sera différente pour chaque visualisation, en fonction de l'appareil utilisé, de la taille de la fenêtre de leur navigateur et de la disposition générale de votre site.

Quoi qu'il en soit, les images de votre site WordPress doivent apparaître entièrement rendues à tous vos utilisateurs. Et l'utilisation de fichiers SVG pour vos images facilite grandement cette tâche.

Lorsque vous avez besoin d'agrandir ou de réduire la taille d'un fichier SVG, le programme qui le lit réajustera les lignes et les points afin que les couleurs unies et les limites claires restent exactement là où elles devraient être.

En revanche, les fichiers d'image raster auront l'air pixélisés lorsqu'ils seront agrandis à des tailles plus grandes sur l'écran d'un utilisateur. En fin de compte, les images raster ne sont tout simplement pas conçues pour une mise à l'échelle efficace.

Il existe cependant un compromis avec une meilleure évolutivité. De par sa conception, un fichier SVG n'a pas la qualité et les détails supérieurs offerts par les images raster. Vous ne pouvez transmettre qu'une quantité limitée d'informations visuelles dans un système vectoriel, alors qu'un fichier construit au format raster affichera ses images avec autant de détails que le bitmap le permet.

Gardez à l'esprit qu'une tentative de transformer une photographie détaillée enregistrée au format PNG en un vecteur entraînera un fichier SVG énorme et inutilisable.

Cela signifie que les deux types de fichiers image ont une place unique dans la conception Web WordPress. Utilisez des fichiers JPEG et PNG (ou d'autres formats raster) pour vos photographies, et des fichiers SVG pour les images moins détaillées.

Personnalisation de la conception

Les fichiers SVG permettent aux développeurs et concepteurs WordPress d'avoir beaucoup plus de contrôle sur l'apparence de leurs sites Web. Plutôt que de modifier directement les fichiers dans l'éditeur de texte, utilisez simplement l'un des nombreux programmes d'édition compatibles SVG pour modifier :

• Couleurs
• Texte
• Formes vectorielles
• Effets visuels
• Ombres et dégradés

Compatibilité pour les scripts

Développés par le World Wide Web Consortium en tant que format standard pour les graphiques Internet, les fichiers SVG sont conçus pour bien communiquer avec d'autres conventions Web, telles que :

• CSS
• HTML
• Javascript

En raison de cette compatibilité de conception, les images enregistrées au format de fichier SVG peuvent être contrôlées à l'aide de scripts. Et cela ouvre la porte à un large éventail de possibilités pour un affichage dynamique, y compris des images adaptées aux mobiles, des graphiques dynamiques et des animations.

Cela ne peut pas être fait avec des images PNG ou JPEG.

Accessibilité et référencement

Un fichier SVG est une heure texte. Cela vous donne des avantages distincts par rapport aux formats PNG, JPEG et autres formats d'image raster.

Tout d'abord, les programmeurs sont capables de regarder le code XML et de le comprendre immédiatement. Mais au-delà de cela, lorsque les fichiers SVG contiennent du texte, les informations de texte sont stockées sous forme de texte littéral (et non de formes). Pour cette raison, les fichiers SVG peuvent être interprétés par des lecteurs d'écran, ce qui aide les personnes qui ne peuvent pas interagir avec le contenu numérique de manière traditionnelle.

Mais plus encore, les fichiers SVG peuvent être facilement indexés par Google et d'autres moteurs de recherche. En plaçant une infographie avec beaucoup de texte (ou un autre affichage SVG) sur une page Web, l'inclusion de mots-clés dans l'image améliorera le classement de votre page et augmentera votre référencement.

Les fichiers image JPEG et PNG sont limités au texte alternatif et aux métadonnées en ce qui concerne l'évolutivité SEO.

Tailles de fichiers plus gérables

Les SVG sont capables de stocker vos images beaucoup plus efficacement que les formats raster, à condition que l'image que vous utilisez ne soit pas inondée de trop de détails.

Ils contiennent suffisamment d'informations pour afficher les vecteurs à n'importe quelle échelle, tandis que les fichiers d'images bitmap nécessitent des fichiers de plus grande taille pour les images dont la taille est agrandie.

La petite taille physique des fichiers SVG est idéale pour les propriétaires de sites Web WordPress, car les petits fichiers image se chargent beaucoup plus rapidement sur les navigateurs Web. Et lorsque vous utilisez plus de fichiers SVG que de JPEG et de PNG, vous contribuez à augmenter les performances globales de votre site.

N'oubliez pas que vous ne devez pas convertir toutes les images de votre site en fichiers SVG. Les photographies très détaillées doivent rester au format JPEG ou PNG.

Pourquoi utiliser les fichiers SVG ?

Ces types de fichiers fonctionneront mieux sur des images moins détaillées qu'une photographie standard. Examinons les utilisations en ligne les plus courantes des fichiers image SVG.

Icônes

Presque toutes les icônes se traduiront bien en images vectorielles car elles ont des bordures clairement définies et sont relativement simples.

Les icônes des éléments tels que les boutons doivent également être adaptées à la taille des différents écrans, ce qui signifie qu'elles doivent être évolutives.

Logos de sites

SVG convient parfaitement aux logos qui apparaissent dans l'en-tête de votre site, les e-mails et les imprimés. Les logos sont normalement de conception assez simple, ce qui les rend parfaits pour le format SVG.

Illustrations

L'art visuel non photo et les vecteurs sont un match fait au paradis.

Ces types de dessins sur votre site Web seront facilement mis à l'échelle tout en économisant de l'espace de fichier lorsque vous les convertirez en SVG.

Éléments d'interface et animations

Lorsque vous exploitez les capacités de JavaScript et de CSS, vous pourrez configurer vos fichiers SVG pour qu'ils changent dynamiquement d'apparence. Ils peuvent être automatiquement déclenchés ou configurés pour changer après un événement déclencheur que vous choisissez.

Un SVG animé ajoute une touche visuelle indispensable à votre site Web ou peut être utilisé pour engager les utilisateurs avec des animations d'interface.

Visualisations de données et infographies

Votre site WordPress bénéficierait-il d'éléments tels que des graphiques illustrés ou des infographies ? Peut-être avez-vous besoin de créer de meilleures images de fonctionnalités WordPress pour rendre votre site plus percutant.

C'est encore une autre application parfaite pour les SVG. Les conceptions seront mises à l'échelle de manière transparente et le texte de chaque fichier SVG est indexable à 100 %.

Comment créer et modifier des fichiers SVG

Pour ouvrir n'importe quel fichier SVG sans le modifier, il vous suffit de l'ouvrir directement dans un navigateur Web, car chaque navigateur est conçu pour afficher parfaitement les SVG. Vous pouvez également prévisualiser les fichiers SVG dans un programme d'édition, que nous aborderons dans une minute.

Lorsque vous souhaitez modifier des fichiers SVG, vous pouvez le faire dans votre éditeur de texte. Cependant, cela n'est pas pratique pour apporter des modifications au-delà de la couleur. Vous devez plutôt utiliser un logiciel spécialisé pour effectuer cette édition.

Il existe des options premium et gratuites, qui incluent :

• Adobe Illustrator
• CorelDRAW
• Microsoft Visio
• GIMP (GNU Image Manipulation Program) - c'est populaire, gratuit et complètement open-source
• Google Docs

Pour commencer à créer des SVG, vous n'aurez pas besoin d'être un expert en XML ou en codage. Tout ce que vous avez à faire est de dessiner vos vecteurs dans l'un de ces programmes, puis de les exporter au format de fichier SVG.

Chaque programme répertorié aura sa propre courbe d'apprentissage et ses limites. Si vous envisagez d'explorer davantage les fichiers SVG, essayez plusieurs des options mentionnées ci-dessus. Obtenez une bonne idée des outils disponibles avant de choisir une option payante ou gratuite pour créer des vecteurs.

Voici un exemple d'utilisation d'Adobe Illustrator pour vectoriser une image :

1. Créez un design unique dans Adobe Illustrator que vous prévoyez de convertir en fichier SVG.
2. Cliquez sur "Image Trace" sur votre design pour le sélectionner. Dans le menu déroulant, accédez à Options avancées. Sélectionnez "Outline View" pour plus de clarté sur les bordures de la conception et pour voir combien de nœuds sont présents.
3. Cliquez sur "Développer" pour transformer le dessin en vecteur.
4. Redimensionnez si nécessaire.
5. Supprimez les nœuds inutiles pour affiner la conception.
6. Dans votre outil "Magic Wand", cliquez sur "Group Selection", puis séparez votre conception terminée de toutes les autres qui se trouvent actuellement sur votre plan de travail.
7. Après avoir sélectionné votre design, cliquez sur Fichier > Exporter > Exporter au format SVG (*.SVG).
8. Dans Options SVG, cliquez sur "Afficher le code" pour afficher le XML. Copiez et collez où bon vous semble.

Les fichiers SVG sont parfaits pour la conception à l'échelle

Qu'est-ce qu'un fichier SVG ? C'est un fichier image qui est très pratique dans de nombreux scénarios de conception Web WordPress différents. Que vous ayez besoin d'agrandir votre logo pour le coller sur un panneau d'affichage ou de le réduire à la taille d'une vignette, le fichier SVG vous assurera de ne pas perdre les détails qui rendent votre logo unique.

Emballer

Un fichier SVG est interactif, polyvalent et très facile à créer avec l'éditeur graphique de votre choix et un peu de compétence en conception.

Avec les fichiers SVG dans votre kit d'outils de conception Web WordPress, vous n'aurez jamais à vous soucier de ces graphiques flous ennuyeux des images de votre site standard.

Bien sûr, pour vos photos très détaillées, il est préférable de s'en tenir aux JPEG et PNG.