Glossaire basique

Langage SVG

Images vectorielles : représentations de formes géométriques telles qu'un cercle, un rectangle ou un segment. Ceux-ci sont représentés par des formules mathématiques (un rectangle est défini par deux points, un cercle par un centre et un rayon, une courbe par plusieurs points et une équation). Edutechwiki

Balises principales du document SVG

<svg> : cette balise se trouve au début du document.

</svg> : cette balise se trouve à la fin du document.

<> : cette balise ouvre une ligne de code.

</> : cette balise ferme une ligne de code.

Figures

<rect/> : cette balise permet de créer des rectangles et des carrés.

<circle/> : permet de créer des circles.

<ellipse/> : permet de créer des ellipsis.

<text></text>: permet d’ajouter de texte

<polygon/> : permet de créer des triangles et d’autres polygones.

<line/> : permet de créer des lignes droites.

<polyline/> : permet de créer des formes composées des lignes droites.

Attributs

Tous les attributs doivent avoir une valeur.

→ Attention aux marques utilisées.  Ex : width="100"

width : largeur de la figure ou du document svg .

height : hauteur de la figure ou du document svg.

cx : coordonnée x, sur l’axe horizontal, c’est-à-dire, le côté gauche

cy : coordonnée y, sur l’axe vertical, c’est-à-dire, le bord superieur.

r : rayon du cercle.

rx / ry : quand on utilise ces attributs pour un rectangle ou un carré ils rendent les angles rond.

cx  / cy : quand on utilise ces attributs pour une ellipse le cx define la coordonnée x du centre de l’ellipse et le cy define la coordonnée y du centre de l’ellipse.

rx / ry : quand on utilise ces attributs pour une ellipse le rx define le rayon horizontal et le ry define le rayon vertical.

stroke : trait qui encadre les figures.

stroke-width : largeur du trait.

fill : couleur avec laquelle on remplit les figures.

fill-opacity : opacité de la couleur des figures.

stroke-opacity : opacité de la couleur du trait qui encadre les figures.

x1 + y1 : le x1 définit le début d’une ligne sur l’axe horizontal et le y1 définit le début d’une ligne sur l’axe vertical.

x2 + y2 : le x2 définit la fin d’une ligne sur l’axe horizontal et le y2 définit la fin d’une ligne sur l’axe vertical.

polygon points : les points définissent les coordonnées x et y pour chaque angle d’un polygone.

→ au lieu de nommer chaque attribut on peut utiliser un mega-attribut qui présent à l’intérieur chaque attribut suivi des deux-points (:) et séparé des autres attributs par un point-virgule (;).

Exemple : style="fill:red;stroke:black;stroke-width:5;opacity:0.5" 

Gradients

Un Gradient : est un dégradé est une transition en douceur d'une couleur à une autre. Il y existe 2 types : lineaire et radiale.

<defs> : balise qui ouvre l’emboîtement des gradients.

</defs> : balise qui ouvre l’emboîtement des gradients.

<linearGradient> : balise qui ouvre le gradient lineaire.

</linearGradient> : balise qui ferme le gradient linéaire.

id =””  : attribut qui definit le nom unique pour le gradient linéaire. Ce nom sera utilisé dans la définition de la figure au lieu du nom de la couleur.

x1, x2, y1, y2 : definissent le début et la fin de la position du gradient linéaire.

<stop/> : balise qui spécifie les couleurs. La gamme de couleurs pour un gradient linéaire peut être composée de deux ou plusieurs couleurs.

offset : attribut utilisé pour définir le début et la fin de la couleur du gradient linéaire.

