18041 sujets

Questions générales et questions de débutants

Carte interactive SVG non basique

Bonjour à tous,

Je recherche des infos concernant la création de carte interactive SVG. En effet, si on trouve pas mal de tutoriels sur le sujet, ceux-ci en restent à proposer des solutions pour des cartes toutes simples, avec des fonds (par exemple) de départements vides, sans aucune info dedans.

La question que je me pose c'est comment procéder quand on veut une carte avec :
- des textes (noms de villes,...)
- des images (logo d'une région ou d'un département, d'un site, etc...)

1 -> Ces nouveaux éléments doivent-ils être créés dans le logiciel vectoriel ? Sur le fichier carte ? Indépendamment ? Faut-il les exporter dans des formats particuliers (svg, png, jpg ?...)

2 -> Ensuite comment animer ces éléments ? De la même façon que les éléments SVG "de base" de la carte ?

(Ci-jointe une petite image avec un exemple, sur une zone, de comportements souhaités - sur le onmouseover)
Merci!
Modifié par stephan53 (25 Jan 2018 - 14:45)
Modérateur
Hello,

Un document SVG est un peu comme du html (c'est un fichier texte et non un fichier compilé). Tu retrouves le même type de syntaxe. Pour le css, c'est pareil. La même syntaxe mais avec des propriétés différentes (stroke, stroke-width, dasharray, fill, etc.) Bien sûr le JS est égale à lui même.

Tu as posé une question intéressante. Avec un logiciel ou pas et si logiciel, comment exporter ? Oui, je te conseille d'utiliser un logiciel comme Inkscape (exemple d'utilisation de cet outil et comment se passe la création d'une application digitale ). Raphael avait suggéré un autre logiciel. Je ne me souviens plus de son nom. Fais une recherche sur le forum et peut être que tu vas arriver à le trouver. Sinon, peut être que Raphael va se manifester et te donner son nom ou tout simplement demande lui par mp. Il faut dire que je reste attaché à Inkscape. En soit créer à la main (avec éditeur de code), tu peux. Mais bonne chance pour coder la valeur de l'attribut "d" de l'élément <path>. Une chose est sûr, vérifie bien que les path (formes géométriques vectorielles) soient bien fermés Ça va t'éviter des bugs disgracieux à l'oeil.

Tu exportes ton document en SVG ! Ensuite, via le css et/ou le javascript, tu dynamises ton document (avec l'événement mouseover)

Je pense que tu peux utiliser conjointement ce genre de script : scour (python est obligatoire pour l'utiliser). Sache aussi qu'il y a des choses intéressantes sur npm à ce sujet. Smiley cligne

En annexe, des ressources relatives à la discussion :
- SVG Essentials (une petite merveille)
- Inkscape : guide du logiciel de dessin vectoriel
- linuxgraphic (le forum et le site)
- Imppao Weblog
- Restituez et perfectionnez vos esquisses grâce à Inkscape ! (je viens de découvrir son existence)
Modifié par niuxe (25 Jan 2018 - 20:35)
Bonjour, et merci pour ces éléments de réponse...

En fait, plus concrètement, je me demandais comment on peut travailler dès lors qu'on souhaite plusieurs niveaux d'affichage (des niveaux qui se superposent).

Je reprends mon exemple :
- à la base, une carte avec plusieurs zones (départements par ex). Ca représente le "fond", bref c'est la carte SVG.
- mais aussi par là-dessus, des textes (de noms de villes, etc...)
- des images encore par-dessus, plus complexes que le fond de carte découpé (ex : logo d'une région ou d'un département, d'un site, etc...)

Je vois que mon image hier n'est pas passée, je la remets (il faut valider 2 fois apparemment...) :
upload/1516969644-29341-img04.png

Ca ne me semble pas possible de traiter en SVG des noms de ville ou des graphisme plus complexes. Donc comment faire pour ces éléments ? Peut-on les traiter en JPG, et mettre ces éléments JPG par-dessus la carte SVG (et les animer ensuite...) ?
Moi je ferais tout de même la totalité en SVG, une surcouche en images non vectorielles ne rendant pas les choses plus simple. Mais quoi qu'il en soit c'est du boulot...
Modérateur
Bonjour,

On peut faire tout en svg. Pour les images pixelisées existantes et les textes, il est facile de les intégrer au svg tel quel en utilisant respectivement les balises svg <image> et <text>. Nul besoin de tout mettre sous la forme d'un <path>.

Pour ce qui est du logiciel, je suis comme Niuxe, j'aime bien Inkscape.

EDIT : à noter que Inkscape possède une fonction permettant de transformer des images pixélisées en images vectorielles.

Amicalement,
Modifié par parsimonhi (27 Jan 2018 - 10:42)
Sujet clos
Aller à