d

L'attribut d définit un tracé à dessiner.

La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.

Cet attribut peut être utilisé sur les éléments SVG suivants : <path>, <glyph>, <missing-glyph>.

d est un attribut de présentation et peut donc être utilisé comme propriété CSS.

Exemple

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20, 20 0, 0, 1 50, 30
       A 20, 20 0, 0, 1 90, 30
       Q 90, 60 50, 90
       Q 10, 60 10, 30 z" />
</svg>

<path>

Pour un <path>, d est une chaîne de caractères qui contient une série de commandes de tracé qui définissent le tracé à dessiner.

Valeur <string>
Valeur par défaut Aucune
Animable Oui

<glyph>

Attention : Depuis SVG2, <glyph> est déprécié et ne doit plus être utilisé.

Pour un élément <glyph>, d est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.

Valeur <string>
Valeur par défaut Aucune
Animable Oui

Note : Le point d'origine (situé aux coordonnées 0, 0) correspond généralement au coin en haut à gauche du contexte. Néanmoins, pour l'élément <glyph>, l'origine se situe dans le coin en bas à gauche de son enveloppe.

<missing-glyph>

Attention : Depuis SVG2, <missing-glyph> est déprécié et ne doit plus être utilisé.

Pour un élément <missing-glyph>, d est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour du glyphe.

Valeur <string>
Valeur par défaut Aucune
Animable Oui

Utilisation comme propriété CSS

d est un attribut de présentation et peut donc être modifié à l'aide de CSS. La propriété peut prendre path() ou none comme valeur.

Dans l'exemple qui suit, on illustre comment appliquer un nouveau tracé au survol d'un élément. Le nouveau tracé est le même que le précédent, mais ajoute une ligne sur le cœur.

css
html,
body,
svg {
  height: 100%;
}

/* Ce tracé est affiché au survol */
#svg_css_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}
html
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z
       " />
</svg>

Commandes de tracé

Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.

SVG définit 6 types de commandes, pour un total de 20 commandes :

  • MoveTo (commande de déplacement) : M, m
  • LineTo (commande pour tracer une ligne) : L, l, H, h, V, v
  • Courbe de Bézier cubique : C, c, S, s
  • Courbe de Bézier quadratique : Q, q, T, t
  • Courbe d'arc elliptique : A, a
  • ClosePath (commande pour fermer le tracé): Z, z

Note : Les commandes sont sensibles à la casse ; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.

Il est toujours possible de spécifier une valeur négative en argument d'une commande :

  • Des angles négatifs iront dans le sens inverse des aiguilles d'une montre
  • Des positions absolues négatives x et y seront interprétées comme des coordonnées négatives
  • Pour les valeurs relatives, une valeur de x négative ira vers la gauche, et une valeur de y négative ira vers le haut.

MoveTo (déplacement)

Cette instruction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Autrement dit, on déplace le point courant (Po; {xo, yo}) et on ne trace pas de ligne entre Po et le nouveau point courant (Pn; {xn, yn}).

Une bonne pratique consiste à commencer tous ses chemins par une instruction MoveTo car, sans un positionnement initial, les instructions du chemin commenceront à un point quelconque, ce qui peut donner des résultats non désirés.

Commande Paramètres Notes
M (x, y)+

Déplace le point courant aux coordonnées x,y. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres absolus fournis à une commande LineTo (L) implicite (voir ci-après).

Formule : Pn = {x, y}
m (dx, dy)+

Déplace le point courant en décalant la dernière position connue du tracé de dx sur l'axe horizontal et de dy sur l'axe vertical. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres relatifs fournis à une commande LineTo (l) implicite (voir ci-après).

Formule : Pn = {xo+ dx, yo + dy}

Exemples

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

