Après la première version de ma carte interactive (voir ici), j’en ai créé une deuxième à l’aide de la librairie OpenLayers.

Cette solution fonctionne, mais c’est comme disposer d’un outil multifonction mais d’en n’utiliser qu’une ou deux, OpenLayers étant une librairie permettant de faire beaucoup plus.

Une autre solution un peu plus « légère », mais tout autant moderne, existe : le SVG.

Le SVG, qu’est-ce que c’est ?

Le SVG, ou Scalable Vector Graphics (« graphique vectoriel adaptable »), est un format d’images vectorielles basé sur le langage de balisage XML.

L’avantage de ce format de fichier est que pour des formes simples (ce qui dans notre cas d’une carte des régions d’un pays) il est plus léger que le JPEG ou le PNG.

La structure d’un fichier SVG

Un fichier SVG est constitué d’une balise principale (<svg>), avec plusieurs attributs, qui contiendra toutes les formes de notre image.

Le SVG dispose de sept formes primitives :

• Rectangle (<rect>)
• Cercle (<circle>)
• Ellipse (<ellipse>)
• Ligne (<line>)
• Polyligne (<polyline>)
• Polygone (<polygon>)
• Chemin (<path>)

Pour plus de détail sur ces primitives, et toutes les possibilités du format, je vous invite à consulter l’excellent tutoriel d’Alsacréations à ce sujet. Sinon, en anglais, je vous recommande aussi les tutoriels de W3Schools ou de Peter Collingridge.

Dans notre cas, nous utiliserons des polygones.

Les polygones en SVG

En SVG, les polygones sont définis par une suite de points (eux-mêmes définis par une coordonnée X et une coordonnée Y) qui seront reliés entre eux.

Le SVG étant un format de description d’image, les coordonnées ont pour origine le coin supérieur gauche du document, cela veut dire que l’on peut directement utiliser les coordonnées de la map HTML de ma toute première carte.