fill =”url(#gradiente)” : attribut qui lie la figure avec le gradient linéaire.

<radialGradient> : balise qui ouvre le gradient radiale.

</radialGradient> : balise qui ferme le gradient radiale

id =””  : attribut qui definit le nom unique pour le gradient radiale. Ce nom sera utilisé dans la définition de la figure au lieu du nom de la couleur.

cx, cy et r : définissent le cercle extérieur.

fx et fy : définissent le cercle intérieur.

<stop/> : balise qui spécifie les couleurs. La gamme de couleurs pour un gradient radiale peut être composée de deux ou plusieurs couleurs.

offset : attribut utilisé pour définir le début et la fin de la couleur du gradient radiale.

fill =”url(#gradiente)” : attribut qui lie la figure avec le gradient radiale.

Exemples de figures

carre.png

Carré

  <rect x="50" y="20" width="150" height="150"

  fill="green" stroke="gray" stroke-width="5" fill-opacity="0.6" stroke-opacity"0.9" />

rectangle.png

Rectangle

  <rect width="300" height="100" fill="blue" stroke="black" stroke-width="5" />

cercle.png

Cercle

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

triangle.png

Triangle (Polygone)

  <polygon points="200,10 250,190 160,190" fill="lime" stroke="purple" stroke-width="1" />

hexagone.png

Hexagone (Polygone)

  <polygon points="100,10 200,10 250,100 200,190 100,190 50,100 " fill="black" stroke="yellow" stroke-width="3" />

 

ligneDroite.png

Ligne droite

  <line x1="5" y1="5" x2="200" y2="200" stroke="purple" stroke-width="2" />

ellipse.png

Ellipse

<ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="2" fill="yellow" />

polyline.png

Polyline

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"

  fill="white" stroke="brown" stroke-width="4" />

gradient.png

Gradient linéaire

<svg>

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:brown;stop-opacity:1" />

      <stop offset="100%" style="stop-color:red;stop-opacity:1" />

    </linearGradient>

  </defs>  

<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

</svg>

gradientradiale.png

Gradient radiale

<svg>

  <defs>

    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

   <stop offset="0%" style="stop-color:red;stop-opacity:0" />

    <stop offset="100%" style="stop-color:brown;stop-opacity:1" />

    </radialGradient>

  </defs>

  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

</svg>

Noms de couleurs en SVG

aliceblue

 

antiquewhite

aqua(Safe 16 Hex3)

aquamarine

azure

 

beige

bisque

black(Safe 16 Hex3)

blanchedalmond

 

blue(Safe 16 Hex3)

blueviolet

brown

burlywood

 

cadetblue

chartreuse

chocolate

coral

 

cornflowerblue

cornsilk

crimson

cyan(Safe 16=aqua Hex3)

 

darkblue

darkcyan

darkgoldenrod

darkgray

 

darkgreen

darkgrey

darkkhaki

darkmagenta

 

darkolivegreen

darkorange

darkorchid

darkred

 

darksalmon

darkseagreen

darkslateblue

darkslategray

 

darkslategrey

darkturquoise

darkviolet

deeppink

 

deepskyblue

dimgray

dimgrey

dodgerblue

 

firebrick

floralwhite

forestgreen

fuchsia(Safe 16 Hex3)

 

gainsboro

ghostwhite

gold

goldenrod

 

gray(16)

green(16)

greenyellow

grey(16)

 

honeydew

hotpink

indianred

indigo

 

ivory

khaki

lavender

lavenderblush

 

lawngreen

lemonchiffon

lightblue

lightcoral

 

lightcyan

lightgoldenrodyellow

lightgray

lightgreen

 

lightgrey

lightpink

lightsalmon

lightseagreen

 

lightskyblue

lightslategray(Hex3)

lightslategrey(Hex3)

lightsteelblue

 

lightyellow

lime(Safe 16 Hex3)

limegreen

linen

 

magenta(Safe 16=fuchsia Hex3)

maroon(16)

mediumaquamarine

mediumblue

 

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

 

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue

 

mintcream

mistyrose

moccasin

navajowhite

 

navy(16)

oldlace

olive(16)

olivedrab

 

orange

orangered

orchid

palegoldenrod

 

palegreen

paleturquoise

palevioletred

papayawhip

 

peachpuff

peru

pink

plum

 

powderblue

purple(16)

red(Safe 16 Hex3)

rosybrown

 

royalblue

saddlebrown

salmon

sandybrown

 

seagreen

seashell

sienna

silver(16)

 

skyblue

slateblue

slategray

slategrey

 

snow

springgreen

steelblue

tan

 

teal(16)

thistle

tomato

turquoise

 

violet

wheat

white(Safe 16 Hex3)

whitesmoke

 

yellow(Safe 16 Hex3)

yellowgreen

 

Exemples de couleurs en format RGB[a][b][c][d]

Tableaux Madrid, 3 (niveau 3.3) :

fond gris :

         <stop offset="0%" style="stop-color:gray;stop-opacity:1" />

         <stop offset="100%" style="stop-color:firebrick;stop-opacity:1" />

chaise marron :

<stop offset="0%" style="stop-color:gray;stop-opacity:1" />

         <stop offset="100%" style="stop-color:black;stop-opacity:1" />

Tableau Madrid, 5 (niveau 3.5) :

cercle (soleil) :
             <stop offset="0%" style="stop-color:gray;stop-opacity:1" />
             <stop offset="100%" style="stop-color:red;stop-opacity:1" />
1ère petite ellipse (nuage rouge) :
             <stop offset="0%" style="stop-color:lightblue;stop-opacity:1" />
             <stop offset="100%" style="stop-color:red;stop-opacity:1" />
2ème petite ellipse (nuage violet) :
             <stop offset="0%" style="stop-color:gainsboro;stop-opacity:1" />
             <stop offset="100%" style="stop-color:plum;stop-opacity:1" />
grande ellipse (mer) :
     <stop offset="0%" style="stop-color:gainsboro;stop-opacity:1" />
     <stop offset="100%" style="stop-color:
plum;stop-opacity:1" />

Tableau Lisbonne, 1 (niveau 4.1) :

rectangle (base du sapin):

fill="rgb(102,51,0)"

triangle (sapin) :

fill="rgb(5,81,5)"

cercle bleu :

        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />

         <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />

cercle violet :

        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />

         <stop offset="100%" style="stop-color:rgb(193,147,208);stop-opacity:1" />

cercle jaune :

        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />

         <stop offset="100%" style="stop-color:rgb(238,218,123);stop-opacity:1" />

Tableau Lisbonne, 3 (niveau 4.3) :

rectangles marron de la maison : rgb(64,6,4)

cadre, ellipses vertes :

<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />

          <stop offset="100%" style="stop-color:rgb(9,108,16);stop-opacity:1" />

Tableau Lisbonne, 4 (niveau 4.4) :

lignes violet : rgb(236,122,198)

polygon marron :

<stop offset="0%" style="stop-color:rgb(128,44,9);stop-opacity:0" />

          <stop offset="100%" style="stop-color:rgb(101,33,3);stop-opacity:1" />

ballon vert :

<stop offset="0%" style="stop-color:rgb(236,122,198);stop-opacity:0" />

          <stop offset="100%" style="stop-color:rgb(195,218,105);stop-opacity:1" />

cadre bleu clair :

<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />

          <stop offset="100%" style="stop-color:rgb(182,207,222);stop-opacity:1" />

[a]on doit donner les definitions de l'rgb, le joueur ne pourra pas les deviner, vous êtes d'accord ?

[b]je croie qu'il serai mieux de changer ce description "rgb" pour le nom des couleurs, je peut le faire ;)

[c]J'ai changé ici les couleurs pour le tableau 3 de la ville 3 e et le 5 de la 5ème.

[d]Merci, Angela, oui, on est tous d'accord :)) je vais les changer aussi dans les fichiers des niveaux et dans les dialogues