🕵️♀️ La technique secrète pour récupérer des visualisations dans le code d’un site
L’intérêt. Vous avez sous vos yeux LA cartographie dont vous avez besoin pour votre projet. Pas de bol, les données ne sont pas disponibles, vous ne pouvez donc pas reproduire cette carte. Avec ce DIY, vous économiserez beaucoup de temps en apprenant à récupérer - lorsque cela est possible - des éléments SVG (cartes, graphiques de données et autres assets visuels) d’une page web.
Les pré-requis. Savoir ce qu’est un fichier SVG. Se débrouiller avec Figma (vous pouvez démarrer ici). Enfin, last but not least, maîtriser l’art du clic droit au survol du visuel à récupérer depuis votre navigateur et savoir… le copier-coller.
Mode d’emploi. Prenons un cas concret, cette magnifique carte isochrone montrant le temps nécessaire pour se rendre dans n'importe quel point de l’Europe en partant de Paris, en utilisant uniquement le train 🚊 ou en marchant 🚶♀️à un rythme rapide de 5 minutes par kilomètre. Les données ne sont pas disponibles et, par ailleurs, il serait fastidieux et long de reproduire cette carte.
1. 🕶️️ Commençons par vérifier que cette carte est bien au format SVG : positionnez-vous au-dessus avec votre curseur et faites un clic droit. Un menu contextuel apparaît avec une option “Inspecter” parmi les actions possibles. Ce libellé peut varier en fonction de votre navigateur : “Inspecter l’élément” sur Safari par exemple. Sélectionnez celui-ci.
2. 😱 Pas de panique pour celles et ceux qui ne maîtrisent pas le code : vous venez juste d’afficher la fenêtre des outils de développement. C’est l’envers du décor du site web qui s’affiche ici. Dans la partie de gauche, vous voyez le code HTML avec les balises des éléments de la page. 🔍 Nous y cherchons une balise <svg>. Utilisez la recherche en tapant svg. Parfois, ce fameux SVG est caché à l'intérieur d’autres balises (<div>), n’hésitez donc pas à les ouvrir pour voir s’il s’y cache. Dans notre cas, elle est là ! 🎉
3. 🖲️ Positionnez-vous sur cette balise SVG et cliquez pour la sélectionner. Faites un simple ⌘+C (MAC) / Ctrl+C (PC) pour le copier.
4. ➡️ Rendez-vous sur Figma, ouvrez votre projet ou un nouveau document (⌘+N) et faite un ⌘+V (mac) / Ctrl+V (PC) pour coller ce SVG. Tadaaa, vous venez de récupérer la carte. 🪄
5. Chaque couche est un objet vectoriel que vous pouvez désormais manipuler/modifier. Petite astuce Figma au passage :
🥅 En sélectionnant cette carte, le menu “Selection colors” affichera toutes les couleurs qui la composent. Vous pouvez donc éditer ces couleurs à la volée depuis ce menu, sans avoir à cliquer sur les couches une à une.
Conclusion. Voici un copié/collé qui peut vous faire économiser pas mal de temps, ça serait dommage de s’en priver.
👆️Cadeau : WeDoData a repris cette carte pour la publier, après une bonne couche de design, dans l’Atlas des mobilités de la fondation Heinrich Böll.
POUR ALLER ENCORE PLUS LOIN
- Pour compléter ce DIY, vous pouvez utiliser le plugin SVG Gobbler (sur Google Chrome uniquement) qui vous permettra de télécharger tous les SVG d’un site, mais pas ceux bien cachés comme la carte de notre tuto.
- Vous optimisez vos fichiers PNG et JPG ? Conservez cette bonne pratique avec vos fichiers SVG en utilisant l’incontournable site SVGOMG.
