Pour suivre ces activités, il est nécessaire d'avoir des connaissances en HTML et en CSS.
Le svg d'après Wikipédia :
Le Scalable Vector Graphics (en français « graphique vectoriel adaptable»), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.
En résumé, le svg est un format de données conçu pour décrire des graphiques vectoriels. Mais qu'est-ce qu'un graphique vectoriel ?
Ici aussi, consultons Wikipédia sur ce sujet :
Une image vectorielle (ou image en mode trait), en informatique, est une image numérique composée d'objets géométriques individuels, des primitives géométriques (segments de droite, arcs de cercle, courbes de Bézier, polygones, etc.), définis chacun par différents attributs (forme, position, couleur, remplissage, visibilité, etc.) et auxquels on peut appliquer différentes transformations (homothéties, rotations, écrasement, mise à l'échelle, extrusion, inclinaison, effet miroir, dégradé de formes, morphage, etc.). Elle se différencie en cela des images matricielles (ou images bitmap), qui sont constituées de pixels.
Tout est expliqué ci-dessus, mais revenons sur l'essentiel :
il existe en informatique 2 types d'images :
Les images vectorielles ont un immense avantage par rapport aux images matricielles : il est possible de zoomer (ou dézoomer) comme bon vous semble avec une image vectorielle sans que cela dégrade la qualité de cette image.
Nous aurons l'occasion de revenir sur la différence entre les images vectorielles et les images matricielles, pour l'instant, concentrons-nous sur le svg.
Le HTML5 propose une balise svg. Cette balise svg permettra d'afficher sur votre page web une "zone de dessin".
Créer un dossier "svg" dans votre espace de travail. Ceci étant fait, créer un fichier "index.html" et "style.css" dans ce dossier "svg".
Compléter le fichier "index.html" comme suit :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dessiner avec svg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg id="dessin"></svg>
</body>
</html>
Compléter le fichier "style.css" comme suit :
#dessin {
width:800px;
height:600px;
border : 1px solid black;
}
Ouvrir le fichier index.html dans un navigateur
Comme vous pouvez le constater, une zone délimitée par une bordure apparait sur la page proposée par le navigateur. Cette zone sera notre zone de dessin. Pour ce qui est du code, rien de très compliqué, le html utilise le fichier "style.css". Ce fichier "style.css" permet de définir la largeur et la hauteur de notre zone de dessin ainsi que la bordure entourant cette même zone de dessin (zone de dessin qui aura été défini par la balise svg dans le code html). Dans la prochaine activité, nous commençerons à dessiner.