11.3. Description de forme

Le format SVG (Scalable Vector Graphics) est utilisé pour décrire la forme. C'est pourquoi un espace de noms séparé est utilisé pour cette partie du fichier.

11.3.1. Attribut style

Chaque élément du dessin SVG prend en compte l'attribut « style ». L'attribut doit être de la forme :


    
  <svg:toto style="name1: value1; name2: value2; ... name42: value42"/>
    

     

Actuellement, seuls les styles suivants sont interprétés :

  • stroke-width : La largeur de ligne, relative à la largeur spécifiée par l'utilisateur dans le tag svg.

  • stroke-linecap : Le style des bouts de ligne. Un parmi butt, round, square, projecting (un synonyme de square), ou default.

  • stroke-linejoin : Le style des jointures. Un parmi miter, round, bevel ou default.

  • stroke-pattern : Le motif de points. Un parmi, dashed, dash-dot, dash-dot-dot, dotted ou default.

  • stroke-dashlength : La longueur des traits dans le motif précédent, en relation avec la valeur spécifiée par l'utilisateur (default est un synonyme pour 1.0).

  • stroke : La couleur de ligne. Vous pouvez utiliser un des noms symboliques foreground, fg, default, background, bg, inverse, text ou none, ou utiliser une couleur hexadécimale de forme #rrggbb.

  • fill : La couleur de remplissage. Mêmes valeurs que pour stroke, excepté que la signification de default et inverse sont échangées. Par défaut, les éléments ne sont pas remplis, aussi, pour obtenir le remplissage par défaut, utilisez "fill: default"

[Astuce]

Pour dessiner un rectangle avec une ligne de largeur minimale (hairline), cette astuce devrait fontionner :


            
  <svg:rect style="stroke-width: 0" x="..." y="..." width="..." height="..."/>
            

            

Les ordonnées x et y grandissent comme dans Dia.

11.3.2. Éléments svg reconnus

Les éléments de dessin reconnus sont :

  • <svg:g>

    Ceci est l'élément groupe. Vous pouvez y placer d'autres éléments. Le contenu de l'attribut style de l'élément g est propagé aux éléments contenus (à moins qu'ils ne les modifient).

  • <svg:line x1="..." y1="..." x2="..." y2="..."/>

    Cet élément est une ligne.

  • <svg:polyline points="...."/>

    Ceci est une ligne brisée (une collection de segments de droite connectés). L'attribut « points » contient les coordonnées des extrémités des segments. Les coordonnées sont séparées par un blanc ou des virgules. Le format suggéré est "x1,y1 x2,y2 x3,y3 ...".

  • <svg:polygon points="...."/>

    Ceci est un polygone. L'argument « points » est du même format que celui de l'élément « polyline ».

  • <svg:rect x1="..." y1="..." width="..." height="..."/>

    Ceci est un rectangle. Le coin supérieur gauche est (x1,y1), et le coin inférieur droit est (x1+width,y1+height).

  • <svg:image x1="..." y1="..." width="..." height="..." xlink:href="..." />

    Ceci est une image externe. Le supérieur gauche est (x1,y1), et le coin inférieur droit est (x1+width,y1+height). Deux formes de lien sont pris en charge : un chemin absolu de la forme "file:///home/user/image.png", ou relatif sans le préfixe file:// comme dans "image.png". La dernière forme est préférable car indépendante de l'installation. Le nom de fichier est relatif à l'emplacement du fichier de forme (xxx.shape). Dans l'exemple ci-dessus les fichiers PNG et shape doivent être dans le même répertoire.

    [Note]

    pour les unices, on parle bien de répertoire (directory) et non de dossier (folder). Par exemple les commande « cd » (change directory), et, sous Windows, « dir ».

  • <svg:circle cx="..." cy="..." r="..."/>

    Ceci est un cercle de centre (cx,cy) et de rayon r.

  • <svg:ellipse cx="..." cy="..." rx="..." ry="..."/>

    Ceci est une ellipse de centre (cx, cy), de rayon rx dans la direction x, et de rayon ry dans la direction y.

  • <svg:path d="...."/>

    Ceci est l'élément de dessin le plus complexe. Il décrit un chemin fait de segments de droite et de courbes de bézier. Actuellement, il ne prend en charge ni l'arc elliptique ni les courbes de bézier quadratiques. La chaîne « d  » est faite de commandes de la forme "x arg1 arg2 ..." où « x » est le code de caractère identifiant la commande, et où les arguments sont des nombres séparés par un blanc ou des virgules. Chaque commande a une variante absolue et relative. Les commandes relatives sont données par une lettre minuscule. Elles utilisent le point d'extrémité de la commande précédente comme point d'origine.

    Les commandes prises en charge sont :

    • M x,y : Bouge le curseur

    • L x,y : Dessine une ligne jusqu'à (x,y)

    • H x : Dessine une ligne horizontale jusqu'à x

    • V y : Dessine une ligne verticale jusqu'à y

    • C x1,y1 x2,y2, x3,y3 : Dessine une courbe de bézier jusqu'à (x3,y3) avec (x1,y1) et (x2,y2) comme points de contrôle.

    • S x1,y1 x2,y2 : Même chose qu'au-dessus, mais dessine un bézier lisse : le premier point de contrôle est déduit du bézier précédent.

    • Z : Ferme le chemin.

    Si le chemin est fermé avec z ou Z, il peut être rempli. Autrement, il est juste dessiné.

  • <svg:text x="..." y="..." style="...">...</svg:text>

    Un texte dans la forme. Le texte doit se situer entre les balises.

    Les paramètres sont :

    • x,y : La position du texte

    • style : Les options de formatage de texte

      Les options de style sont les suivantes :

      • font-size : Taille de la fonte en « pt » (point)