Cheatsheet SVG

Elements d'un SVG

Objet Exemple
circle 
<circle cx="20" cy="20" r="15" stroke="black" stroke-width="1" fill="blue"/>
ellipse 
<ellipse cx="30" cy="20" rx="25" ry="17" stroke="blue" stroke-width="2" fill="red"/>
line 
<line x1="5" y1="5" x2="55" y2="37" stroke="green" />
path 
<path d="M5 5 C5 5 10 35 55 30 L30 5" style="stroke: black;fill:white" />
polygon 
<polygon points="5,5 15,35 55,35 45,5" style="stroke:black; fill:rgb(200,200,200)" />
polyline 
<polyline points="30,5 25,8 20,12 15,20 20,28 25,32 30,35" style="fill:blue;stroke:black; opacity:.5" />
rect 
<rect x="5" y="5" width="50" height="30" stroke="red" stroke-width="1" />
text 
<text x="5" y="15" style="font-family:Times,serif;fill:red;font-size:12px">Text</text>
        <text x="15" y="30" style="fill:blue;font-size:15px;opacity:.2">Here</text>

Attributs

Les attributs des objets SVG peuvent être définis de deux manières : Exemple : les deux codes suivants sont équivalents 
<style>
    .class1{stroke:black;}
</style>
<svg height="100" width="100">
    <line x1="5" y1="5" x2="95" y2="5" stroke="black" />
    <line x1="5" y1="10" x2="95" y2="10" class="class1" />
</svg>
Attribut Tags Utilité Exemple
cx, cy circle, ellipse Coordonnées x et y d'un cercle ou d'une ellipse. <circle cx="20" cy="30" r="15" stroke="black" stroke-width="1" fill="blue"/>
fill PRESQUE TOUS Décrit la couleur ou le gradient utilisé pour remplir unobjet graphique. <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
opacity PRESQUE TOUS Décrit la transparence d'un objet graphique.
Compris entre 0 et 1.
0 = transparent, 1 = complètement opaque.		 <rect x="5" y="5" width="50" height="30" opacity=".5" fill="green" />
stroke TOUS Décrit la couleur de la limite d'un objet. <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
width, height rect Spécifie la largeur et la hauteur d'un rectangle <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
x,y rect, text Spécifie la position du sommet d'un objet graphique. <rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />

Balise <g>

Permet de grouper des éléments. Tous ses enfants hériteront de ses attributs 
<svg height="50" width="100">
    <g stroke="black" stroke-width="5">
        <path d="M5 10 l50 0" stroke-linecap="butt"/>
        <path d="M5 20 l50 0" stroke-linecap="square"/>
        <path d="M5 30 l50 0" stroke-linecap="round"/>
    </g>
</svg>

Balise <defs>

Permet de stocker des éléments graphiques qui vont pouvoir être réutilisés (ces éléments ne sont pas dessinés).
L'attribut id est utilisé pour permettre de les référencer. 
<svg>
    <!-- Définition des objets -->
    <defs>
        <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:.2"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
        </radialGradient>
    </defs>

    <!-- Utilisation des objets -->
    <circle cx="20" cy="20" r="15" stroke="black" fill="url('#gradient1')"/>
</svg>

Stroke

PropriétéUtilitéExemple
stroke Définit la couleur d'un texte, d'une ligne ou de la limite d'un élément. 
<svg height="30" width="100">
    <line x1="0" y1="10" x2="100" y2="10" stroke="red" />
    <line x1="0" y1="20" x2="100" y2="20" stroke="#ccc" />
    <line x1="0" y1="30" x2="100" y2="30" stroke="rgb(100, 100, 100)" />
</svg>
stroke-width Définit l'épaisseur d'une ligne, d'un texte, ou de la limite d'un élément. 
<svg height="35" width="100">
    <g stroke="black">
        <line x1="0" y1="10" x2="100" y2="10" stroke-width="1" />
        <line x1="0" y1="20" x2="100" y2="20" stroke-width="3" />
        <line x1="0" y1="30" x2="100" y2="30" stroke-width="5" />
    </g>
</svg>
stroke-linecap Définit l'apparence des extrémités d'un chemin ouvert.
  • butt : rien n'est dessiné en plus - valeur par défaut.
  • round : se finit par un demi-cercle.
  • square : se finit par un carré en plus.
 
<svg height="50" width="100">
    <g stroke="black" stroke-width="5" >
        <path d="M5 10 l50 0" stroke-linecap="butt"/>
        <path d="M5 20 l50 0" stroke-linecap="square"/>
        <path d="M5 30 l50 0" stroke-linecap="round"/>
    </g>
</svg>
stroke-dasharray Spécifie un pattern pour représenter des pointillés.
Succession de chiffres indiquant les longueurs remplies et laissés vides.
Les chiffres peuvent être séparés par des espaces ou des virgules.
Si un nombre impair de chiffres est spécifié, les chiffres sont répétés :
1,2,3 est équivalent à 1,2,3,1,2,3 
<svg height="80" width="300">
    <g fill="none" stroke="black" stroke-width="1">
        <path stroke-dasharray="5,5" d="M5 20 l215 0" />
        <path stroke-dasharray="10 10" d="M5 40 l215 0" />
        <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
    </g>
</svg>

Gradients

Les gradients peuvent être définis dans le tag <def>.
Gradient Exemple
linearGradient 
<linearGradient id="purple_red" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
    <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
<linearGradient id="purple_yellow" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
    <stop offset="50%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
</linearGradient/>
radialGradient 
<radialGradient id="green_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:.2"/>
    <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>