Qu’est-ce que SVG ?

SVG (Scalable Vector Graphic), les graphiques vectoriels évolutifs sont des graphiques vectoriels 2D basés sur XML.

Il a l’extension de fichier .svg et est créé en tant que balise HTML, il peut donc être modifié dans l’éditeur de code sans avoir besoin d’un éditeur graphique.

En cas de zoom sur l’image dans l’utilisation de graphiques vectoriels évolutifs, il n’y a pas de dégradation comme dans les formats png et jpeg. Il n’y a aucune perte de qualité lors de l’édition du format graphique vectoriel évolutif (modification des valeurs de largeur et de hauteur). La raison en est que la structure vectorielle est utilisée et que l’image est créée avec du code.

Différence SVG entre les formats de fichiers image

Parmi les trois types d’images différents ci-dessus, les formats PNG et JPG sont pixélisés dans différentes tailles, tandis que le format graphique vectoriel évolutif ne montre aucune distorsion.

Remarque : lorsque les images sont agrandies, la quantité de distorsion peut être vue plus clairement.

Il peut être utilisé sur la page Web dans la taille souhaitée sans aucune distorsion de l’image. Lorsque le format graphique vectoriel évolutif est préféré, il crée moins de charge que les formats png et jpeg. De plus, lors de la création de sites Web, .svg doit être préféré en termes de jeux d’icônes et de performances d’image de logo.

Structure de code graphique vectoriel évolutif

Les codes dans la balise <svg></svg> créent le contenu de l’image,

Qu’est-ce que SVG Viewbox ?

Avec la propriété viewBox, sa position dans le plan x, sa position dans le plan y, sa largeur et sa hauteur sont définies respectivement. Considérant le plan de coordonnées, puisque les valeurs x et y de la propriété viewBox dans l’exemple sont définies sur 0, elle est située en plein milieu.

<circle></circle> etiketinin cx="" özelliği ile x düzlemindeki konumu, cy="" özelliği ile y düzlemindeki konumu, r="" (radius) özelliği ile de yuvarlağın yarıçapı ayarlanır.

La position de la balise <circle></circle> dans le plan x avec la propriété cx="", la position dans le plan y avec la propriété cy="" et le rayon du cercle avec le r="" (rayon ) propriété.

Les références :

https://developer.mozilla.org/en-US/docs/Web/SVG

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images