LineTo (tracé d'une ligne)

Les instructions LineTo permettent de dessiner une ligne droite à partir du point courant (Po; {xo, yo}) et jusqu'au point final (Pn; {xn, yn}), selon les paramètres indiqués. Le point final (Pn) devient alors le point courant pour la prochaine commande (Po′).

Commande Paramètres Notes
L (x, y)+

Dessine une ligne à partir du point courant jusqu'au point final indiqué par x,y. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour une commande LineTo absolue (L) implicite.

Formule : Po′ = Pn = {x, y}
l (dx, dy)+

Dessine une ligne à partir du point courant jusqu'au point final, déterminé par le décalage horizontal dx et le décalage vertical dy du point courant. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour une commande LineTo relative (l) implicite.

Formule : Po′ = Pn = {xo + dx, yo + dy}
H x+

Dessine une ligne horizontale à partir du point courant et jusqu'au point final, déterminé par la coordonnée x fournie en paramètre et l'ordonnée y du point courant. Les éventuelles valeurs suivantes sont interprétées comme des paramètres pour des appels LineTo (H) implicites.

Formule : Po′ = Pn = {x, yo}
h dx+

Dessine une ligne horizontale à partir du point courant, jusqu'au point final dont l'abscisse est celle du point courant décalée de dx et dont l'ordonnée est celle du point courant. Les éventuelles valeurs suivantes sont interprétées comme des paramètres pour des appels LineTo (h) implicites.

Formule : Po′ = Pn = {xo + dx, yo}
V y+

Dessine une ligne verticale à partir du point courant, jusqu'au point final, dont l'ordonnée est indiquée par le paramètre y et dont l'abscisse est celle du point courant. Les éventuelles valeurs suivantes sont interprétées comme des paramètres pour des appels LineTo (V) implicites.

Formule : Po′ = Pn = {xo, y}
v dy+

Dessine une ligne verticale à partir du point courant, jusqu'au point final dont l'ordonnée est celle du point courant décalée de dy et dont l'abscisse est celle du point courant. Les éventuelles valeurs suivantes sont interprétées comme des paramètres pour des appels LineTo (v) implicites.

Formule : Po′ = Pn = {xo, yo + dy}

Exemples

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Commandes LineTo avec coordonnées absolues -->
  <path
    fill="none"
    stroke="red"
    d="M 10,10
           L 90,90
           V 10
           H 50" />

  <!-- Commandes LineTo avec coordonnées relatives -->
  <path
    fill="none"
    stroke="red"
    d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

Courbes de Bézier cubiques

Les courbes de Bézier définissent des courbes douces à l'aide de quatre points :

Le point de départ (le point courant)

(Po = {xo, yo})

Le point final

(Pn = {xn, yn})

Le point de contrôle initial

(Pcs = {xcs, ycs}) (il contrôle la courbure au début de la courbe)

Le point de contrôle final

(Pce = {xce, yce}) (il contrôle la courbure vers la fin de la courbe)

Après le tracé, le point final (Pn) devient le point courant pour la prochaine commande (Po′).

Commande Paramètres Notes
C (x1,y1, x2,y2, x,y)+

Dessine une courbe de Bézier cubique à partir du point courant jusqu'au point final indiqué par x,y. Le point de contrôle initial est indiqué par les paramètres x1,y1, et le point de contrôle final est indiqué par x2,y2. Les éventuels triplets de paires de coordonnées sont interprétés comme des paramètres pour des appels implicites à une commande de courbe de Bézier cubique (C) absolue.

Formules :
Po′ = Pn = {x, y} ;
Pcs = {x1, y1} ;
Pce = {x2, y2}
c (dx1,dy1, dx2,dy2, dx,dy)+

Dessine une courbe de Bézier cubique à partir du point courant, jusqu'au point final, déterminé par le décalage horizontal dx et le décalage vertical dy du point courant. Le point de contrôle initial correspond au point courant (le point de départ de la courbe) décalé de dx1 sur l'axe horizontal et de dy1 sur l'axe vertical. Le point de contrôle final correspond au point courant (le point de départ de la courbe) décalé de dx2 le long de l'axe horizontal et de dy2 le long de l'axe vertical. Les éventuels triplets de paires de coordonnées sont interprétés comme des paramètres pour des appels implicites à une commande de courbe de Bézier cubique (c) relative.

Formules :
Po′ = Pn = {xo + dx, yo + dy} ;
Pcs = {xo + dx1, yo + dy1} ;
Pce = {xo + dx2, yo + dy2}
S (x2,y2, x,y)+ Dessine une courbe de Bézier lisse allant du point courant au point final indiqué par les coordonnées x,y. Le point de contrôle final est indiqué par x2,y2. Le point de contrôle initial est le symétrique du point de contrôle final de la précédente commande de courbe par rapport au point courant. Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (c'est-à-dire le point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse absolue (S) implicites.
s (dx2,dy2, dx,dy)+ Dessine une courbe de Bézier cubique lisse allant du point courant au point final, qui est déterminé par le décalage du point courant de dx sur l'axe horizontal et de dy sur l'axe vertical. Le point de contrôle final correspond au point courant (le point de départ de la courbe) décalé de dx2 sur l'axe horizontal et décalé de dy2 le long de l'axe vertical. Le point de contrôle initial est le symétrique du point de contrôle final de la commande de courbe précédente par rapport au point courant. Si la commande précédente n'était pas une courbe de Bézier cubique, le point de contrôle initial correspondra au point de départ de la courbe (point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier cubique lisse relative (s) implicites.

Exemples

html
<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Courbe de Bézier cubique avec des coordonnées absolues -->
  <path
    fill="none"
    stroke="red"
    d="M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90" />

  <!-- Courbe de Bézier cubique avec des coordonnées relatives -->
  <path
    fill="none"
    stroke="red"
    d="M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80" />

  <!-- Met en évidence le sommet de la courbe et les points de contrôle -->
  <g id="ControlPoints">
    <!-- Points de contrôles initiaux -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Deuxième ensemble de points de contrôle (où le premier est implicite) -->
    <line
      x1="50"
      y1="10"
      x2="75"
      y2="10"
      stroke="lightgrey"
      stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- Sommets de la courbe -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use href="#ControlPoints" x="100" />
</svg>

Courbe de Bézier quadratique

Les courbes de Bézier quadratiques définissent des courbes douces à l'aide de trois points :

Le point de départ (point courant)

Po = {xo, yo}

Le point final

Pn = {xn, yn}

Le point de contrôle

Pc = {xc, yc} (qui contrôle la courbure)

Après le tracé, le point final (Pn) devient le point courant de la prochaine commande (Po′).

Commande Paramètres Notes
Q (x1,y1, x,y)+

Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final situé aux coordonnées x,y. Le point de contrôle est aux coordonnées x1,y1. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique absolue (Q) implicites.

Formules :
Po′ = Pn = {x, y} ;
Pc = {x1, y1}
q (dx1,dy1, dx,dy)+

Dessine une courbe de Bézier quadratique à partir du point courant jusqu'au point final, calculé en décalant le point courant de dx sur l'axe horizontal et de dy sur l'axe vertical. Le point de contrôle correspond au point courant (le point de départ de la courbe) décalé de dx1 le long de l'axe horizontal et de dy1 le long de l'axe vertical. Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique relative (q) implicites.

Formules :
Po′ = Pn = {xo+ dx, yo + dy} ;
Pc = {xo + dx1, yo + dy1}
T (x,y)+

Dessine une courbe de Bézier quadratique lisse à partir du point courant, jusqu'au point final situé aux coordonnées x,y. Le point de contrôle est le symétrique du point de contrôle de la précédente commande de courbe par rapport au point courant. Si la commande précédente n'était pas une courbe de Bézier quadratique, le point de contrôle sera identique au point de départ de la courbe (c'est-à-dire le point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique lisse absolue (T) implicites.

Formula:
Po′ = Pn = {x, y}
t (dx,dy)+

Dessine une courbe de Bézier quadratique lisse à partir du point courant, jusqu'au point final qui correspond au décalage du point courant de dx sur l'axe horizontal et de dy sur l'axe vertical. Le point de contrôle est le symétrique du point de contrôle de la précédente commande de courbe par rapport au point courant. Si la précédente commande n'était pas une courbe de Bézier quadratique, le point de contrôle correspondra alors au point de départ de la courbe (c'est-à-dire le point courant). Les éventuelles paires de coordonnées qui suivent sont interprétées comme des paramètres pour des commandes de courbe de Bézier quadratique lisse relative (t) implicites.

Formules :
Po′ = Pn = {xo + dx, yo + dy}

Exemples

html
<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Courbe de Bézier quadratique avec répétition implicite -->
  <path
    fill="none"
    stroke="red"
    d="M 10,50
           Q 25,25 40,50
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Met en évidence le sommet de la courbe et les points de contrôle -->
  <g>
    <polyline
      points="10,50 25,25 40,50"
      stroke="rgb(0 0 0 / 20%)"
      fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Sommets de la courbe -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
        points="40,50 55,75 70,50"
        stroke="rgb(0 0 0 / 20%)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
        points="70,50 85,25 100,50"
        stroke="rgb(0 0 0 / 20%)"
        stroke-dasharray="2"
        fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

Courbe d'arc elliptique

Les courbes d'arc elliptique sont des courbes définies comme une portion d'ellipse. Certaines courbes régulières sont parfois plus facilement obtenues avec des portions d'ellipses qu'avec des courbes de Bézier.

Commande Paramètres Notes
A (rx ry angle large-arc-flag sweep-flag x y)+

Dessine un arc à partir du point courant jusqu'aux coordonnées x,y. Le centre de l'ellipse utilisé pour dessiner l'arc est déterminé automatiquement en fonction des paramètres de la commande :

  • rx et ry sont les deux rayons de l'ellipse ;
  • angle représente une rotation (exprimée en degrés) de l'ellipse par rapport à l'axe horizontal ;
  • large-arc-flag et sweep-flag permettent de choisir l'arc à dessiner parmi les 4 arcs possibles.
    • large-arc-flag permet de choisir entre le grand (1) ou le petit (0) arc,
    • sweep-flag permet de choisir entre l'arc dans le sens horaire (1) ou celui dans le sens anti-horaire (0)
Les coordonnées x,y sont celles du nouveau point courant pour la prochaine commande. Les éventuels paramètres suivants sont considérés comme des paramètres à passer à des commandes d'arc absolu (A) implicites.
a (rx ry angle large-arc-flag sweep-flag dx dy)+

Dessine un arc à partir du point courant jusqu'au point dont les coordonnées sont celles du point courant décalées de dx horizontalement et de dy verticalement. Le centre de l'ellipse utilisé pour dessiner l'arc est déterminé automatiquement en fonction des paramètres de la commande :

  • rx et ry sont les deux rayons de l'ellipse ;
  • angle exprime la rotation (en degrés) de l'ellipse par rapport à l'axe horizontal ;
  • large-arc-flag et sweep-flag permettent de choisir l'arc à dessiner parmi les 4 arcs possibles.
    • large-arc-flag permet de choisir entre le grand (1) ou le petit (0) arc,
    • sweep-flag permet de choisir entre l'arc dans le sens horaire (1) ou celui dans le sens anti-horaire (0)
En prenant le point courant et en le décalant de dx et dy sur les axes respectifs, on obtient le point courant de la prochaine commande. Les éventuels paramètres suivants sont considérés comme des paramètres à passer à des commandes d'arc relatif (a) implicites.

Exemples

html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Les paramètres d'arc permettent de choisir celui qui est dessiné -->
  <path
    fill="none"
    stroke="red"
    d="M 6,10
           A 6 4 10 1 0 14,10" />

  <path
    fill="none"
    stroke="lime"
    d="M 6,10
           A 6 4 10 1 1 14,10" />

  <path
    fill="none"
    stroke="purple"
    d="M 6,10
           A 6 4 10 0 1 14,10" />

  <path
    fill="none"
    stroke="pink"
    d="M 6,10
           A 6 4 10 0 0 14,10" />
</svg>

ClosePath (fermeture du tracé)

Les instructions ClosePath permettent de dessiner une ligne droite entre la position courante et le premier point du tracé.

Commande Paramètres Notes
Z, z Ferme le chemin courant en connectant le dernier point du chemin au point initial. Si les deux points sont situés à différentes coordonnées, une ligne droite est tracée entre les deux points.

Note : L'apparence d'une forme fermée à l'aide de ClosePath peut être différente de celle d'une forme fermée en traçant une ligne jusqu'à l'origine selon la commande, car les fins de lignes sont jointes (selon l'attribut stroke-linejoin), plutôt que d'être placées aux mêmes coordonnées.

Exemples

html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
  Une forme ouverte où le dernier point
  du tracé est différent du premier
  -->
  <path
    stroke="red"
    d="M 5,1
           l -4,8 8,0" />

  <!--
  Une forme ouverte où le dernier point du
  tracé correspond au premier
  -->
  <path
    stroke="red"
    d="M 15,1
           l -4,8 8,0 -4,-8" />

  <!--
  Une forme fermée où le dernier point du
  tracé est différent du premier
  -->
  <path
    stroke="red"
    d="M 25,1
           l -4,8 8,0
           z" />
</svg>

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# DProperty
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
# GlyphElementDAttribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
# DAttribute

Compatibilité des navigateurs

BCD tables only load in the browser