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
<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.
<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.
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"
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.
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
<rect width="300" height="100" fill="blue" stroke="black" stroke-width="5" />
Cercle
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
Triangle (Polygone)
<polygon points="200,10 250,190 160,190" fill="lime" stroke="purple" stroke-width="1" />
Hexagone (Polygone)
<polygon points="100,10 200,10 250,100 200,190 100,190 50,100 " fill="black" stroke="yellow" stroke-width="3" />
Ligne droite
<line x1="5" y1="5" x2="200" y2="200" stroke="purple" stroke-width="2" />
Ellipse
<ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="2" fill="yellow" />
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 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>
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>
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 |
|
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" />
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" />
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" />
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" />
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