SVG et la cartographie

Le format SVG est de plus en plus utilisé en matière de cartographie.

La carte des départements français (métropole et Corse uniquement)

J'ai "piqué" ce fichier sur la "toile" je l'ai modifié un peu en ajoutant une feuille de style interne : dès qu'un département est survolé il passe en rouge. De plus un département est rempli de noir.
J'insère ce fichier SVG dans la page avec la balise img. image SVG

L'effet CSS lors du survol d'un département ne fonctionne pas !
Donc la feuille de style est prise en compte partiellement.

La carte des anciennes régions de France

J'ai récupéré ce fichier sur la "toile". Ce fichier SVG a été généré avec Adobe Illustrator.
j'ai modifié le code en ajoutant une feuille de style interne : dès qu'une région est survolée elle passe en rouge.
J'insère ce fichier SVG avec la balise object.

L'effet CSS lors du survol d'une région fonctionne !

Le code de la page (extraits)

... <img src ="departements.svg" alt ="image svg"/> ... <object type="image/svg+xml" data="regions_old.svg"></object> ...

J'aurais du également utiliser la balise object pour intégrer la première carte.
Dès qu'une image SVG contient une feuille de style interne avec des effets (:hover par exemple) il faut l'incorporer dans la page avec la balise object.

Le code des images SVG intégrées

J'ai récupéré ces images vectorielles sur la "toile" et j'ai ensuite modifié un peu le code.
J'ai entre autres ajouté l'attribut viewBox dans la balise SVG et j'ai exprimé les dimensions en pourcentage.
Ainsi les images vectorielles, même sur un petit écran, ne seront jamais rognées.

Testez cette page sur votre smartphone ou à défaut sur votre PC en réduisant la largeur de la fenêtre à celle d'un mobile et observez ...

Le code de "departements.svg" (extraits)

... <svg id="map" width="100%" height="100%" ... viewBox="0 0 492 543"> <style> path:hover{fill : red ; } #corse {fill : black ; } </style> <path data-num="2B" id ='corse' d="M469.96347,445.8937 L467.02597,447.86245 L467.43222,449.79995 L468.99472,451.7687 ... <path data-num="84" d="M379,377.34375 L376.25,377.5625 L374.125,380.875 L374.6875,384.375 L378,384.78125 L377.4375,386.34375 L374.875,386.53125 L371.96875,389.46875 L371.1875,388.5 L371.75,384.59375 L370.59375,383.21875 L365.3125,384 L364.28125,386.09375 L364.84375,386.40625 L368.15625,391.90625 L368.15625,396.34375 L373.96875,402.125 L373.96875,404.625 L371.71875,405.90625 L371.875,405.96875 L378.9375,408.96875 L381.9375,412.3125 L383.375,414.28125 L387.25,416.03125 L391.84375,415.875 L399.4375,419.03125 L403.6875,419.5625 L409,418.34375 L411.1875,416.625 L411.46875,415.15625 L407.40625,410.5625 L402.96875,410.5625 L402.96875,408.96875 L404.5625,407.1875 L404.5625,405.25 L401.03125,403.5 L400.6875,400.65625 L402.625,399.78125 L402.625,397.3125 L400.5,396.9375 L400.34375,394.28125 L400.3125,394.09375 L398.53125,393.96875 L395.59375,391.8125 L394.8125,389.28125 L389.34375,388.875 L385.25,388.5 L384.84375,386.15625 L386.21875,383.21875 L383.6875,385.375 L379.78125,384.96875 L379,383.59375 L381.71875,379.90625 L379,377.34375 L379,377.34375 L379,377.34375 L379,377.34375 Z M379,377.34375"> </path> ...

J'ai rajoute id ="corse" dans l'un des chemins.
J'ai aussi rajouté l'attribut viewBox pour pouvoir exprimer les dimensions de l'image vectorielle en pourcentages afin qu'elle ne soit jamais rognée sur un petit écran.
Le code du chemin relatif au département du Var est affiché complétement.

Le code de "regions_old.svg" (extrait)

<!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg"> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]> <svg version="1.0" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="629.599" height="673" viewBox="0 0 629.599 673" overflow="visible" enable-background="new 0 0 629.599 673" xml:space="preserve"> <style> path:hover {fill : red ;} </style> <g id="Calque_1"> <g> <g> <path fill="#FFFFFF" d="M594.799,136l-9.5-3.4l-16.6-0.6l-0.4-0.1l-1.7,5L565,140l-10,0.2l-10.2-5.1l-1-3.2l-5.399,12.2l6.1,2.7 l-1.9,2.8l2.601,1.8l1.6-2.9l3.2,0.4l4.9,3.9l-3.301,14.9l-2.5,1.9l-4-0.3l2.2,1.5l-1.5,11.2l5.8,2.6l-1.1,1l-4.7,15.1 l-5.399,8.9v6.9l-3.101,2.7l8.5,5.6l0.5,10h3.2l2.4,5.8l0.399-0.1l3.2,0.8l-0.9,3.3h8.5l3.101-1.1l0.6-3.4l3.2-0.2l0.1-3.5 l2.601-2.2l-3.3-8.7l3.1-17.3l-2.1-11.6l6.6-15.7l1.6-17.5L590.4,148L594.799,136z"/> ...

On voit bien que ce fichier SVG a été généré par Adobe Illustrator. On aurait pu utiser Inskcape ...
Retour menu