SVG - Guide rapide
Qu'est-ce que 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.
Avantages
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 comment elles sont agrandies ou redimensionnées
Bonne qualité d'impression quelle que soit la résolution
SVG est un standard ouvert
Désavantages
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.
Exemple
L'extrait XML suivant peut être utilisé pour dessiner un cercle dans le navigateur Web.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>Incorporez le XML SVG directement dans une page HTML.
testSVG.htm
<html>
<title>SVG Image</title>
<body>
<h1>Sample SVG Image</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Dans Internet Explorer, des contrôles ActiveX sont nécessaires pour afficher les images SVG.
Comment SVG s'intègre avec HTML
L'élément <svg> indique le début de l'image SVG.
Les attributs width et height de l'élément <svg> définissent la hauteur et la largeur de l'image SVG.
Dans l'exemple ci-dessus, nous avons utilisé un élément <circle> pour dessiner un cercle.
L'attribut cx et cy représente le centre du cercle. La valeur par défaut est (0,0). L'attribut r représente le rayon du cercle.
Les autres attributs stroke et stroke-width contrôlent le contour du cercle.
L'attribut fill définit la couleur de remplissage du cercle.
La balise de fermeture </svg> indique la fin de l'image SVG.
SVG fournit un certain nombre de formes qui peuvent être utilisées pour dessiner des images. Voici les formes courantes.
| Sr.No. | Type de forme et description |
|---|---|
| 1 | rect Utilisé pour dessiner un rectangle. |
| 2 | cercle Utilisé pour dessiner un cercle. |
| 3 | ellipse Utilisé pour dessiner une ellipse. |
| 4 | ligne Utilisé pour tracer une ligne. |
| 5 | polygone Utilisé pour dessiner une forme fermée composée de lignes droites connectées. |
| 6 | polyligne Utilisé pour dessiner une forme ouverte composée de lignes droites connectées. |
| sept | chemin Utilisé pour dessiner n'importe quel chemin. |
L'élément <text> est utilisé pour dessiner du texte.
Déclaration
Voici la déclaration de syntaxe de <text>élément. Nous n'avons montré que les principaux attributs.
<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing" >
</text>Les attributs
| Sr.No. | Attribut et description |
|---|---|
| 1 | x - coordonnées de l'axe x des glyphes. |
| 2 | y - les coordonnées de l'axe y des glyphes. |
| 3 | dx - décalage le long de l'axe des x. |
| 4 | dy - décalage le long de l'axe y. |
| 5 | rotate - rotation appliquée à tous les glyphes. |
| 6 | textlength - longueur de rendu du texte. |
| sept | lengthAdjust - type d'ajustement avec la longueur rendue du texte. |
Exemple
testSVG.htm<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Texte avec rotation
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Texte multiligne
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="570" height="100">
<g>
<text x="30" y="12" >Multiline Text: </text>
<text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
<tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
<tspan x="30" y="70">We teach just for free.</tspan>
</text>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Texte du lien hypertexte
<html>
<title>SVG Text</title>
<body>
<h1>Sample SVG Text</h1>
<svg width="800" height="800">
<g>
<text x="30" y="10" >Text as Link: </text>
<a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
<text font-family="Verdana" font-size="20" x="30" y="30"
fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
</a>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
SVG prend en charge plusieurs propriétés de trait.
Voici les principales propriétés de trait utilisées.
| Sr.No. | Type de course et description |
|---|---|
| 1 | stroke - définit la couleur du texte, de la ligne ou du contour de tout élément. |
| 2 | stroke-width - définit l'épaisseur du texte, de la ligne ou du contour de tout élément. |
| 3 | stroke-linecap - définit différents types de fin de ligne ou de contour de n'importe quel chemin. |
| 4 | stroke-dasharray - utilisé pour créer des lignes pointillées. |
Exemple
testSVG.htm<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50" />
<path stroke="green" d="M 50 70 L 300 70" />
<path stroke="blue" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Largeur du trait
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
coup-linecap
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-linecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-linecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
accident vasculaire cérébral-dasharray
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50" />
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70" />
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
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
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - filtre pour les ombres portées
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
Déclaration
Voici la déclaration de syntaxe de <filter>élément. Nous n'avons montré que les principaux attributs.
<filter
filterUnits="units to define filter effect region"
primitiveUnits="units to define primitive filter subregion"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
filterRes="numbers for filter region"
xlink:href="reference to another filter" >
</filter>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | filterUnits- unités pour définir la région d'effet de filtre. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le filtre et pour les attributs définissant la sous-région de filtre. Si filterUnits = "userSpaceOnUse", les valeurs représentent des valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'filter' est utilisé. Si filterUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'filter' est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | primitiveUnits- unités pour définir la région d'effet de filtre. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le filtre et pour les attributs définissant la sous-région de filtre. Si filterUnits = "userSpaceOnUse", les valeurs représentent des valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'filter' est utilisé. Si filterUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'filter' est utilisé. La valeur par défaut est userSpaceOnUse. |
| 3 | x- coordonnée sur l'axe des x de la boîte englobante du filtre. Defeault est 0. |
| 4 | y- coordonnée sur l'axe y de la boîte englobante du filtre. La valeur par défaut est 0. |
| 5 | width- largeur de la boîte englobante du filtre. La valeur par défaut est 0. |
| 6 | height- hauteur de la boîte englobante du filtre. La valeur par défaut est 0. |
| sept | filterRes - les nombres représentant les régions de filtre. |
| 8 | xlink:href - utilisé pour désigner un autre filtre. |
Exemple
testSVG.htm<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Blur Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter1)" />
</g>
</svg>
</body>
</html>Deux éléments <filter> définis comme filter1 et filter2.
L'effet de filtre feGaussianBlur définit l'effet de flou avec la quantité de flou à l'aide de stdDeviation.
in = "SourceGraphic" définit que l'effet est applicable à l'ensemble de l'élément.
L'effet de filtre feOffset est utilisé pour créer un effet d'ombre. in = "SourceAlpha" définit que l'effet est applicable à la partie alpha des graphiques RGBA.
Les éléments <rect> ont lié les filtres à l'aide de l'attribut de filtre.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Filtre avec effet d'ombre
<html>
<title>SVG Filter</title>
<body>
<h1>Sample SVG Filter</h1>
<svg width="800" height="800">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<filter id="filter2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<text x="30" y="50" >Using Filters (Shadow Effect): </text>
<rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
fill="green" filter="url(#filter2)" />
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
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.
Déclaration
Voici la déclaration de syntaxe de <pattern>élément. Nous n'avons montré que les principaux attributs.
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | patternUnits- unités pour définir la région d'effet des modèles. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le motif et pour les attributs définissant la sous-région du motif. Si patternUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'pattern' est utilisé. Si patternUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'pattern' est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | patternContentUnits- unités pour définir la région de contenu du modèle. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le motif et pour les attributs définissant la sous-région du motif. Si patternContentUnits = "userSpaceOnUse", les valeurs représentent des valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'pattern' est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'pattern' est utilisé. La valeur par défaut est userSpaceOnUse. |
| 3 | x- coordonnée sur l'axe des x de la boîte englobante du motif. Defeault est 0. |
| 4 | y- coordonnée sur l'axe y de la boîte englobante du motif. La valeur par défaut est 0. |
| 5 | width- largeur du cadre de délimitation du motif. La valeur par défaut est 0. |
| 6 | height- hauteur de la zone de délimitation du motif. La valeur par défaut est 0. |
| sept | preserveAspectRatio - pour préserver le rapport largeur / hauteur du contenu original. |
| 8 | xlink:href - utilisé pour désigner un autre modèle. |
Exemple
testSVG.htm<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>Un élément <pattern> défini comme pattern1.
Dans le modèle, une zone de visualisation est définie et un chemin qui doit être utilisé comme modèle est défini.
dans l'élément rect, dans l'attribut fill, l'url du motif est spécifiée pour remplir le rectangle avec le motif créé précédemment.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
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.
Linear Gradients - Représente la transition linéaire d'une couleur à une autre d'une direction à une autre.
Radial Gradients - Représente la transition circulaire d'une couleur à une autre d'une direction à une autre.
Gradients linéaires
Déclaration
Voici la déclaration de syntaxe de <linearGradient>élément. Nous n'avons montré que les principaux attributs.
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</linearGradient>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | gradientUnits- unités pour définir le système de coordonnées des différentes valeurs de longueur dans le dégradé. Si gradientUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément dégradé est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément dégradé est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | x1- coordonnée en abscisse du vecteur gradient. Defeault est 0. |
| 3 | y1- coordonnée sur l'axe des y du vecteur gradient. La valeur par défaut est 0. |
| 4 | x2- coordonnée en abscisse du vecteur gradient. Defeault est 0. |
| 5 | y2- coordonnée sur l'axe des y du vecteur gradient. La valeur par défaut est 0. |
| 6 | spreadMethod- indique la méthode de diffusion du dégradé dans l'élément graphique. La valeur par défaut est «pad». |
| sept | xlink:href - utilisé pour désigner un autre dégradé. |
Exemple
testSVG.htm<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un élément <linearGradient> défini comme sampleGradient.
Dans linearGradient, deux décalages sont définis avec deux couleurs.
dans l'élément rect, dans l'attribut fill, l'url du dégradé est spécifiée pour remplir le rectangle avec le dégradé créé précédemment.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Dégradés radiaux
Déclaration
Voici la déclaration de syntaxe de <radialGradient>élément. Nous n'avons montré que les principaux attributs.
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</radialGradient>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | gradientUnits- unités pour définir le système de coordonnées des différentes valeurs de longueur dans le dégradé. Si gradientUnits = "userSpaceOnUse", les valeurs représentent les valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément dégradé est utilisé. Si patternContentUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément dégradé est utilisé. La valeur par défaut est userSpaceOnUse. |
| 2 | cx- coordonnée en abscisse du centre du plus grand cercle du vecteur gradient. Defeault est 0. |
| 3 | cy- coordonnée sur l'axe des y du centre du plus grand cercle du vecteur gradient. La valeur par défaut est 0. |
| 4 | r- rayon du centre du plus grand cercle du vecteur de gradient. Defeault est 0. |
| 5 | fx- point focal du gradient radial. La valeur par défaut est 0. |
| 6 | fy- point focal du gradient radial. La valeur par défaut est 0. |
| sept | spreadMethod- indique la méthode de diffusion du dégradé dans l'élément graphique. La valeur par défaut est «pad». |
| 8 | xlink:href - utilisé pour désigner un autre dégradé. |
Exemple
testSVG.htm<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Un élément <radialGradient> défini comme sampleGradient.
Dans radialGradient, deux décalages sont définis avec deux couleurs.
dans l'élément rect, dans l'attribut fill, l'url du dégradé est spécifiée pour remplir le rectangle avec le dégradé créé précédemment.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
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. Prenons l'exemple suivant.
Exemple
testSVG.htm<html>
<title>SVG Interactivity</title>
<body>
<h1>Sample Interactivity</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="green" stroke-width="3" fill="red"
onClick="showArea(event)"/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click me to print child node count.</text>
</g>
</svg>
</body>
</html>Explication
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.
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é.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG. Cliquez sur chaque texte et rectangle pour voir le résultat.
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).
Déclaration
Voici la déclaration de syntaxe de <a>élément. Nous n'avons montré que les principaux attributs.
<a
xlink:show = "new" | "replace"
xlink:actuate = "onRequest"
xlink:href = "<IRI>"
target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | xlink:show- à des fins de documentation pour les processeurs compatibles XLink. La valeur par défaut est nouvelle. |
| 2 | xlink:actuate - à des fins de documentation pour les processeurs compatibles XLink. |
| 3 | xlink:href - emplacement de l'objet référencé. |
| 4 | target - utilisé lorsque des cibles pour la ressource de fin sont possibles. |
Exemple
testSVG.htm<html>
<title>SVG Linking</title>
<body>
<h1>Sample Link</h1>
<svg width="800" height="800">
<g>
<a xlink:href="http://www.tutorialspoint.com">
<text x="0" y="15" fill="black" >
Click me to load TutorialsPoint DOT COM.</text>
</a>
</g>
<g>
<text x="0" y="65" fill="black" >
Click in the rectangle to load TutorialsPoint DOT COM</text>
<a xlink:href="http://www.tutorialspoint.com">
<rect x="100" y="80" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" />
</a>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG. Cliquez sur le lien et le rectangle pour voir le résultat.