Le SVG (partie 1)

Le SVG. (partie 1)

Une image svg est une image composée de vecteurs, par conséquent elle ne perd pas en qualité en l’agrandissant ou en la rapetissant car ce n’est jamais qu’un affichage d’un multiple fois chaque vecteur la composant

Pour l’intégrer il existe plusieurs manières

La balise iframe, img, svg, ou background-image dans du CSS

en gros la balise svg permet de dessiner a meme le navigateur, ce dernier interpretant le code que l'on ecrit

exemples:

<iframe src="image.svg" width="800" height="800">*

<img src="image.svg"/>

<svg><circle cx="200" cy="200" r="200"></svg>

.classe{

Background-image :url('image.svg') repeat;

}

(iframe permet d'inserer une page html dans une autre page html, en miniature dans un conteneur par exemple)

On peu aussi l’utiliser dans une balise canvas, c'est-a-dire obligatoirement travaillée derrière avec du javascript ou déclinaisons ( jquery etc)

note :

C’est un système de coordonnées cartésien comme en math, mais avec l’axe y inversé

une balise svg peut contenir d’autres balises svg, des balises spécifiques (<rect/>,<circle/><polygon/>,...)

et aussi des balises g, qui sont l’équivalent d'une balise conteneur pour les svg. 
En somme, cela permet de grouper des svg et d’appliquer dessus un style pour le tout en une fois, comme des rotations, des translations etc.

L’ordre dans lequel sont intégré les balises fait une légère différence. Souvent le rendu final sera le même mais peut être différent dans certains cas particuliers.

<svg x=’100’><g transform="rotate(45 50 50)"><line …></g></svg>

fera d’abord le rotate et puis la translation

<g transform="rotate(45 50 50)"> <svg x="100"><line …></svg></g>

fera d’abord la translation et puis la rotation

TOUT le reste ne sont que des combinaisons des différents attributs et des balises relatives au svg

par exemple...


<svg>

<rect x="20" y="20" width="100" height="100"

      style="stroke: #009900;

         fill: #33ff33;"/>

<rect x="50" y="50" width="100" height="100"

      style="stroke: #000099;

         fill: #3333ff;

         fill-opacity: 0.5;"/>

</svg>

donne

et ainsi de suite avec cercles, des lignes, des polygones, chacun aura sa balise avec différents attributs et différentes valeurs possibles.



Mais alors vous allez me dire que vous ne savez plus ou donner de la tete, que choisir entre svg et canvas maintenant ? en fait les deux technologies sont toutes les deux valabes, elles ont chacune leur avantages et inconveniants, parfois une serait plus indiquée que l'autre suivant le but désiré, on pourrait meme imaginer les combiner.

je vous renvoi à cet Article pour en savoir plus sur les différences plus poussées et pour savoir quel choix faire.