<svg
    xmlns="http://www.w3.org/2000/svg"
    width="200"
    height= "200"
    viewBox="0 0 200 200"
>

xmlns

référence W3C, indispensable si le svg est un fichier autonome (.svg)

width, height

défini la taille du canvas

viewBox

défini la partie visible du canvas

Cercles

<circle cx="100" cy="100" r="80" />

cx, cy

positionnement du centre du cercle par rapport au canvas du svg,

à partir du coin supérieur gauche.

défaut : 0.

r

taille du rayon

défaut: 0.

Ellipse

<ellipse cx="100" cy="100" rx="80" ry="40" />

Pour définir une ellipse, il est nécessaire de renseigner 2 rayons (rx et ry)

Liens

• Les bases de SVG : Cercles et Ellipses

 <rect x="20" y="20" width="40" height="40"/>

x, y

Position du coin supérieur droit du rectangle par rapport au coin supérieur droit du canvas.

width, height

Largeur et hauteur du rectangle

coins arrondis

 <rect x="20" y="20" width="40" height="40" rx="5" ry="5" />

rx, ry

permet de définir un rayon pour arrondir les angles

Si seul rx est renseigné, ry prendra sa valeur

Les Polygones sont des formes géométriques fermées constituées de droites.

Points

Chaque point est positionné sur le canvas par ses coordonnées X Y par rapport au coin supérieur gauche du canvas.

Une virgule sépare les coordonnées de chaque point.

SVG tracera une droite entre chaque point défini. Le dernier point sera forcement relié au premier.

Exemples

Triangle

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 0, 100 100, 0 100"/>
</svg>

Étoile

<polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" />

Line

Une ligne est représentée par 2 points. Les 2 points sont positionnés avec leur coordonnées X et Y par rapport à coin supérieur gauche du canvas.
Il faut donc définir les coordonnées du point 1 (x1, y1) et du point 2 (x2, y2).
Par défaut une ligne est invisible, car elle ne possède pas de contour. Il faut donc définir une couleur stroke et une largeur de contour stroke-width.

<line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" />

Attributs

x1

position X du point 1

y1

position Y du point 1

x2

Position X du point 2

y2

Position Y du point 2

Polyline

Un Polyline est une ligne composé des plus de 3 points

<polyline points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 " stroke="#000" stroke-width="6" fill="none" />

Attributs

points

liste des points composants la ligne dans l’ordre de liaison.

les coordonnés x,y de chaque point sont séparés par une virgule. chaque point est séparé par un espace du précédent.

fill

contrairement aux lignes, un polyline a une couleur de fond (noir par défaut).

Attributs Spécifiques aux lignes (utilisables en CSS)

stroke

couleur du contour du trait (défaut: aucun)

stroke-width

largeur du contour

stroke-linejoin

forme des angles d’un polyline (anguleux, arrondis, tronqués)

miter (défaut -> angle) | round (arrondi) | bevel (tronqué) | inherit

stroke-linecap

défini la forme des points des extrémités (arrondis, carrés, tronqués)

butt (défaut -> tronqué) | round (arrondis) | square (carrés) | inherit

Chaque objet svg peut définir sa couleur de remplissage.

fill

couleur de fond de l’objet (remplissage).

valeur possibles : les même que pour CSS (mot clé, hexa, rgb, rgba, hsl, hsla, …)

défaut : black

fill-rule

à tester

fill-opacity

à tester

Les attributs de remplissage peuvent être définis via un sélecteur et des règles CSS

.ma-class {
    fill: hsl(40, 50%, 70%);
}

<circle cx="100" cy="100" r="33" class="ma-class" />

Chaque objet svg peut définir un contour et sa couleur.

stroke

couleur du contour de l’objet/groupe.

valeur possibles : les même que pour CSS (mot clé, hexa, rgb, rgba, hsl, hsla, …)

défaut : none aucun contour ne sera dessiné si cet attribut n’est pas renseigné.

stroke-width

taille du contour de l’objet/groupe

la largeur du contour est réparti de façon égale des deux côtés du contour de l’élément.

défaut: 1

<circle cx="100" cy="100" r= 40" stroke="red" stroke-width="15" />

<svg>
    <style>
        circle { fill: red; }
        .mon-rectangle { stroke: orange; stoke-width: 10 }
    </style>

    <circle cx="200" cy="200"  r="150" />
    <rect class="mon-rectangle" x="5" y="5" width="50" height="200"
</svg>

la balise style (équivalente à HTML) permet d’embarquer des styles dont la portée va se limité au svg.

Les éléments peuvent être sélectionnées via leur balise, une class ou un id.

Les groupes

La balise <g> en SVG permettent de contenir et de contrôler des éléments ayant une relation les uns avec les autres :

• Les éléments descendants héritent des styles du group.
• Les transformations CSS appliquées à des groupes sont héritées.
• Les groupes SVG ne peuvent pas être positionnés car ils n’ont pas d’attributs x et y. Ils peuvent par contre être déplacés via des transformations CSS.

<svg viewBox="0 0 400 163">  
<style type="text/css">  
    #svg-container { 
        fill: hsl(45,80%,80%);
        stroke: rgba(0,0,0,0.3);
        stroke-width: 10px;
    }
</style>  
    <g id="svg-container">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg> 

Attributs autorisés sur <g>

id, class

stroke, stroke-width, fill