SVG contient le jeu des éléments de forme de base suivant :
Mathématiquement, ces éléments de forme sont équivalents à un élément 'path' qui construirait la même forme. Les formes de base peuvent avoir un liseré, avoir un remplissage et être utilisées comme tracé de rognage. Toutes les propriétés disponibles pour l'élément 'path' s'appliquent aussi aux formes de base.
L'élément 'rect' définit un rectangle qui s'aligne selon l'axe du système de coordonnées utilisateur. On peut obtenir des rectangles avec des coins arrondis en donnant les valeurs appropriées aux attributs rx et ry.
<!ENTITY % rectExt "" > <!ELEMENT rect (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%rectExt;)*) > <!ATTLIST rect %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; transform %TransformList; #IMPLIED %graphicsElementEvents; x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #REQUIRED height %Length; #REQUIRED rx %Length; #IMPLIED ry %Length; #IMPLIED > |
Définitions des attributs :
Si une valeur spécifiée correcte est donnée à l'attribut rx, mais pas à l'attribut ry, alors l'agent utilisateur traite l'élément 'rect' comme ayant une valeur pour son attribut ry égale à rx. Inversement, si une valeur spécifiée correcte est donnée à l'attribut ry, mais pas à l'attribut rx, alors l'agent utilisateur traite l'élément 'rect' comme ayant une valeur pour son attribut rx égale à ry. Si ni rx ni ry n'ont une valeur spécifiée correcte, alors l'agent utilisateur traite l'élément 'rect' comme si aucun arrondi n'avait été spécifié, aboutissant ainsi à des coins droits. Si la valeur de l'attribut rx est supérieure à la moitié de la largeur du rectangle, alors l'agent utilisateur traite l'élément 'rect' comme si la valeur effective de rx était la moitié de la largeur du rectangle. Si la valeur de l'attribut ry est supérieure à la moitié de la hauteur du rectangle, alors l'agent utilisateur traite l'élément 'rect' comme si la valeur effective de ry était la moitié de la hauteur du rectangle.
Mathématiquement, un élément 'rect' peut se ramener à un élément 'path' équivalent, comme suit : (Remarque : toutes les valeurs de coordonnée et de longueur du premier sont d'abord converties en coordonnées de l'espace utilisateur selon ce qui est dit à la section Les unités).
L'exemple rect01 montre un rectangle avec des coins droits. L'élément 'rect' est rempli en jaune et a un liseré de couleur "navy".
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple rect01 - rectangle avec des coins droits</desc> <!-- Montre le contour du canevas en utilisant l'élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" /> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'exemple rect02 montre deux rectangles arrondis. L'attribut rx spécifie l'arrondi des coins des rectangles. Remarquer que, comme aucune valeur n'est spécifiée pour l'attribut ry, celui-ci prendra la même valeur que l'attribut rx.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple rect02 - rectangles arrondis</desc> <!-- Montre le contour du canevas en utilisant un élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="100" y="100" width="400" height="200" rx="50" fill="green" /> <g transform="translate(700 210) rotate(-30)"> <rect x="0" y="0" width="400" height="200" rx="50" fill="none" stroke="purple" stroke-width="30" /> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'élément 'circle' définit un cercle à partir d'un point central et d'un rayon.
<!ENTITY % circleExt "" > <!ELEMENT circle (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%circleExt;)*) > <!ATTLIST circle %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; transform %TransformList; #IMPLIED %graphicsElementEvents; cx %Coordinate; #IMPLIED cy %Coordinate; #IMPLIED r %Length; #REQUIRED > |
Définitions des attributs :
L'exemple circle01 consiste en un élément 'circle' qui est rempli en rouge avec un liseré bleu.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple circle01 - cercle rempli de rouge avec un liseré bleu</desc> <!-- Montre le contour du canevas avec un élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'élément 'ellipse' définit une ellipse, alignée sur les axes du système de coordonnées utilisateur et basée sur un point central et deux rayons.
<!ENTITY % ellipseExt "" > <!ELEMENT ellipse (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%ellipseExt;)*) > <!ATTLIST ellipse %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; transform %TransformList; #IMPLIED %graphicsElementEvents; cx %Coordinate; #IMPLIED cy %Coordinate; #IMPLIED rx %Length; #REQUIRED ry %Length; #REQUIRED > |
Définitions des attributs :
L'exemple ellipse01 ci-dessous spécifie les coordonnées de deux ellipses dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg' et par l'attribut transform des éléments 'g' et 'ellipse'. Les deux ellipses utilisent les valeurs par défaut de zéro des attributs cx et cy (le centre de l'ellipse). La seconde ellipse est tournée.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple ellipse01 - exemples d'ellipses</desc> <!-- Montre le contour du canevas avec un élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'élément 'line' définit un segment de droite qui commence à un point et finit à un autre.
<!ENTITY % lineExt "" > <!ELEMENT line (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%lineExt;)*) > <!ATTLIST line %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; %PresentationAttributes-Markers; transform %TransformList; #IMPLIED %graphicsElementEvents; x1 %Coordinate; #IMPLIED y1 %Coordinate; #IMPLIED x2 %Coordinate; #IMPLIED y2 %Coordinate; #IMPLIED > |
Définitions des attributs :
Mathématiquement, un élément 'line' peut se ramener à un élément 'path' équivalent, comme suit : (Remarque : toutes les valeurs de coordonnée et de longueur sont d'abord convertie en coordonnées dans l'espace utilisateur selon ce qui est dit à la section Les unités.)
Comme les éléments 'line' sont de simples segments de droite, donc dans un espace unidimensionnel, ils n'ont pas d'intérieur ; ainsi, les éléments 'line' n'ont jamais de remplissage (voir la propriété 'fill').
L'exempleline01 ci-dessous spécifie les coordonnées de cinq segments de droite dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'. Les segments de droite ont différentes épaisseurs.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple line01 - droites exprimées en coordonnées utilisateur</desc> <!-- Montre le contour du canevas avec un élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green" > <line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100" stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100" stroke-width="25" /> </g> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'élément 'polyline' définit un jeu de segments de droite reliés entre eux. Typiquement, les éléments 'polyline' définissent des formes ouvertes.
<!ENTITY % polylineExt "" > <!ELEMENT polyline (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%polylineExt;)*) > <!ATTLIST polyline %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; %PresentationAttributes-Markers; transform %TransformList; #IMPLIED %graphicsElementEvents; points %Points; #REQUIRED > |
Définitions des attributs :
Si on fournit un nombre impair de coordonnées, alors l'élément est en erreur, le comportement de l'agent utilisateur étant le même que pour celui qui survient quand un élément 'path' incorrectement spécifié.
Mathématiquement, un élément 'polyline' peut se ramener à un élément 'path' équivalent, comme suit :
L'exemple polyline01 ci-dessous spécifie un élément polyline dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple polyline01 - des barres de plus en plus grandes</desc> <!-- Montre le contour du canevas avec un élément 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" /> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
L'élément 'polygon' définit une forme fermée consistant en un jeu de segments de droite reliés.
<!ENTITY % polygonExt "" > <!ELEMENT polygon (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform %geExt;%polygonExt;)*) > <!ATTLIST polygon %stdAttrs; %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-Color; %PresentationAttributes-FillStroke; %PresentationAttributes-Graphics; %PresentationAttributes-Markers; transform %TransformList; #IMPLIED %graphicsElementEvents; points %Points; #REQUIRED > |
Définitions des attributs :
Si on fournit un nombre impair de coordonnées, alors l'élément est en erreur, le comportement de l'agent utilisateur étant le même que pour celui qui survient avec un élément 'path' incorrectement spécifié.
Mathématiquement, un élément 'polygon' peut se ramener à un élément 'path' équivalent, comme suit :
L'exemple polygon01 ci-dessous spécifie deux polygones (une étoile et un hexagone) dans le système de coordonnées utilisateur établi par l'attribut viewBox de l'élément 'svg'.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Exemple polygon01 - étoile et hexagone</desc> <!-- Montre le contour du canevas avec un element 'rect' --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> </svg>
![]() |
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
Ce qui suit est la Forme Backus-Naur (FBN) pour les spécifications des points dans des éléments 'polyline' et 'polygon'. On emploie la notation suivante :
list-of-points: wsp* coordinate-pairs? wsp* coordinate-pairs: coordinate-pair | coordinate-pair comma-wsp coordinate-pairs coordinate-pair: coordinate comma-wsp coordinate coordinate: number number: sign? integer-constant | sign? floating-point-constant comma-wsp: (wsp+ comma? wsp*) | (comma wsp*) comma: "," integer-constant: digit-sequence floating-point-constant: fractional-constant exponent? | digit-sequence exponent fractional-constant: digit-sequence? "." digit-sequence | digit-sequence "." exponent: ( "e" | "E" ) sign? digit-sequence sign: "+" | "-" digit-sequence: digit | digit digit-sequence digit: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" wsp: (#x20 | #x9 | #xD | #xA)+
Les interfaces suivantes sont définies ci-dessous : SVGRectElement, SVGCircleElement, SVGEllipseElement, SVGLineElement, SVGAnimatedPoints, SVGPolylineElement, SVGPolygonElement.
L'interface SVGRectElement correspond à l'élément 'rect'.
interface SVGRectElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedLength x; readonly attribute SVGAnimatedLength y; readonly attribute SVGAnimatedLength width; readonly attribute SVGAnimatedLength height; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
L'interface SVGCircleElement correspond à l'élément 'circle'.
interface SVGCircleElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength r; };
L'interface SVGEllipseElement correspond à l'élément 'ellipse'.
interface SVGEllipseElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedLength cx; readonly attribute SVGAnimatedLength cy; readonly attribute SVGAnimatedLength rx; readonly attribute SVGAnimatedLength ry; };
L'interface SVGLineElement correspond à l'élément 'line'.
interface SVGLineElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedLength x1; readonly attribute SVGAnimatedLength y1; readonly attribute SVGAnimatedLength x2; readonly attribute SVGAnimatedLength y2; };
L'interface SVGAnimatedPoints gère les éléments ayant un attribut 'points' qui contient une liste de valeurs de coordonnée et gère la capacité d'animation de cet attribut.
De plus, l'attribut 'points' sur l'élément original, quand on l'accède via le DOM de XML (par exemple, en utilisant l'appel de méthode getAttribute()), va refléter immédiatement tous les changements survenus sur l'attribut points.
interface SVGAnimatedPoints { readonly attribute SVGPointList points; readonly attribute SVGPointList animatedPoints; };
Offre un accès au contenu de base (i.e., statique) de l'attribut points.
Offre un accès au contenu de l'attribut points en cours d'animation. Si l'attribut donné, ou la propriété est en cours d'animation, contient la valeur animée courante de l'attribut, ou de la propriété. Si l'attribut donné, ou la propriété, n'est pas en cours d'animation, contient la même valeur que 'points'.
L'interface SVGPolylineElement correspond à l'élément 'polyline'.
interface SVGPolylineElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget, SVGAnimatedPoints {};
L'interface SVGPolygonElement correspond à l'élément 'polygon'.
interface SVGPolygonElement : SVGElement, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget, SVGAnimatedPoints {};