SVG signifie Scalable Vector Graphics.
SVG est un format basé sur XML pour dessiner des images vectorielles. Il est utilisé pour dessiner des images vectorielles bidimensionnelles.
Voici les principales fonctionnalités de SVG -
SVG, Scalable Vector Graphics est un langage basé sur XML pour définir des graphiques vectoriels.
SVG est destiné à afficher des images sur le Web.
Étant des images vectorielles, les images SVG ne perdent jamais de qualité, peu importe la façon dont elles sont agrandies ou redimensionnées.
Les images SVG prennent en charge l'interactivité et l'animation.
SVG est une norme W3C.
D'autres formats d'image comme les images raster peuvent également être matraqués avec des images SVG.
SVG s'intègre bien avec XSLT et DOM de HTML.
Voici les avantages de l'utilisation d'images SVG -
Utilisez n'importe quel éditeur de texte pour créer et éditer des images SVG.
Étant basées sur XML, les images SVG sont consultables, indexables et peuvent être scriptées et compressées.
Les images SVG sont hautement évolutives car elles ne perdent jamais de qualité, peu importe la façon dont elles sont agrandies ou redimensionnées.
Bonne qualité d'impression quelle que soit la résolution.
SVG est un standard ouvert.
Voici les inconvénients de l'utilisation d'images SVG -
La taille du format texte est plus grande que celle des images raster au format binaire.
La taille peut être grande même pour une petite image.
La balise 'rect' de SVG est utilisée pour dessiner un rectangle.
La balise 'cercle' de SVG est utilisée pour dessiner un cercle.
La balise 'ellipse' de SVG est utilisée pour dessiner une ellipse.
La balise 'line' de SVG est utilisée pour tracer une ligne.
La balise 'polygon' de SVG est utilisée pour dessiner une forme fermée composée de lignes droites connectées.
La balise 'polyline' de SVG est utilisée pour dessiner une forme ouverte composée de lignes droites connectées.
La balise 'path' de SVG est utilisée pour dessiner n'importe quel chemin.
La balise 'text' de SVG est utilisée pour dessiner du texte.
L'attribut 'x' de la balise text de SVG représente les coordonnées de l'axe x des glyphes.
L'attribut 'y' de la balise text de SVG représente les coordonnées de l'axe y des glyphes.
L'attribut 'dx' de la balise text de SVG représente le décalage avec l'axe des x.
L'attribut 'dy' de la balise text de SVG représente le décalage avec l'axe y.
L'attribut 'rotation' de la balise text de SVG définit la rotation à appliquer à tous les glyphes.
L'attribut 'textlength' de la balise text de SVG définit la longueur de rendu du texte.
La propriété 'stroke' définit la couleur du texte, de la ligne ou du contour de n'importe quel élément.
La propriété 'stroke-width' définit l'épaisseur du texte, de la ligne ou du contour de n'importe quel élément.
La propriété 'stroke-linecap' définit différents types de fin de ligne ou de contour de n'importe quel chemin.
Propriété 'stroke-dasharray' utilisée pour créer des lignes pointillées.
SVG utilise l'élément <filter> pour définir les filtres. L'élément <filter> utilise un attribut id pour l'identifier de manière unique. Les filtres sont définis dans les éléments <def> puis sont référencés par les éléments graphiques par leurs identifiants.
SVG fournit un riche ensemble de filtres. Voici la liste des filtres couramment utilisés -
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
SVG utilise l'élément <pattern> pour définir des motifs. Les motifs sont définis à l'aide de l'élément <pattern> et sont utilisés pour remplir les éléments graphiques en mosaïque.
Le dégradé fait référence à une transition en douceur d'une couleur à une autre couleur dans une forme. SVG fournit deux types de dégradés -
Gradients linéaires
Dégradés radiaux
Les dégradés linéaires représentent la transition linéaire d'une couleur à une autre d'une direction à une autre. Il est défini à l'aide de l'élément <linearGradient>.
Les dégradés radiaux représentent la transition circulaire d'une couleur à une autre d'une direction à une autre. Il est défini à l'aide de l'élément <radialGradient>.
Oui! Les images SVG peuvent être adaptées aux actions de l'utilisateur. SVG prend en charge les événements de pointeur, les événements de clavier et les événements de document.
Oui! SVG prend en charge les fonctions JavaScript / ECMAScript. Le bloc de script doit être dans le bloc CDATA, prendre en compte la prise en charge des données de caractères dans XML.
Oui! Les éléments SVG prennent en charge les événements de souris, les événements de clavier. Nous avons utilisé l'événement onClick pour appeler une fonction javascript.
Dans les fonctions javascript, le document représente un document SVG et peut être utilisé pour obtenir les éléments SVG.
Dans les fonctions javascript, l'événement représente l'événement actuel et peut être utilisé pour obtenir l'élément cible sur lequel l'événement a été déclenché.
L'élément <a> est utilisé pour créer un lien hypertexte. L'attribut "xlink: href" est utilisé pour passer l'IRI (Internationalized Resource Identifiers) qui est complémentaire de l'URI (Uniform Resource Identifiers).
L'image SVG peut être intégrée en utilisant les méthodes suivantes -
utilisation de la balise incorporée
utilisation de la balise d'objet
en utilisant iframe
La balise 'rect' de SVG est utilisée pour dessiner un rectangle. Voici les attributs couramment utilisés -
x- coordonnée en abscisse du coin supérieur gauche du rectangle. La valeur par défaut est 0.
y- coordonnée sur l'axe des y en haut à gauche du rectangle. La valeur par défaut est 0.
width - largeur du rectangle.
height - hauteur du rectangle.
rx - utilisé pour arrondir le coin du rectangle arrondi.
ry - utilisé pour arrondir le coin du rectangle arrondi.
Exemple -
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >La balise 'cercle' de SVG est utilisée pour dessiner un cercle. Voici les attributs couramment utilisés -
cx- coordonnée en abscisse du centre du cercle. La valeur par défaut est 0.
cy- coordonnée sur l'axe des y du centre du cercle. La valeur par défaut est 0.
r - rayon du cercle.
Exemple -
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >La balise 'ellipse' de SVG est utilisée pour dessiner une ellipse. Voici les attributs couramment utilisés -
cx- coordonnée en abscisse du centre de l'ellipse. La valeur par défaut est 0.
cy- coordonnée sur l'axe des y du centre de l'ellipse. La valeur par défaut est 0.
rx - rayon de l'axe x de l'ellipse.
ry - rayon de l'axe y de l'ellipse.
Exemple -
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La balise 'line' de SVG est utilisée pour tracer une ligne. Voici les attributs couramment utilisés -
x1- coordonnée sur l'axe des x du point de départ. La valeur par défaut est 0.
y1- coordonnée sur l'axe des y du point de départ. La valeur par défaut est 0.
x2- coordonnée sur l'axe des x du point final. La valeur par défaut est 0.
y2- coordonnée sur l'axe des y du point final. La valeur par défaut est 0.
Exemple -
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La balise 'polygon' de SVG est utilisée pour dessiner un polygone. Voici l'attribut couramment utilisé -
points - Liste de points pour constituer un polygone.
Exemple -
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La balise 'polyline' de SVG est utilisée pour dessiner un polygone ouvert. Voici l'attribut couramment utilisé -
points - Liste de points pour constituer un polygone.
Exemple -
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">La balise 'path' de SVG est utilisée pour dessiner un chemin d'écoulement libre. Voici l'attribut couramment utilisé -
d - données de chemin, généralement un ensemble de commandes comme moveto, lineto, etc.
Exemple -
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">La commande M de l'élément de chemin se déplace d'un point à un autre point.
La commande L de l'élément path crée une ligne.
La commande H de l'élément path crée une ligne horizontale.
La commande V de l'élément de chemin crée une ligne verticale.
La commande C de l'élément de chemin crée une courbe.
La commande S de l'élément de chemin crée une courbe lisse.
La commande Q de l'élément de chemin crée une courbe de Bézier quadratique.
La commande T de l'élément de trajectoire crée une courbe de Bézier quadratique lisse.
Une commande d'élément de chemin crée un arc elliptique.
La commande Z de l'élément de chemin ferme le chemin.
Lorsque les commandes sont en majuscules, elles représentent le chemin absolu. Dans le cas où leurs commandes en minuscules sont utilisées, le chemin relatif est utilisé.