Qu'est-ce que le SVG ? Un guide du débutant

SVG signifie Scalable Vector Graphics (Graphiques Vectoriels Évolutifs). C'est un format d'image utilisé pour représenter des graphiques avec des formes, des lignes, des courbes et d'autres instructions graphiques plutôt que de s'appuyer uniquement sur une grille fixe de pixels.

Parce que les graphiques SVG sont décrits à l'aide d'informations vectorielles, ils peuvent généralement être agrandis ou réduits beaucoup plus sans devenir flous ou pixellisés. Le SVG est également basé sur XML, ce qui signifie que les informations utilisées pour construire le graphique sont stockées sous forme de texte que les ordinateurs et les navigateurs peuvent interpréter.

Cela rend le SVG particulièrement utile pour les logos, les icônes, les illustrations, les diagrammes et d'autres graphiques qui doivent rester nets à différentes tailles.

Mais il y a une distinction importante :

Placer une image dans un fichier SVG ne fait pas nécessairement de cette image un véritable vecteur.

Si vous convertissez un PNG ou un JPG en SVG, l'image d'origine basée sur des pixels doit généralement être vectorisée afin que ses caractéristiques visibles soient recréées sous forme de formes et de chemins vectoriels.

Décomposons ce que cela signifie.

Que signifie SVG ?

SVG = Scalable Vector Graphics (Graphiques Vectoriels Évolutifs).

Chaque partie du nom décrit une caractéristique importante du format :

• Scalable (Évolutif) signifie que le graphique peut changer de taille sans être lié à une résolution de pixels fixe.
• Vector (Vectoriel) signifie que le graphique peut être représenté à l'aide de chemins, de formes, de coordonnées et de courbes plutôt que seulement de pixels.
• Graphics (Graphiques) fait simplement référence au contenu visuel affiché.

Le SVG a été développé en tant que norme web ouverte par le World Wide Web Consortium (W3C) et est basé sur XML. Le format est conçu pour les graphiques bidimensionnels et peut fonctionner avec des technologies web telles que CSS et JavaScript.

Un fichier SVG typique se termine par : .svg

Par exemple : logo.svg, icon.svg, illustration.svg

Comment fonctionne un fichier SVG ?

Pour comprendre le SVG, il est utile de le comparer à une photographie normale.

Un JPG ou PNG stocke généralement une image en utilisant une grille de minuscules carrés colorés appelés pixels.

Un SVG peut à la place décrire des instructions telles que :

• dessiner un cercle ici ;
• créer une ligne entre ces points ;
• remplir cette forme en bleu ;
• donner à ce chemin un contour noir ;
• dessiner une courbe entre ces coordonnées.

Le navigateur ou le programme graphique lit ces instructions et rend l'image.

Un cercle SVG très simple pourrait contenir un balisage tel que :

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Au lieu de stocker une photographie d'un cercle bleu pixel par pixel, le fichier décrit essentiellement comment dessiner le cercle. Le SVG prend en charge les éléments graphiques, notamment les rectangles, les cercles, les ellipses, les lignes, les polygones, les chemins, les dégradés et d'autres effets. C'est la raison fondamentale pour laquelle le SVG se comporte différemment de formats tels que PNG et JPEG.

SVG vs Images Raster : Quelle est la différence ?

Les images numériques peuvent généralement être représentées sous forme de graphiques raster ou de graphiques vectoriels.

Les images raster ont une résolution de pixels spécifique. Si vous les agrandissez bien au-delà de leurs dimensions d'origine, les pixels individuels deviennent plus visibles.

Les graphiques vectoriels fonctionnent différemment car leurs formes peuvent être recalculées lorsque l'image change de taille. Adobe décrit le SVG comme un format vectoriel dont la taille peut être considérablement modifiée sans perdre le type de qualité normalement perdu lors de l'agrandissement de graphiques raster.

Pourquoi les images SVG peuvent-elles être mises à l'échelle sans perdre en qualité ?

Imaginez dessiner un cercle de deux manières différentes.

Avec une image raster, vous pourriez stocker des milliers de pixels individuels qui, ensemble, ressemblent à un cercle.

Avec une image vectorielle, vous pourriez stocker à la place des instructions décrivant :

• le centre du cercle ;
• son rayon ;
• sa couleur de remplissage ;
• sa bordure.

Si le cercle doit devenir dix fois plus grand, le programme n'a pas besoin d'étirer les pixels d'origine. Il peut simplement rendre la forme mathématique aux nouvelles dimensions. Cette propriété est souvent appelée indépendance de la résolution.

C'est pourquoi un logo vectoriel correctement créé peut être utilisé sur une petite icône de site Web, puis agrandi pour un design beaucoup plus grand sans développer les bords en blocs associés aux images raster agrandies.

À quoi servent les fichiers SVG ?

Le SVG fonctionne particulièrement bien lorsqu'une image se compose de formes, de lignes, de contours ou de zones de couleur relativement distinctes reconnaissables.

Logos

Les logos doivent souvent apparaître dans de nombreuses tailles différentes. Le même logo peut être utilisé dans un en-tête de site Web, une interface mobile, une présentation, des supports imprimés, de la signalétique ou des graphiques marketing. L'utilisation d'illustrations vectorielles facilite grandement le redimensionnement sans avoir à recréer le logo pour chaque taille.

Icônes

Les icônes d'interface sont un autre cas d'utilisation courant du SVG. Les formes et chemins simples peuvent rester nets sur des écrans avec différentes tailles et densités de pixels.

Illustrations

Les illustrations plates, les dessins au trait et les graphiques aux formes clairement définies peuvent très bien fonctionner comme fichiers SVG.

