Carte de France des départements en SVG, gratuite

Un fichier SVG vectoriel des 101 départements de 2026, pensé pour le web : un tracé par département, avec son numéro et son nom, sans texte ni couleur imposée. Vous le stylez en CSS et le rendez cliquable en quelques lignes de JavaScript.

• Départements de France 2026 (SVG)france-departements-2026.svg · 340 Ko (347 931 octets) · 101 départements, outre-mer en encarts Télécharger
• Régions de France 2026 (GeoJSON simplifié)regions-2026-simplified.geojson · 46 Ko (47 211 octets) · 18 régions, WGS 84, pour Leaflet, D3, MapLibre ou QGIS Télécharger

Licence Ouverte 2.0 : réutilisation libre, même commerciale, à condition d'afficher « Source : IGN – ADMIN EXPRESS COG CARTO PE 2026 – Licence Ouverte 2.0 » (pied de page, crédits ou légende). Les mêmes fichiers sont publiés dans le dépôt public github.com/Kamelyoul/france-map-svg.

Ce que contient le fichier

• viewBox="0 0 1000 960" ; métropole en projection Lambert-93 (EPSG:2154), la projection officielle de la France métropolitaine, donc sans l'étirement d'une carte en longitude/latitude.
• Un <path> par département, identifiants dep-01 à dep-95, dep-2A, dep-2B, dep-971 à dep-976.
• Les attributs data-code et data-nom et un <title> (infobulle native) sur chaque département.
• Cinq encarts à gauche, de haut en bas : Guadeloupe, Martinique, Guyane, La Réunion, Mayotte, chacun à sa propre échelle.
• Aucun texte, aucune couleur codée en dur hors d'un petit bloc <style> que vous pouvez remplacer.

<path id="dep-01" class="zone" data-code="01" data-nom="Ain" d="M694.6,511.7L693.3,511.2…Z">
  <title>Ain (01)</title>
</path>

Tailles mesurées

La simplification d'environ 250 m retire 59 % des points de la métropole (27 052 au lieu de 66 403). Chaque département étant simplifié séparément, de très fines interstices peuvent apparaître entre voisins si vous supprimez le contour blanc : le trait par défaut (stroke-width: 0.8) les masque.

Styliser la carte en CSS

Insérez le SVG dans la page (et non dans une balise <img>, qui empêche de styler ou de cliquer chaque département), puis :

.zone            { fill: #dfe7ef; stroke: #fff; stroke-width: .8; }
.zone:hover      { fill: #9fb3c8; }
#dep-13          { fill: #1f4e79; }            /* un département */
.zone[data-code^="97"] { fill: #f0b429; }      /* l'outre-mer */

Rendre les départements cliquables

document.querySelector('svg').addEventListener('click', (e) => {
  const zone = e.target.closest('path.zone');
  if (zone) console.log(zone.dataset.code, zone.dataset.nom); // "13" "Bouches-du-Rhône"
});

Pour le clavier, donnez à chaque tracé tabindex="0", role="button" et un aria-label, gérez Entrée et Espace, et remplacez le role="img" de la racine par role="group" : avec img, les lecteurs d'écran ignorent les départements. C'est ce que fait la carte interactive de ce site.

Une carte de couleurs (choroplèthe) en cinq lignes

const valeurs = { '75': 0.9, '13': 0.6, '69': 0.7 };   // vos données, par numéro
for (const [code, v] of Object.entries(valeurs)) {
  document.getElementById('dep-' + code).style.fill = `rgba(31, 78, 121, ${v})`;
}

Autres cartes

• Carte interactive
  Cliquez sur un département : numéro, chef-lieu, région.
• Carte vierge à imprimer
  PDF A4 et SVG muets, à colorier ou à compléter.
• Carte des régions
  Les 18 régions 2026, leurs chefs-lieux et leurs départements.
• Départements par numéro
  Carte avec les numéros et liste des 101 préfectures.