Graphiques et diagrammes

Parce que le SVG peut contenir des éléments graphiques individuels et du texte, il peut être utile pour les diagrammes, les graphiques et autres graphiques structurés. Les éléments SVG peuvent également être stylisés et manipulés à l'aide de technologies Web.

Motifs de découpe et d'artisanat

Le SVG est également couramment utilisé dans les flux de travail où les logiciels ont besoin de contours ou de chemins réels plutôt que d'une simple image de ces contours. Par exemple, les chemins vectoriels peuvent être utiles lors de la préparation d'illustrations appropriées pour la découpe, la gravure et d'autres flux de travail de conception similaires. Les exigences exactes dépendent du logiciel et de la machine utilisés.

Avantages des fichiers SVG

1. Les SVG peuvent se mettre à l'échelle sans pixellisation raster normale : C'est l'avantage le plus connu du SVG. Lorsqu'un SVG se compose de chemins et de formes vectoriels appropriés, le graphique peut être rendu à différentes dimensions sans s'appuyer sur une grille de pixels fixe.
2. Les éléments individuels peuvent être modifiés : Un SVG correctement structuré peut contenir des chemins, des formes, des remplissages, des contours, des groupes et des éléments de texte séparés. Cela rend les illustrations vectorielles beaucoup plus faciles à modifier qu'une seule image raster aplatie.
3. Le SVG est basé sur du texte : Le SVG utilise le balisage XML pour décrire le contenu graphique. Cela signifie qu'un SVG peut être inspecté et modifié à l'aide d'outils basés sur du texte ainsi que d'éditeurs vectoriels visuels.
4. Le SVG fonctionne bien sur le Web : Le SVG a été spécifiquement conçu pour fonctionner avec les technologies Web. Il peut être affiché sous forme d'image et peut interagir avec CSS et JavaScript.
5. Le SVG peut être efficace pour les graphiques simples : Une icône ou un logo simple peut souvent être représenté efficacement comme une petite collection de chemins et de formes. Cependant, les illustrations vectorielles complexes peuvent produire des fichiers volumineux.

Limites des fichiers SVG

Le SVG est puissant, mais ce n'est pas le bon format pour chaque image.

Le SVG n'est généralement pas le meilleur format pour les photographies

Une photographie peut contenir des millions de changements subtils de couleur, d'éclairage et de texture. Essayer de recréer chaque détail sous forme de formes vectorielles individuelles peut entraîner des illustrations extrêmement compliquées.

Les SVG complexes peuvent contenir trop de chemins

Les logiciels de vectorisation peuvent recréer des images raster détaillées en utilisant un grand nombre de chemins et de points d'ancrage. Le résultat peut techniquement être vectoriel, mais il peut être difficile à modifier et inutilement complexe.

Chaque fichier SVG est-il vraiment un vecteur ?

Non. Un fichier SVG peut contenir des graphiques vectoriels, des images raster ou une combinaison des deux. La spécification SVG prend explicitement en charge les graphiques mixtes vecteurs/raster.

Cela crée l'une des plus grandes idées fausses autour de la conversion PNG vers SVG. Supposons que vous ayez logo.png. Le simple fait de placer ce PNG à l'intérieur d'un conteneur SVG peut vous donner logo.svg, mais le logo visible peut encore fondamentalement être la même image en pixels. Vous avez maintenant un fichier SVG, mais vous n'avez peut-être pas d'illustration correctement vectorisée.

Un véritable flux de travail raster-vers-vecteur tente de recréer les caractéristiques de l'image raster à l'aide d'éléments vectoriels. Les utilisateurs signalent fréquemment avoir exporté des fichiers qu'ils croyaient être des vecteurs pour découvrir que la sortie ne contenait pas de géométrie modifiable.

Comment savoir si un SVG est vraiment vectorisé ?

L'ouverture du fichier dans un éditeur vectoriel est un moyen utile de l'inspecter. Avec des illustrations correctement vectorisées, vous devriez normalement pouvoir sélectionner des composants vectoriels tels que des chemins, des formes ou des nÅ“uds.

Si l'ensemble de la conception se comporte comme une seule image bitmap intégrée, le SVG peut simplement contenir une illustration raster plutôt qu'une recréation vectorielle utile.

Un autre test simple est le zoom extrême. Un chemin vectoriel devrait continuer à être rendu à partir de sa géométrie sous-jacente plutôt que de révéler la grille de pixels agrandie d'une image raster intégrée.

Comment convertir PNG ou JPG en SVG ?

C'est là que la vectorisation d'image devient importante.

Les fichiers PNG et JPG sont des formats raster. Le SVG peut représenter des chemins et des formes vectoriels. Par conséquent, la production d'un véritable SVG vectoriel à partir d'un PNG ou d'un JPG implique généralement l'interprétation de l'image raster et la recréation de sa structure visuelle sous forme de géométrie vectorielle. Ce processus est communément appelé vectorisation d'image, conversion raster-vers-vecteur ou traçage d'image.

Vous pouvez utiliser notre convertisseur PNG vers SVG en ligne gratuit pour gérer ce processus automatiquement.

Foire Aux Questions

Réflexions finales

Le SVG est plus qu'une simple autre extension d'image. Il s'agit d'un format graphique basé sur XML capable de décrire des images à l'aide de chemins, de formes, de texte et d'autres éléments graphiques évolutifs. Cela le rend particulièrement utile pour les logos, les icônes, les illustrations et les graphiques qui doivent fonctionner sur différentes tailles.

La chose la plus importante à retenir est la suivante : SVG est le format. La vectorisation est le processus qui peut transformer une image raster en illustration vectorielle stockée dans ce format.