Autres liens utiles :

Autres langues :

Sommaire

Dans cette première section, vous trouverez des informations générales concernant les SVG et comment les modifier, en passant par l'installation d'Inkscape et la configuration d'un modèle. Nous verrons également comment créer un SVG simple pour vous permettre de créer votre premier quiz avec SVG sur JetPunk.

Qu'est-ce qu'un SVG ?

Le SVG, ou Scalable Vector Graphics, est un format d'image vectorielle qui diffère profondément d'autres formats répandus comme le JPG ou GIF, qui sont des images matricielles ou raster graphics. Alors que ces formats stockent un nombre de pixels, les SVG stockent des objets.

Par exemple, un fichier SVG peut contenir un cercle et un rectangle. Ceux-ci sont alors stockés sous forme de points et d'instructions sur la façon dont ces points sont reliés. Cela diffère des images matricielles, dans lesquelles les pixels sont stockés de manière individuelle.

Le stockage d'objets et de formes (appelés chemins ou paths en anglais) permet une plus grande précision de l'image et signifie que la qualité de cette image n'est pas fonction du niveau de zoom : l'image vectorielle n'est jamais pixélisée. C'est ce que l'on remarque avec les cartes sur JetPunk : elles sont toujours claires et lisibles, peu importe le niveau de zoom.

Comment éditer un SVG ?

Il existe plusieurs façons de créer et d'éditer des fichiers SVG. Voici trois méthodes répandues :

• Utiliser Inkscape
• Utiliser MapShaper
• Éditer le SVG comme un fichier texte

Il est important de noter que les SVG ne sont, au fond, que des fichiers texte. Ils peuvent être ouverts, lus et modifiés à l'aide de n'importe quel éditeur de texte (comme le Bloc-notes ou TextEdit). Il s'agit de la 3ème option proposée ci-dessus, utile aux utilisateurs les plus chevronnés qui maitrisent l'édition brute de fichiers texte. Cependant, pour la plupart des utilisateurs, cette option sera la moins retenue car elle peut être déroutante.

La deuxième option est brièvement décrite dans un blog anglais, ici sur JetPunk, How to Make SVG Maps. Cependant cette méthode nécessite quelques connaissances en programmation, et dans l'ensemble n'est vraiment utile que pour les cartes géographiques. Bien que ce ne soit pas la méthode la plus pratique, vous trouverez d'autres explications quant à l'utilisation de MapShaper dans ce second blog : How To Make a Simple SVG Map. Encore une fois, cette méthode ne s'applique vraiment que pour la création de cartes géographiques et laisse peu de place à l'expansion dans d'autres domaines.

Nous arrivons maintenant à la première option, qui est la plus utilisée et la plus prisée : utiliser Inkscape. Inkscape est un logiciel open source gratuit, spécialement conçu pour l'édition de fichiers SVG. C'est le logiciel qui sera utilisé tout au long de ce Guide. Il vous permet de créer des SVG facilement et intuitivement à partir de zéro, ainsi que la possibilité d'éditer et d'ajouter directement des classes et des identifiants, nécessaires pour que les SVG interagissent avec JetPunk (nous y reviendrons plus loin).

Installer Inkscape

Passons maintenant à l'installation et à la configuration d'Inkscape. Tout d'abord, vous devrez télécharger ce logiciel. Vous pouvez le faire à partir de ce lien :

Télécharger Inkscape

Sur cette page, vous trouverez ce bandeau :

Vous devez sélectionner la version de votre système d'exploitation (Windows, MacOS...). Cliquez ensuite sur le bouton de téléchargement de l'installeur. Une fois le téléchargement effectué, procédez à l'installation de manière classique. Si vous utilisez Windows, après avoir suivi les instructions de l'installeur, vous devriez voir une fenêtre de ce genre :

Une fois l'installation terminée, vous pouvez ouvrir le logiciel. La fenêtre qui s'ouvre devrait ressembler à ceci :

C'est la "mise en page" principale d'Inkscape. Voyons brièvement quelques-unes de ses caractéristiques :

• La barre du haut avec "Fichier", "Édition" etc. s'appelle la barre de menus. Sur Mac, elle peut être en haut de l'écran, en dehors de la fenêtre d'Inkscape elle-même.
• Sur la gauche, vous trouvez la barre d'outils, avec une flèche de curseur, les formes et le créateur de texte. C'est ici que nous sélectionnerons la plupart des outils avec lesquels nous travaillerons.
• Enfin, la barre de contrôle des outils se trouve juste au-dessus de la page elle-même, sous la barre de menus. C'est ici que l'on peut modifier la hauteur et la largeur d'un objet, ainsi que sa position.

Nous reviendrons en détail sur ces différents éléments plus tard. Pour l'instant, une fois que vous avez téléchargé Inkscape, l'étape suivante consiste à configurer un modèle (template).

Configurer un modèle

Bien que cette étape soit optionnelle, elle est fortement recommandée pour réduire les éventuels problèmes rencontrés ultérieurement. Ce que nous allons faire, c'est configurer un modèle (template en anglais) afin qu'à chaque lancement d'Inkscape, vous commenciez avec les mêmes paramètres optimisés pour JetPunk.

Ces premiers paragraphes s'adressent aux utilisateurs désireux de travailler sur Inkscape en mode sombre, aussi appelé thème foncé. Pour cela, nous allons régler certains paramètres via la fenêtre Préférences. Sur Mac, on y accède en cliquant sur "Inkscape" dans le coin supérieur gauche de l'écran, puis en cliquant sur "Préférences". Sous Windows, allez dans "Édition" dans la barre de menus, puis "Préférences" tout en bas. La fenêtre suivante devrait apparaître :

Dans cette fenêtre, vous pourrez gérer les paramètres des différents outils, les préférences d'enregistrement, les raccourcis et les couleurs d'affichage. Pour ce dernier point en particulier, les couleurs sont réglables dans l'onglet "Interface" puis "Thème". Cochez "Utiliser le thème foncé" si vous le souhaitez. Vous pouvez également changer les couleurs des icônes et ajuster leurs tailles d'affichage à votre guise.

Nota : dans la suite de ce Guide SVG, les captures d'écran sont présentées avec un thème clair, par défaut sur Inkscape.

Passons maintenant au paramétrage du modèle en lui-même. Un paramétrage correct permettra d'éviter des erreurs fréquemment rencontrées par les créateurs de SVG sur JetPunk. Cela passe par :

• Régler l'unité du document en pixels
• Régler l'échelle de l'image à 1 pour que les zooms fonctionnent correctement
• Régler les dimensions du document aux valeurs maximums acceptées sur JetPunk

Ces paramètres se règlent dans les Propriétés du document, accessibles en cliquant sur "Fichier" dans la barre de menus, puis "Propriétés du document". La fenêtre suivante s'ouvre :

Voici une explication des différents encadrés de couleurs :

• Vert : Ce sont les unités utilisées dans ce document. Il est fortement recommandé de mettre ces deux unités en pixels (px), afin d'éviter tous problèmes liés aux unités en chargeant votre SVG sur JetPunk.
• Orange : Ce sont les dimensions du document, en pixels suite au réglage précédent. Nous les réglons aux dimensions maximums acceptées par JetPunk : 830px de large et 600px de haut.
• Rouge : C'est l'échelle du document. Ce paramètre est important car il affecte le comportement du zoom sur JetPunk. Le changement préalable des unités du documents (encadré vert) aura pu dérégler ce paramètre, qui doit être égal à 1.00000 afin que les unités valent réellement 1 pixel. Il est impératif de configurer l'échelle dès à présent pour éviter tout problème de zoom.
• Bleu : Pour finir, ces options sont propres à l'affichage de la page et sont personnalisables suivant vos goûts. Par exemple, les utilisateurs préférant le mode sombre pourront changer ici l'arrière-plan en gris foncé. Cependant, le réglage le plus important ici est l'activation de l'affichage de la bordure de page, qui permet de visualiser aisément les limites de votre SVG.

Une fois les réglages effectués, vous pouvez fermer la fenêtre des Propriétés du document. Comme dit précédemment, le bon réglage des paramètres encadrés en vert, orange et rouge est obligatoire pour que les SVG soient parfaitement supportés sur JetPunk ; le réglage des options encadrées en bleu est recommandé pour une meilleure utilisation du logiciel.

Pour finir, nous allons sauvegarder ces réglages dans un "modèle". Actuellement, les changements effectués ne sont affectés qu'au document en cours, mais nous allons les affecter par défaut à chaque lancement d'Inkscape. Pour ce faire, cliquez sur "Fichier" dans la barre de menus, puis "Enregistrer un modèle...". Une fenêtre s'ouvre avec quelques champs à renseigner. Il vous suffit de saisir "défaut" dans le champ "Nom" et de cocher "Définir comme modèle par défaut" :

Maintenant, il vous reste à cliquer sur "Save". Une fenêtre peut apparaître pour vous demander si vous souhaitez écraser le modèle par défaut actuel, et vous pourrez cliquer sur "Remplacer" pour valider. Cela remplacera le modèle par défaut, de manière à ce que vos paramètres soient chargés à chaque lancement d'Inkscape.

Créer votre premier SVG

Nous allons commencer par créer un dessin simple, de manière à nous familiariser avec Inkscape, puis nous ajouterons les attributs XML pour rendre ce dessin fonctionnel sur JetPunk.

Premièrement, nous allons passer en revue les principaux outils que nous utiliserons, situés dans la barre d'outils à gauche de la fenêtre principale. Nota : les symboles peuvent légèrement différer de ceux présentés ci-après, selon la version d'Inkscape que vous utilisez.

Pour la suite, nous allons utiliser l'outil 5, que l'on appellera "Stylo" pour plus de simplicité :

Pour commencer nous allons cliquer sur l'outil Stylo, puis cliquer avec le bouton gauche sur le document. Cela démarrera le chemin et vous verrez qu'un guide rouge indique où la ligne apparaîtra lors de votre prochain clic gauche. Assurez-vous que lorsque vous cliquez avec le bouton gauche, vous le faites sans faire glisser, sinon vous obtiendrez une courbe et non une ligne droite. Toutefois, si cela se produit il est possible de corriger facilement votre tracé comme nous allons le voir plus loin. Dessinez une forme en cliquant où vous le souhaitez, puis pour finir cliquez sur le carré au départ de votre chemin, de manière à le fermer. Vous obtiendrez quelque chose de ce genre :

La forme peut être colorée en blanc, ou noir ou sans fond suivant vos paramètres. Nous verrons comment éditer tout cela plus tard. Mais d'abord, nous allons modifier cette forme. Cliquez sur l'outil "Éditeur de nœuds" (le deuxième dans la barre d'outils ci-dessus) :

Avez-vous remarqué que notre forme comportait une courbe ? Nous allons nous en débarrasser en utilisant l'éditeur de nœuds. Lorsque nous sélectionnons cet outil, de petites formes apparaissent sur chaque coin de notre dessin :

Ces petites formes représentent justement les nœuds, qui définissent notre tracé. On remarque que les nœuds sont représentés par des losanges ou des carrés. Les losanges représentent les coins, signifiant que les lignes qui relient ces nœuds sont des segments droits, et les carrés représentent les nœuds courbes, ce qui veut dire que les lignes passant par ces nœuds seront courbes et non droites. Nous allons voir comment transformer une courbe en segment droit. Pour ce faire, cliquez sur le nœud carré. Des "guides" apparaissent, indiquant comment est définie la courbe passant par ce nœud :

Si vous déplacez les poignées circulaires au bout des guides, cela affectera le tracé de la courbe. Cependant, pour supprimer totalement la courbe, nous devons changer le type de nœud. Cela peut se faire grâce à la barre de contrôle d'outils, au-dessus de votre page. En particulier, lorsque le nœud de la courbe est sélectionné, ce sont les symboles suivants qui nous intéressent :

Ces 4 options définissent les différents types de nœuds. Dans notre cas, nous allons cliquer sur l'option la plus à gauche "Rendre durs les nœuds sélectionnés" (une autre façon d'appeler les coins). Après avoir cliqué, nous remarquons que notre petit nœud carré s'est changé en losange. Pourtant, nous constatons aussi que la courbe n'a pas disparu, et les guides qui la définissent sont toujours présents. Heureusement, il suffit de cliquer une seconde fois sur le même bouton que précédemment, et les guides seront supprimés. En appliquant la même méthode à tous les nœuds des courbes, vous obtiendrez un tracé pourvu uniquement de coins :

Nous allons maintenant modifier le visuel, ou style, de notre tracé. Pour se faire, prenez l'outil de sélection (celui en haut de la barre d'outils à gauche). Puis cliquez droit sur votre tracé et sélectionnez "Fond et contours...". Cela ouvrira un panneau sur le côté droit de votre fenêtre, qui ressemble à cela :

Depuis ce panneau, nous pouvons modifier le remplissage de Fond, le Contour et le Style de contour du chemin sélectionné (en changeant d'onglet situé en haut du panneau). Par défaut, nous choisissons un Fond et un Contour de type "Aplat", représenté par le carré plein juste à droite de la croix "X". Ce réglage permet d'avoir une couleur pleine et non un motif de remplissage. Quand l'option est correctement choisie, le texte "Aplat" apparaît au-dessus des sélecteurs de couleur "RVB" et "TSL".

Par défaut également, le codage des couleurs est de type RVBA. En d'autres termes, la couleur choisie se caractérise par une certaine quantité de Rouge, de Vert et de Bleu, ainsi qu'un canal Alpha pour la transparence. Vous pouvez choisir la couleur que vous souhaitez directement en cliquant sur le sélecteur, ou en entrant les quantités RVBA, ou en entrant un code couleur hexadécimal dans le champ "RVBA". Dans notre cas, le code couleur est ffffffff : 6 caractères f pour le blanc, suivis de "ff" pour régler l'opacité à son maximum. Vous pouvez également modifier l'opacité du chemin lui-même au bas de l'onglet "Fond et contours". Cela affectera à la fois le remplissage et le contour.

L'onglet "Contour" est identique à l'onglet "Fond", sauf qu'il affecte la bordure du tracé. Le troisième onglet est "Style du contour" :

Voici une explication des différentes lignes :

• Épaisseur : il s'agit de l'épaisseur du trait, en pixels. Pour la plupart des tracés sur JetPunk, la valeur recommandée est de 1px.
• Pointillés : rarement utilisé, ce paramètre vous permet de changer le tracé continu en pointillés ou tirets.
• Marqueurs : paramètre peu utilisé également, les "marqueurs" permettent d'ajouter un symbole au départ, milieu et/ou fin d'un tracé, comme par exemple en plaçant un cercle à chaque coin.
• Raccord : ceci indique comment les coins doivent être dessinés : avec des angles arrondis, ou biseautés ou des angles droits (par défaut).
• Terminaison : similaire aux raccords, mais pour les chemins ouverts plutôt que des formes fermées.
• Ordre : cela indique au SVG le rendu souhaité pour les bords, c'est-à-dire dans quel ordre les marqueurs, le contour et le fond sont affichés. La première option en haut à gauche est la valeur par défaut et la plus logique.

À ce stade, vous avez tracé un dessin et personnalisé son style de contour et son fond. Nous pouvons donc passer à l'édition des données XML du SVG pour ensuite connecter ce SVG à JetPunk !

Ajouter des identifiants et des classes à un SVG

Comme dit précédemment, il est nécessaire d'ajouter des "identifiants" et des "classes" pour rendre nos SVG réactifs sur JetPunk. Mais que signifient ces termes ? La partie qui suit peut sembler compliquée de prime abord, mais en prenant votre temps pour assimiler ces notions, vous verrez que ce n'est finalement pas si compliqué. Tout d'abord, un peu de XML de base. Regardons le XML du "chemin" ci-dessous :

Certains diront "Oh non ! Du codage ! Je ne sais même pas programmer !" Rassurez-vous, tout ça n'est pas si méchant. Décortiquons cette ligne ensemble :

• < - Le langage XML utilise des tags, ou balises en français. Le premier symbole indique l'ouverture d'une balise XML. Vous en avez peut-être déjà rencontré ailleurs, comme par exemple la balise "<a>" pour les liens, ou encore "<html>" pour définir un document.
• path - Ceci indique au navigateur que le tag que nous décrivons est un tag "path" ou chemin en français (les deux termes seront utilisés dans ce guide). Le navigateur va générer le contenu de ce path à l'aide de l'attribut "d" qui suit.
• d="___" - Ceci est un attribut du tag "path"; il s'agit en quelque sorte d'une de ses propriétés. Certains attributs sont obligatoires à la définition du tag, d'autres sont optionnels. Dans le cas présent, le SEUL attribut strictement nécessaire à la définition d'un tag "path" est l'attribut "d" qui lui donnera sa forme et sa structure. Je ne rentrerai pas plus dans les détails, car cela n'est pas nécessaire à la compréhension globale des SVG, mais sachez que l'attribut "d" contient habituellement une suite de chiffres et de coordonnées définissant les points de notre chemin.
• id="mon-chemin" - C'est l'identifiant (id) du tag. C'est un attribut optionnel qui permet de donner un identifiant unique, afin que notre path puisse être référencé ailleurs. Ainsi, vous ne devez pas donner le même id à deux paths différents. Les ids doivent contenir uniquement des lettres, des chiffres, des tirets et des underscores.
• class="classe1 classe2 classe3" - L'attribut "class" est un moyen de communiquer avec la balise "path" mais aussi avec d'autres balises en même temps. En effet, contrairement aux ids, les classes ne sont pas uniques, dans le sens où une classe peut être affectée à plusieurs paths distincts. Les classes sont généralement utilisées pour affecter des styles à l'aide de CSS, mais nous verrons que JetPunk les utilise également d'autres manières. Un tag peut contenir plusieurs classes, toutes séparées par des espaces (le tag actuel contient donc 3 classes). Conséquence : le nom d'une classe ne peut pas contenir d'espace. Les classe peuvent être composées de caractères alphanumériques, de tirets et d'underscores.
• /> - cette combinaison indique la fermeture du tag. Après un "/>" vous pouvez décrire un nouveau tag en suivant la même syntaxe.

C'était votre première leçon de XML/HTML ! Sur JetPunk, les ids et les classes sont utilisés pour colorer les SVG chaque fois que vous devinez une réponse dans un quiz. Cela signifie que nous devons ajouter des ids ou des classes au SVG pour donner à JetPunk quelque chose avec quoi communiquer, seul moyen de dire à un chemin spécifique de "se colorer" en vert lors d'un quiz.

Pour modifier les attributs XML d'un chemin, il faut ouvrir l'éditeur XML. Sur Inkscape, cliquez sur "Édition" puis sur "Éditeur XML...". Une fenêtre s'ouvrira comme ceci :

L'éditeur XML d'Inkscape affiche certaines informations dans la moitié supérieure, notamment l'ordre des objets et leurs identifiants. À moins que vous ne soyez un utilisateur avancé, vous pouvez ignorer les lignes contenant des éléments tels que "svg:defs", "svg:metadata" et "sodipodi". Si une balise possède un petit triangle à sa gauche (ou un "+"), cela signifie qu'elle contient d'autres objets. Dans l'exemple ci-dessus, nous avons une balise de groupe "svg:g", qui contient une balise "path".

Lorsque vous sélectionnez un objet, en l'occurrence la balise "path" surlignée en bleu, vous pouvez voir et modifier ses attributs dans le panneau du bas. En plus des attributs sodipodi, que vous pouvez ignorer, chaque chemin doit avoir au moins un attribut "id" et un attribut "d", dont nous avons déjà brièvement parlé. Notez que vous n'avez de toute façon pas besoin d'ajouter manuellement ces attributs - ils sont automatiquement créés par Inkscape lorsque vous dessinez. L'attribut qui va nous intéresser pour l'instant est l'identifiant "id".

Pour modifier l'attribut, il vous suffit de cliquer sur sa valeur actuelle (dans ce cas "path1420"), de le modifier en tapant la valeur souhaitée, puis d'appuyer sur la touche Entrée du clavier pour enregistrer les modifications. J'ai renommé l'identifiant en "mon-chemin", comme dans l'exemple XML au début de cette section.

Et voilà ! Vous avez ajouté un identifiant personnalité à votre chemin. La prochaine étape consiste à le connecter à JetPunk.

Nous souhaitons maintenant ajouter quelques classes à notre path. Pour ce faire, vous devez cliquer sur le "+" (dans l'image ci-dessous, vous pouvez le voir à gauche de "Nom"). Une fois cliqué, un nouvel attribut apparaîtra, vide pour le moment. Sous "Nom", vous devez ajouter le nom qui encode l'attribut (c'est-à-dire son type), en l'occurrence "class". Attention, comme il s'agit d'un type d'attribut standardisé, il faut écrire exactement "class". "Classe" ou "Class" ne fonctionneraient pas. Sous "Valeur", vous devez saisir le nom de la classe spécifique que vous souhaitez ajouter, par exemple "classe1" ; contrairement à l'attribut, c'est un nom de votre choix qui n'a pas à suivre de règles particulières. Comme nous l'avons dit précédemment, pour ajouter plus d'une classe, il suffit de les séparer par un espace. L'exemple que nous avions en début de section aurait les attributs suivants :

Désormais, notre chemin possède l'identifiant "mon-chemin" et les 3 classes "classe1", "classe2" et "classe3".

Ajouter un SVG sur JetPunk

Maintenant que nous avons créé un SVG et renseigné les données XML nécessaires, nous allons le connecter à quiz sur JetPunk. Retrouvez l'explication détaillée dans la section suivante du Guide : "Les SVG sur JetPunk" accessible via le page de menu, ou cliquez sur ce lien : Les SVG sur JetPunk.

Sommaire

Dans cette section du Guide SVG, nous verrons comment paramétrer un quiz sur JetPunk, une fois le SVG créé. Nous présenterons également les SVG standards proposés par JetPunk, et enfin comment créer un Click Map Quiz, ou quiz Carte en version française.

Avant-propos : les sections suivantes traitent du créateur de quiz intégré à JetPunk qui n'existe qu'en version anglaise. Par conséquent, les termes employés ici seront conservés texto en anglais. Des explications quant à leur signification seront néanmoins fournies.

Ajouter un SVG à un quiz

Il est très simple d'ajouter un SVG à un quiz. Dans le créateur de quiz, il suffit de cliquer sur le bouton jaune "SVG Options" à l'étape 4 (Step 4) pour les quiz textuels ou à l'étape 3 (Step 3) pour les quiz à cartes cliquables (appelés quiz Cartes sur JetPunk et dans la suite du Guide) :

Cela ouvrira la page "SVG Options", utile notamment pour ajouter un SVG au quiz. Il existe actuellement deux options pour ajouter un SVG :

• Select a JetPunk SVG (Sélectionner un SVG JetPunk) - voir section suivante "Le sélecteur de SVG"
• Upload SVG (Charger un SVG )

Si vous voulez en savoir plus sur les SVG standards JetPunk, vous pouvez lire le paragraphe dédié, plus loin dans cette section. Pour l'instant, nous supposerons que vous souhaitez charger un SVG que vous avez créé vous-même.

Pour charger votre SVG, cliquez sur le bouton vert "Upload SVG", puis cliquez sur "Choose a file" (Choisir un fichier) dans la fenêtre pop-up. Choississez ensuite votre fichier SVG et confirmez votre choix avec le bouton bleu "Upload Selected File" (Charger le fichier sélectionné).

Si vous rencontrez un problème lors du chargement de votre fichier, consultez la section Aide au dépannage.

Une fois le fichier chargé, vous pourrez avoir un aperçu du SVG en bas de l'écran. Suivant vos besoins, vous pouvez supprimer le SVG en cliquant sur le bouton rouge "Remove SVG" (Supprimer le SVG), ou le télécharger depuis JetPunk avec le bouton gris "Download SVG" (Télécharger le SVG).

Vous pouvez maintenant cliquer sur "<< Back" en haut de la page pour enregistrer les modifications et revenir à l'écran précédent. Et voilà ! Vous avez ajouté un SVG à votre quiz.

Faire réagir un SVG lors d'un quiz

Passons maintenant à la partie plus technique : l'ajout d'id et/ou de classes pour faire changer la couleur des paths souhaités, lors de la saisie des réponses sur un quiz textuel (text quiz).

Pour plus de simplicité, nous supposerons que les ids et les classes sont déjà configurés dans votre SVG comme vu dans la section Premiers pas. Attention : les ids et les classes doivent être affectés aux chemins eux-mêmes, et non aux groupes qui les contiennent, sinon le SVG ne fonctionnera pas avec le quiz.

Les ids des paths devant être associés aux réponses sur JetPunk s'ajoutent comme s'il s'agissait d'indices à ces réponses. Ils doivent être saisis dans la première colonne tout à gauche de l'étape 2. Veillez à saisir les identifiants exactement tels qu'ils apparaissent dans l'éditeur XML d'Inkscape, sinon JetPunk ne les reconnaîtra pas comme des ids faisant référence à votre SVG.

Si vous n'êtes pas sûr des ids ou des classes que possèdent vos paths, retournez à l'écran "SVG Options" (via le bouton jaune). Si le quiz possède un SVG, vous verrez un bouton "Get SVG IDs" (Obtenir les identifiants SVG) au-dessus de l'aperçu. Lorsque vous cliquez dessus, JetPunk recherche dans le fichier les ids et les classes de chaque chemin et les renvoie sous forme de liste. Voici le résultat :

Comme vous pouvez le voir, tous les paths trouvés dans le SVG auront leurs ids affichés dans la colonne de gauche, puis leurs classes affichées dans la colonne de droite. Les classes ici sont séparées par des virgules pour plus de clarté, mais doivent être séparées par des espaces dans le SVG lui-même.

Les ids renvoyés doivent être uniques, vous pouvez donc en saisir un à l'étape 2 pour que le path change de couleur lors du quiz. De même, des classes peuvent également être ajoutées à l'étape 2 (toujours dans la colonne la plus à gauche) pour faire interagir plusieurs chemins avec une même réponse.

Par exemple, si deux paths ont la classe "water" (capture ci-dessus), et que nous saisissons "water" dans la cellule la plus à gauche d'une réponse à l'étape 2, alors la saisie de cette réponse colorerait en vert tous les chemins ayant la classe "water" ou même l'id "water".

En effet, à l'étape 2, l'éditeur ne fait pas de distinction entre classes et ids. Par conséquence, si vous avez un path avec un id "water", et un autre avec une classe "water", ils seront tous deux colorés en vert lorsqu'une bonne réponse est donnée, si celle-ci est associée à "water" dans sa colonne de gauche.

Le sélecteur de SVG

Si vous ne souhaitez pas télécharger un SVG personnalisé, vous pouvez simplement utiliser un SVG standard proposé par JetPunk à l'aide du sélecteur SVG (SVG Selector).

Il vous suffit de cliquer sur le bouton jaune "Options SVG" comme dans les étapes précédentes, puis de cliquer sur le bouton bleu "Select JetPunk SVG". Cela vous mènera au sélecteur SVG.

Ce sélecteur affiche une liste de SVG standards que vous pouvez utiliser librement pour vos quiz (la section suivante détaille la manière dont sont conçus ces SVG standards). Certains SVG ne sont disponibles que pour certains types de quiz ; par exemple, étant donné que la carte des Pays du monde standard est trop grande pour un Click Map Quiz (quiz Carte), une version réduite de cette carte est proposée.

Pour sélectionner un SVG sur cette page, cliquez simplement sur le nom de la carte que vous voulez puis cliquez sur le bouton vert pour la sélectionner. Cela vous ramènera à la page "SVG Options", où vous pouvez cliquer sur "<< Back" pour appliquer les modifications à votre quiz et revenir à l'éditeur.

Le SVG est maintenant ajouté à votre quiz ! Pour ajouter des ids depuis un SVG standard de JetPunk, voir la section ci-dessous.

Les SVG standards de JetPunk

Sur JetPunk, il existe donc des cartes "standards" libres d'utilisation que les utilisateurs peuvent charger dans leurs quiz via le sélecteur présenté ci-avant. Il est aussi possible de télécharger ces cartes, les modifier et les recharger pour un quiz.

Ces SVG ont tous un format standardisé, c'est-à-dire que dans chaque SVG les ids de tous les paths sont définis de manière uniforme et codifiée pour les rendre plus faciles à utiliser sur JetPunk. Voici les ids que vous pourriez trouver dans un SVG standard :

• fr - chaque pays a pour identifiant son propre code ISO-3166 à deux lettres. De plus, chaque pays a les classes "border" et "country" qui confèrent des couleurs standards dans le style de JetPunk.
• fr-c - les capitales ont un id correspondant au code ISO du pays auquel on ajoute le suffixe "-c". Pour les pays possédant plusieurs capitales, comme l'Afrique du Sud, les ids sont numérotés "za-c1", "za-c2" etc. Cependant les 3 paths auront tous la classe "za-c" afin qu'il soit possible de les connecter tout trois à une seule réponse.
• mc-d - très répandu sur la carte d'Europe, le suffixe "-d" est affecté au point orange qui indique un micro-état, pour le différencier des véritables frontières cachées dans de nombreux cas par le point.
• fj-w - le suffixe "-w" est utilisé lorsqu'une nation insulaire possède à la fois une forme de pays et une forme bleue autour d'elle (appelée light water). Le territoire réel aura son code ISO en id comme expliqué plus haut. La forme bleue, quant à elle, aura le code ISO uniquement en tant que classe, de manière à changer de couleur mais son id comportera le suffixe "-w". Si le pays n'est représenté que par une forme bleue, alors il aura le code ISO à 2 lettres comme id et classe.
• FR-01 - utilisé pour la carte des départements français. Chaque id de département est composé du préfixe "FR-" suivi du numéro du département.
• NY - utilisé pour la carte des États-Unis. Les états ont un id égal à leurs abréviations officielles, en majuscule.

Pour récupérer un code pays ISO, vous pouvez vous rendre sur la page Wikipedia : Codes ISO 3166-1. Les codes qui nous intéressent ici sont ceux de la colonne "alpha-2". Cette source propose également les codes d'autres nations non reconnues par l'ONU ou par JetPunk.

Ajouter les ids à un quiz qui utilise un SVG standard est très simple. Saisissez simplement le nom des pays dans la colonne "Answer" (Réponse) à l'étape 2, puis cliquez sur "Add Path IDs" dans les options avancées ("Advanced"). Une fenêtre contextuelle s'ouvrira vous demandant quel type d'id vous souhaitez ajouter (voir capture d'écran suivante). Trois choix sont proposés : les capitales (Capitals), les pays (Countries) ou États des États-Unis (U.S. States). Une fois votre choix fait, JetPunk cherchera les correspondances entre les noms de la colonne de réponses et les ids dérivés des codes ISO. Par exemple, en écrivant "France" dans les réponses, après avoir cliqué sur "Add Path IDs", JetPunk vous proposera d'attribuer à la réponse l'identifiant "fr", c'est-à-dire le code ISO de la France. JetPunk vous montrera les modifications qu'il prévoit d'apporter, afin que vous puissiez les contrôler et corriger les éventuelles erreurs en décochant la case à côté de l'id suggéré que vous ne souhaitez pas voir attribué.

Cet outil a été conçu pour l'anglais, mais il fonctionne aussi plus ou moins correctement pour toutes les langues proposées sur JetPunk. Le système sait reconnaître certaines variations dans les noms de pays, notamment en anglais. Cependant, JetPunk est plus strict pour les autres langues, notamment le français. Par exemple, "République Tchèque" sera reconnue par JetPunk, mais pas "Tchéquie". N'oubliez pas que dans tous les cas, vous pouvez toujours attribuer manuellement une classe ou un id à une réponse.

Notez que cette fonctionnalité JetPunk n'est pas uniquement compatible avec les SVG standards : si vous créez votre propre SVG en veillant à utiliser les mêmes conventions que JetPunk, vous pouvez toujours connecter le SVG via le bouton "Add Path IDs".

Fonctionnement des quiz Cartes

Abordons maintenant le cas particulier des quiz avec cartes cliquables, "Click Map Quiz en anglais, ou tout simplement quiz Carte pour la suite du Guide. Si vous êtes nouveau sur JetPunk, vous ne savez peut-être pas de quoi il s'agit, ni comment fonctionne ce type de quiz. Eh bien c'est très simple !

Il s'agit d'un type de quiz dans lequel on vous donne une liste de réponses, et vous devez choisir la bonne à associer à l'élément en surbrillance (généralement en bleu) sur la carte. Par exemple, vous pourriez voir une carte de l'Europe où la Belgique est en surbrillance : vous devez alors faire défiler la liste des réponses possibles et cliquer sur "Belgique". Une fois cliqué, l'élément en surbrillance sera coloré en fonction de la réponse (vert si correct, rouge si incorrect) et vous passerez au suivant. Voici un exemple de quiz Carte.

Vous pouvez décider de procéder selon l'ordre de mise en surbrillance prédéfini par l'auteur du quiz (Ordre fixé) ou de procéder dans un ordre aléatoire à l'aide du menu déroulant au-dessus de la carte.

La particularité qui donne le nom aux quiz "Click Map" en anglais est qu'en plus de procéder dans l'un des deux ordres, on peut aussi cliquer librement sur un élément de la carte pour le mettre en surbrillance. Vous pouvez aussi utiliser les flèches à l'écran pour faire défiler les paths en surbrillance, et ainsi sauter les réponses qui vous posent problème et prendre le quiz dans l'ordre que vous souhaitez.

Notez que les réponses peuvent être triées, dans l'éditeur de quiz, soit par ordre alphabétique, soit par ordre numérique selon votre type de réponse.

Enfin, sachez qu'il existe des raccourcis clavier pour prendre les quiz Cartes sans utiliser la souris :

• Flèches gauche/droite : Changer d'objet en surbrillance sur la carte
• Flèches haut/bas : Naviguer dans le sélecteur de réponses
• Entrée : Confirmer la sélection
• A-Z : Se rendre à la réponse

Créer un quiz Carte

La première chose que vous aurez peut-être remarqué à propos de ce type de quiz est que leurs noms suivent majoritairement un certain schéma. En anglais, il est très courant d'ajouter "Map Quiz" au nom du quiz, par exemple "Europe Map Quiz". En français, la règle est d'ajouter "- Carte quiz" à la fin du titre du quiz, par exemple "Villes de France - Carte Quiz". Il est fortement conseillé de suivre ces règles afin de signaler aux utilisateurs qu'il s'agit d'un quiz Carte.

Passons à la création proprement dite du quiz. L'étape 1 (Step 1) du créateur de quiz est semblable à celle des autres types de quiz. On retrouve la possibilité de créer un quiz aléatoire comme pour les quiz textuels, dans le volet "More Options". Dans ce mode, les réponses sont tirées aléatoirement parmi une sélection de réponses de l'étape 2. Vous noterez que les quiz Carte offrent moins d'options que les quiz textuels dans ce domaine et que l'option "Yellow Box" est bien évidemment absente pour les quiz Cartes.

À l'étape 2, vous remarquerez qu'il n'est pas possible d'ajouter des colonnes : elles sont prédéfinies car ce type de quiz nécessite uniquement des réponses associées à des paths, sans indices supplémentaires. La première colonne est réservée à l'id et aux classes tandis que la seconde est réservée aux réponses. Voici comment vous devez procéder pour créer un quiz :

1. Saisissez dans les cellules vertes les réponses qui seront proposées aux utilisateurs.
2. Dans la première colonne, ajoutez les ids (ou classes) correspondants à chaque réponse.
3. Classez les réponses selon l'ordre dans lequel vous voulez qu'elles soient mises en évidence. Cela n'affecte pas les quiz aléatoires, mais pour un quiz Carte classique, l'ordre dans lequel vous classez vos réponses est l'ordre dans lequel elles seront mises en surbrillance sur la carte (pour les utilisateurs utilisant l'ordre fixe). Pour cette raison, il est très fortement recommandé d'écrire les réponses à l'étape 2 dans un ordre autre qu'alphabétique, généralement "géographique" correspondant à l'ordre des réponses sur la carte.

Toujours à l'étape 2, des options avancées vous sont proposées sous "Advanced". Par exemple, vous pouvez effectuer un tri automatique (option "Order Answers") soit par ordre alphabétique/numérique avec le choix "Sort" ou effectuer tri aléatoire pour vous assurer que vos réponses ne soient pas dans l'ordre alphabétique ("Shuffle"). Vous pouvez également traduire automatiquement des réponses depuis l'anglais vers une autre langue proposée par JetPunk ou encore importer ou exporter des réponses comme dans les quiz textuels. Comme il s'agit de fonctionnalités avancées, elles ne sont recommandées qu'aux utilisateurs expérimentés.

Passons maintenant à l'étape 3.

Dans cette troisième étape, vous pouvez ajouter votre SVG en cliquant sur le bouton jaune habituel. Si vous ne savez pas comment ajouter un SVG à un quiz, consultez la première partie de cette section, "Ajouter un SVG à un quiz".

Vous trouverez également plusieurs options qui concernent le design du quiz :

• Selector Width (Largeur du sélecteur) - Le "sélecteur" est la liste de réponses que l'utilisateur voit à côté de la carte, et à partir de laquelle il sélectionne la réponse souhaitée. Vous pouvez modifier sa largeur, par exemple si vous ne voulez pas que certaines réponses soient renvoyées à la ligne.
• Selector Height (Hauteur du sélecteur) - La valeur par défaut "Auto" est recommandée, car elle s'ajustera à la hauteur minimale, que ce soit celle des réponses ou la hauteur du SVG. Vous pouvez également choisir une hauteur personnalisée.
• Selector Text (Texte du sélecteur) - Ce champ permet de personnaliser l'en-tête "Select Answer" qui apparaît en haut de votre liste de réponses. Ceci est très utile lorsque l'on souhaite créer un quiz dans une autre langue que l'anglais.
• Selector Style (Style du sélecteur) - Vous pouvez personnaliser la couleur du texte et de l'arrière-plan de l'en-tête du sélecteur pour ajouter une touche d'originalité à votre quiz.
• Quiz Width (Largeur du quiz) - Comme pour les quiz textuels, vous pouvez choisir la largeur totale du quiz. Ceci est particulièrement utile pour que votre quiz ne déborde pas de la page, lorsque vous avez un SVG de grande largeur.
• Sort Type (Type de tri) - Trois options sont proposées : tri alphabétique, numérique anglo-saxon ou numérique européen. Il s'agit de l'ordre dans lequel les réponses sont affichées dans le sélecteur, et non de l'ordre dans lequel elles sont mises en surbrillance sur la carte.

Une fois ces réglages effectués, vous pouvez prévisualiser votre quiz avant de le publier. Si vous êtes satisfait de l'ordre des réponses et de l'apparence du quiz, vous pouvez soumettre votre quiz. Félicitations : vous avez maintenant créé votre premier quiz Carte !

Ajouter des flèches à un quiz Carte

Vous avez sans doute déjà remarqué la présence de flèches, ou de cercles, désignant des réponses dans certains quiz Cartes. Vous pouvez, vous aussi, ajouter cette petite touche visuelle très simplement à vos quiz !

Le cercle est une fonction automatique pour tous les quiz, appelée "city-selector" (sélecteur de ville). Si vos paths sont des cercles ou des ellipses, un cercle city-selector sera généré automatiquement autour d'eux. Vous n'avez donc pas besoin de les ajouter manuellement. Cette fonctionnalité est particulièrement utile pour les villes (d'où son nom), très souvent représentées par des cercles sur les cartes, voire pour la localisation de micro-états. Voici un exemple de quiz Carte dans lequel les villes, représentées par des ronds, possèdent les cercles "city-selector" :

L'ajout des flèches est légèrement plus complexe, mais reste accessible à tous. Voici un exemple de flèche :

Pour ajouter une flèche comme celle-ci, l'option la plus simple est de télécharger le SVG standard de l'Afrique, qui contient déjà ces flèches. Ainsi, vous n'aurez pas à les redessiner. Voici les conditions pour que l'affichage des flèches fonctionne correctement :

1. Toutes les flèches doivent avoir la classe "map-hidden". C'est cette classe qui indique à JetPunk de masquer le path de la flèche lorsqu'il n'est pas en surbrillance. Bien sûr, les chemins que vous souhaitez voir indiqués par les flèches ne doivent pas avoir cette classe.
2. Chaque flèche doit avoir la classe du path vers lequel elle pointe. Autrement dit, si vous voulez indiquer comme dans l'image ci-dessus Sao Tomé-et-Principe, qui aura l'id "st", alors la flèche doit avoir la classe "st". N'oubliez pas qu'un chemin ne peut avoir qu'un seul identifiant mais plusieurs classes, séparées par un espace.

Et c'est tout ! Tant que la flèche partage la classe avec le path à pointer et qu'elle possède la classe "map-hidden", tout fonctionnera comme prévu. Vous pouvez également créer vos propres flèches ou laisser libre court à votre imagination en créant d'autres formes tant que vous suivez les étapes 1 et 2 ci-dessus. Toutefois, n'oubliez pas que le plus souvent, la sobriété est préférable.

Sommaire

Dans cette section, nous aborderons les connaissances de base en CSS pour faire interagir JetPunk avec vos cartes. Nous explorerons également certaines fonctionnalités avancées d'Inkscape, pour vous permettre d'améliorer le rendu de vos SVG.

Introduction au CSS

Avertissement avant d'aller plus loin : l'abus de CSS sur JetPunk, qui affecterait le contenu en dehors de vos SVG n'est pas toléré. En d'autres termes : ne faites rien de stupide, où dont vous n'êtes pas sûr à 100% !

Passons au CSS. CSS est l'acronyme de Cascading Style Sheets, ou "Feuilles de style en cascade". En un mot, retenez que le CSS est un outil qui permet de gérer les styles de pages Web. Pour nos besoins, l'utilisation de CSS permet la personnalisation des styles des SVG. Sur les pages Web, le code CSS est placé entre balises de style, qui ressemblent à ceci : <style>. Ces balises permettent au CSS de fonctionner sans afficher le texte contenu entre elles, de sorte que vous ne voyez pas le code mais uniquement ses effets.

Appuyons-nous sur un exemple : supposons que vous vouliez que les bonnes réponses d'un quiz textuel avec SVG deviennent bleues au lieu du vert habituel. Pour ce faire, nous devons utiliser le code suivant :

À présent, décortiquons cette ligne :

• .svg-holder - il s'agit la classe du conteneur HTML qui contient le SVG, dans le cas des quiz textuels. Dans notre exemple, il est nécessaire de le sélectionner, pour signifier que nous allons modifier quelque chose à l'intérieur de ce conteneur.
• .svg-correct - cette classe confère aux bonnes réponses la couleur verte. C'est la dernière classe avant l'accolade "{", ce qui signifie que c'est la classe dont nous allons changer le style.
• { - l'accolade ouvrante indique que nous allons définir un nouveau style à la classe sélectionnée. Tout style doit être saisi entre accolades.
• fill: - il s'agit de la propriété de style que nous allons modifier, ici "fill" (fond, ou remplissage). Les propriétés les plus couramment modifiées sont listées plus loin. Le nom de la propriété est obligatoirement en minuscules, suivi d'un deux-points signifier que nous allons lui attribuer une valeur.
• blue - c'est la valeur que nous donnons au remplissage (fill). Pour les couleurs, des mots-clés tels que "blue", "red" ou "lightgreen" sont reconnus par le CSS, mais vous pouvez également utiliser les codes hexadécimaux que nous avons abordés dans la première section de ce Guide. N'oubliez pas qu'avant un code hexadécimal, vous devez ajouter un dièse "#". Exemple : saisir "fill: #FFFFFF;" appliquerait un style de remplissage blanc.
• !important; - indique que nous souhaitons remplacer un style préexistant. Étant donné que la classe .svg-correct est déjà utilisée pour colorer les chemins en vert, nous devons utiliser l'attribut "!important" pour la réécrire/remplacer. Le point-virgule marque la fin de la valeur et permet d'en ajouter une autre si nécessaire.
• } - l'accolade fermante indique la fin du style pour la classe en cours, permettant si vous le souhaitez de sélectionner une nouvelle classe à modifier.

Donc, dans l'ensemble, vous avez peut-être déjà compris qu'il y a deux choses principales à considérer dans le CSS : les sélecteurs et les styles. Chaque style possède un nom et une valeur, et ils peuvent être chaînés de la manière suivante :

Les sélecteurs sont une source de confusion courante pour les développeurs. Si vous souhaitez en savoir plus sur ce sujet, vous trouverez de nombreux didacticiels et explications (en anglais) sur le W3Schools CSS Selectors Reference, ou encore sur la page de Référence CSS, proposée par MDM Web Docs (en français).

Voici les sélecteurs importants pour JetPunk :

• .class - le nom d'une classe, précédé d'un point, permet de sélectionner tous les objets ayant cette classe.
• .class1 .class2 - cette syntaxe permet de sélectionner les objets possédant la classe "class2", à l'intérieur d'objets ayant la "class1" (la présence de l'espace a son importance).
• .class1.class2 - sélectionne tous les objets ayant la "class1" et la "class2".
• #pathid - sélectionne un chemin (path) spécifique à l'aide du signe dièse suivi de l'id du chemin ("pathid" dans cet exemple).
• #pathid.class - sélectionne le chemin ayant l'id "pathid" et la classe "class".
• .class1, .class2 - sélectionne les chemins ayant la "class1" ou la "class2".

Concernant les styles, voici les "noms" de ceux les plus couramment rencontrés sur JetPunk :

• fill (fond) - couleur de remplissage du path, dont les valeurs possibles sont des couleurs.
• stroke (contour) - couleur du contour du chemin. Ses valeurs sont également des couleurs.
• opacity (opacité) - opacité du chemin complet (fond et contour). Ce style prend une valeur comprise entre 0.00 et 1.00 (1.00 = totalement opaque).
• fill-opacity, stroke-opacity - opacité du fond ou du contour, indépendamment, avec des valeurs de 0.00 à 1.00. Ce style s'ajoute à celui de l'opacité globale. Ainsi, si vous tapez "opacity: 0.5; fill-opacity: 0.5;" alors le contour aura une opacité de 50%, tandis que le fond aura une opacité de 25%.
• stroke-width - épaisseur du contour. Ses valeurs sont des nombres positifs, complétés du suffixe "px" (pour pixels). Exemple : "stroke-width: 1px;".

Voici donc les styles les plus courants que vous pouvez retenir pour vos SVG. Rappelez-vous que les couleurs peuvent être exprimées par un mot-clé ou par un code hexadécimal précédé d'un dièse #. N'oubliez pas non plus que, pour la plupart des styles de couleur, vous aurez besoin de l'attribut "! Important" après la valeur pour vous assurer de remplacer le style existant.

Enfin, n'oubliez pas que tous les styles CSS doivent être compris entre une balise ouvrante <style> et une balise fermante </style>. Sans ces balises, vos changements ne s'appliqueront pas.

Couleurs et classes standards sur JetPunk

La liste suivante vous est donnée dans la section Foire aux questions, mais elle pourrait vous être utile ici aussi. Voici donc les couleurs et classes standards, utilisées par JetPunk :

• #64BEFF - bleu océan
• #FFFF80 - jaune pour les pays
• #BEEDFF - bleu clair dit "light water"
• #BBBBBB - pays environnants (ex : Turquie sur la carte de l'Europe)
• #888888 - territoires contestés
• #707070 - frontières des pays
• #FF9900 - villes / micro-états (souvent avec un fond à 70% d'opacité)
• #66FF66 - .svg-correct pour les quiz textuels
• #FF6666 - .svg-incorrect pour les quiz textuels
• #000000 - .random-svg-highlight pour les quiz textuels (path en surbrillance en mode aléatoire)
• #33FF33 - .map-correct pour les quiz Cartes
• #FF3333 - .map-incorrect pour les quiz Cartes
• #0000FF - .map-highlight pour les quiz Cartes (path en surbrillance)
• #7B3294 - .svg-incorrect et .map-incorrect en mode daltonien

Il existe également des classes qui contrôlent des fonctionnalités particulières sur JetPunk, ce qui peut vous être utile pour modifier l'apparence ou les caractéristiques de vos quiz.

• .svg-hidden - cette classe masque les chemins jusqu'à ce qu'ils soient devinés. Elle est utilisée lorsque vous sélectionnez l'option "Hidden Paths" dans les options du SVG sur un quiz textuel.
• .svg-highlight - par défaut cette classe n'a pas d'effet, mais l'activation de l'option "Yellow box" mettra en surbrillance le chemin associé à la réponse mise en évidence par la "boîte jaune". C'est ainsi que sont créés les quiz séquentiels comme celui-ci, qui utilisent le CSS pour colorer uniquement le chemin relatif à la réponse en surbrillance.
• .map-hidden - cette classe cache complètement les chemins qui la possèdent, tandis que dans les quiz Cartes, elle les cache tant qu'ils ne sont pas mis en évidence (pour plus d'informations, voir le dernier paragraphe de la section précédente : "Ajouter des flèches à un quiz Carte").
• .zoomable-circle - donner cette classe à un cercle ou à une ellipse le fera rétrécir lors d'un zoom.
• .small-stroke - cette classe ajuste l'épaisseur des contours lors d'un zoom pour qu'ils aient toujours le même rendu. Cette classe est automatiquement ajoutée aux chemins ayant la classe "border" ou "zoomable-circle".

Utilisation du CSS sur JetPunk

Si vous avez lu les premiers paragraphes de cette section, vous devriez pouvoir commencer à tirer parti du CSS. Mais, voyons quelques exemples pour mettre en application ces notions.

Tout d'abord, quelques informations générales. Les lignes de CSS que vous souhaitez ajouter peuvent être écrites n'importe où dans le quiz. Néanmoins, il est d'usage et recommandé de les écrire dans les instructions. L'important est, comme dit précédemment, d'écrire ces lignes dans une balise <style>.

Lorsque vous sélectionnez une classe dans un quiz texte SVG, vous devez toujours inclure ".svg-holder" au début, séparé des autres classes par un espace, pour vous assurer que vous remplacez correctement les styles. Sans ce sélecteur, votre ajout de styles ne fonctionnera pas. De même, dans les quiz Cartes, vous devez utiliser la classe ".map-holder".

Passons maintenant aux exemples. Notez que nous utiliserons le code #HEX pour indiquer une valeur de couleur générique. Pour essayer ces exemples, copiez-les et collez-les simplement dans votre quiz, en remplaçant #HEX par le code couleur de votre choix.

• Changer la couleur des bonnes réponses, dans un quiz textuel avec SVG :
  <style>.svg-holder .svg-correct { fill: #HEX !important; }</style>
• Changer la couleur des mauvaises réponses, dans un quiz textuel avec SVG :
  <style>.svg-holder .svg-incorrect { fill: #HEX !important; }</style>
• Changer la couleur du path associé à la réponse sélectionnée, dans un quiz avec "Yellow box" (cellule jaune) :
  <style>.svg-holder .svg-highlight { fill: #HEX !important; }</style>
• Changer la couleur des paths sélectionnés, dans un quiz aléatoire (random) :
  <style>.svg-holder .random-svg-highlight { fill: #HEX !important; }</style>
• Changer la couleur des bonnes réponses, dans un quiz Carte :
  <style>.map-holder .map-correct { fill: #HEX !important; }</style>
• Changer la couleur des mauvaises réponses, dans un quiz Carte :
  <style>.map-holder .map-incorrect { fill: #HEX !important; }</style>
• Changer la couleur du path en surbrillance, dans un quiz Carte :
  <style>.map-holder .map-highlight { fill: #HEX !important; }</style>

Ce sont les exemples les plus courants, que l'on retrouve dans de nombreux quiz. En voici quelques autres, plus atypiques, qui pourraient néanmoins vous servir :

• Changer la couleur d'un path spécifique uniquement, lorsque celui-ci est correctement deviné ; par exemple ici, le chemin "fr" correspondant à la France, dans le standard SVG des pays du monde :
  <style>.svg-holder #fr.svg-correct { fill: #HEX !important; }</style>
• Cacher les paths lorsqu'ils sont correctement devinés, dans un quiz textuel :
  <style>.svg-holder .svg-correct { opacity: 0; }</style>
• Cacher les paths lorsqu'ils ne sont pas devinés, dans un quiz textuel :
  <style>.svg-holder .svg-incorrect { opacity: 0; }</style>
• Afficher les paths uniquement lorsqu'ils sont zoomés. Au préalable, vous devez activer l'option "Hidden Paths" dans les Options SVG du quiz, puis vous pourrez utiliser ce code :
  <style>.svg-holder .svg-hidden.small-stroke { visibility: visible; }</style>
(Rappel : les paths se voient attribuer la classe "small-stroke" dès lors qu'ils possèdent la classe "border" ou "zoomable-circle")

Vous remarquerez que ce dernier exemple tire parti d'une propriété particulière : la visibilité des paths (visibility). Cela vient de la façon dont JetPunk gère la classe .svg-hidden. La valeur contraire de "visible" est "hidden".

Conversion d'objets sur Inkscape

Dans cette section, nous allons aborder la conversion d'objets sur Inkscape. Pour commencer, voici deux exemples de situations concrètes que vous pourriez rencontrer :

• Vous avez une ellipse ou un rectangle dont vous voulez modifier la forme librement
• Vous avez créé un texte dont l'apparence est modifiée une fois le SVG chargé sur JetPunk

Pour faire face à ces situations, nous allons utiliser l'outil "Objet en chemin" qui, comme son nom l'indique, va permettre de convertir un objet qui n'est pas un chemin en chemin.

À ce stade, il est bon de revenir sur la différence entre chemins et objets. En fait, les formes créées à l'aide d'outils, tels que les rectangles, les cercles ou les textes, sont des objets possédant des propriétés spécifiques, et sont enregistrés dans le fichier SVG en tant que tels. Un chemin, en revanche, est un terme plus générique. En convertissant un cercle en chemin, il continuera à avoir la forme d'un cercle, mais en perdra ses propriétés intrinsèques (rayon, coordonnées...). Le SVG lui-même (et par conséquent JetPunk) n'aura plus moyen de savoir que le chemin a l'apparence d'un cercle. En convertissant un objet, vous perdrez donc ses propriétés mais vous pourrez éditer librement le chemin généré.

Revenons à l'outil de conversion. Celui-ci est très facile d'utilisation, puisqu'il suffit de sélectionner l'objet que vous souhaitez convertir, puis d'aller dans "Chemin" dans la barre de menus et de cliquer sur "Objet en chemin". Notez que les chemins ainsi générés peuvent être regroupés, en particulier si vous avez converti du texte. Pour les dissocier, faites simplement un clic droit sur le groupe et cliquez sur "Dégrouper".

Un autre outil pratique est celui de conversion de "Contour en chemin". Il peut vous être utile si vous voulez modifier librement les bords d'une forme, sans vous soucier de son épaisseur de trait, ou si vous souhaitez que des tracés libres (et sans fond) effectués sur Inkscape se colorent lorsqu'une réponse est devinée dans un quiz. Cette méthode est utilisée par exemple dans les quiz sur les fleuves ou encore les cartes de lignes de métro.

Pour convertir un contour en chemin, sélectionnez simplement un chemin possédant un contour mais pas de fond, puis allez dans "Chemin" dans la barre de menus et cliquez sur "Contour en chemin".

Fusion de chemins

Les deux outils présentés ici sont "Combiner" et "Union" qui permettent, chacun à sa façon, de fusionner des chemins. Ces outils ont des effets différents, à choisir en fonction ce que vous voulez créer. Commençons par "Combiner".

L'outil "Combiner" se trouve sous "Chemin" dans la barre de menus (raccourci clavier Ctrl+K sur Windows ou Cmd+K sur Mac). Cet outil ne fait que combiner tous les chemins sélectionnés en un seul chemin.

Cela signifie que si deux chemins se chevauchent, ils continueront à se chevaucher même après avoir été combinés. Par ailleurs, le chemin combiné héritera des couleurs d'un seul des chemins, car un chemin ne peut contenir qu'une couleur pour le remplissage et une pour le contour.

En revanche, l'outil "Union", toujours sous "Chemin" dans la barre de menus, fait bien plus que combiner des chemins (raccourci clavier Ctrl++ sur Windows ou Cmd++ sur Mac). Cet outil fusionnera complètement les chemins sélectionnés, en supprimant également les nœuds qui se chevauchent. Autre conséquence : en joignant deux chemins qui ne possèdent que des contours, Inkscape essaiera de les connecter s'ils ne sont pas fermés. Au final, cet outil permet de générer un seul chemin global à partir de plusieurs tracés, sans parties superposées.

Voici un exemple pour illustrer la différence entre ces deux outils. Supposons que nous ayons tracé deux cercles qui se chevauchent :

En utilisant l'outil "Combiner", on obtient :

En utilisant l'outil "Union", on obtient :

Comme vous pouvez le voir, les deux outils produisent des résultats différents. "Combiner" donne deux tracés circulaires, contenu dans une même balise "path"; Inkscape les traite donc comme un seul chemin. "Union", en revanche, génère un chemin unique qui ressemble vaguement à une cacahuète.

Remarque : lors d'une "Union" de deux pays voisins sur une carte, il se peut que leurs frontières ne soient pas parfaitement alignées, ce qui génèrerait des nœuds résiduels au milieu du chemin résultant. Ces nœuds étant superflus, vous pouvez les supprimer manuellement à l'aide de l'éditeur de nœuds, représenté par cette icône :

Sélectionnez les nœuds inutiles et supprimez-les un à un pour avoir un tracé le plus propre (et le plus léger) possible.

Intersection et différence de chemins

Dans cette partie, nous traiterons de différentes façons de couper des chemins. Si vous cherchez à diviser un chemin en plusieurs parties, plutôt que d'en découper un morceau, la sous-section suivante vous sera plus utile.

Les outils dont nous parlerons ici sont "Différence" et "Intersection", tous deux sous "Chemin" dans la barre de menus. Ces deux outils ont, en un sens, des fonctions opposées : voyons pourquoi.

Commençons par la "Différence" : cet outil va prendre deux chemins, et "couper" toute partie du chemin du dessous en intersection avec le chemin du dessus. Cette fonction peut être utilisée pour créer des anneaux, à partir de cercles concentriques par exemple.

L'outil "Intersection", lui, fait l'inverse de ce que nous venons de voir : il prend deux chemins et ne conserve que les parties communes aux deux (leur intersection).

Remarque : les outils "Différence" et "Intersection" fonctionnent avec au moins deux chemins. Mais pour plus de simplicité, nous vous recommandons de vous limiter à deux chemins, en particulier pour la "Différence" dont le fonctionnement devient vite hasardeux. Par ailleurs, faites attention à l'ordre dans lequel sont positionnés les chemins (lequel est au-dessus).

Voyons un exemple d'utilisation de l'outil "Différence" : la création d'un anneau à partir de cercles, comme mentionné précédemment. Pour ce faire, commençons par dessiner un cercle avec l'outil d'ellipse tout en maintenant la touche ctrl enfoncée. Puis, pour créer un cercle concentrique, nous allons copier notre premier cercle et le "coller sur place" avec les commandes Ctrl+C, puis Ctrl+Alt+V (où leurs équivalents avec Cmd sur MacOS). Vous pouvez aussi trouver l'option de collage sur place sous "Édition" dans la barre de menus.

Vous obtenez ainsi deux cercles identiques. Pour réduire la taille du second cercle, vous pouvez le redimensionner "en place" en maintenant la touche Ctrl enfoncée (pour conserver l'aspect circulaire) tout en maintenant également la touche shift enfoncée pour le redimensionner depuis le centre de l'objet. Après avoir changé la couleur de ce second cercle, vous devriez obtenir quelque chose de ce genre :

Sélectionnez ensuite les deux cercles, en veillant à ce le plus petit (bleu ici) soit au-dessus du plus grand (rose dans notre exemple). Allez ensuite dans "Chemin", et sélectionnez "Différence". Le résultat obtenu sera égal au cercle rose auquel on a soustrait l'emprise du cercle bleu, ne laissant qu'un anneau rose :

C'est probablement l'utilisation la plus utile de l'outil "Différence", en particulier pour JetPunk.

Passons maintenant à "Intersection". Cet outil est utile lorsque vous souhaitez modifier une carte préexistante qui possèdent de nombreux chemins dont vous n'avez pas besoin. Voyons un exemple. Supposons que vous ayez téléchargé le SVG standard de l'Europe et que vous l'ayez redimensionné dans le but de créer une carte de la France métropolitaine et ses pays environnants. Dans ce cas, vous auriez beaucoup de chemins inutiles. Dans l'exemple d'image ci-dessous, la bordure de la page est colorée en rouge et s'affiche au-dessus du dessin (vous pouvez modifier ces options à partir des "Propriétés du document").

La première étape consiste à supprimer manuellement tous les paths qui sont totalement hors de la bordure de page, en les sélectionnant puis en appuyant sur la touche Suppr. Vous pouvez aussi redimensionner le rectangle bleu matérialisant l'océan pour qu'il corresponde à la taille de la page. Cliquez sur l'océan, et changer les valeurs de ses dimensions et de ses coordonnées dans l'éditeur d'objet :

Idéalement, vous devriez régler les coordonnées X et Y à 0,000, de manière à placer le coin supérieur gauche du chemin de l'océan dans le coin supérieur gauche de la page. "L" et "H" représentent respectivement la largeur et la hauteur du chemin de l'océan. Dans ce cas, vous devez définir "L" et "H" égales aux dimensions de la page, que vous trouvez dans les propriétés du document (120 x 120px dans le cas présenté ici). Une fois les paths supprimés et ces réglages effectués, vous devriez obtenir quelque chose comme ceci :

Nous allons maintenant utiliser l'outil "Intersection". Premièrement, nous allons copier/coller sur place le chemin de l'océan, qui se retrouvera ainsi au-dessus des autres chemins. Nous allons ensuite appliquer l'intersection individuellement à chaque pays dont la forme déborde de la page. C'est pour cette raison qu'il est particulièrement important que le chemin de l'océan soit parfaitement aligné avec la page.

À chaque fois que vous allez appliquer l'intersection entre un chemin et une copie de l'océan, cette copie disparaît. C'est pourquoi il est recommandé de copier/coller le chemin de l'océan plusieurs fois dès le début. Rappelez-vous également que pour qu'Intersection fonctionne comme souhaité, les copies de l'océan doivent être au-dessus des autres chemins. En sélectionnant par exemple le Royaume-Uni et l'un des exemplaires de l'océan (sélection multiple en maintenant Maj enfoncé), vous obtiendrez :

En appliquant l'Intersection, on obtient le résultat suivant :

Il faut savoir que l'outil "Intersection" supprime toutes les classes des chemins coupés. Puisque JetPunk utilise des classes pour colorer les chemins, il est probable que les chemins coupés aient perdu leurs valeurs de fond/contour. Nous y reviendrons plus tard, pour le moment nous répétons les étapes précédentes à chaque pays qui déborde partiellement des limites de la page. Le résultat des intersections successives devrait ressembler à ceci :

Enfin, dans le cas où les chemins seraient devenus noirs après intersection, vous pouvez modifier leurs couleurs directement depuis l'écran "Fond et contour", ou alors en ajoutant les classes "country" et "border" à chaque chemin si vous éditez un SVG Standard. Il est également possible d'ajouter la classe "surronding" au lieu de "country" pour donner aux pays avoisinant une couleur grise. Finalement, vous devriez obtenir le résultat suivant :

Cet exemple vous aura montré une utilisation concrète de l'outil "Intersection", très utile pour la création de cartes personnalisées pour JetPunk.

Division de chemins

La dernière fonction dont nous parlerons dans cette section est la "Division", toujours sous "Chemin" dans la barre de menus. Cet outil permet de diviser un chemin en plusieurs parties, à partir d'une ligne symbolisant le trait de coupe.

Cet outil fonctionne exclusivement avec deux tracés dont l'un doit être un trait, c'est-à-dire un tracé unidimensionnel droit ou courbe. Tout ce que vous avez à faire est de tracer une ligne avec le stylo ou le crayon à l'endroit où vous souhaitez que le chemin soit coupé. Voici un exemple :

Ici, nous avons un chemin que nous voulons diviser (en bleu), au-dessus duquel une ligne ouverte est tracée avec le stylo (tracé rouge). Sélectionnez les deux, cliquez sur "Chemin" dans la barre de menus, puis "Division". Le résultat obtenu est le suivant :

Le chemin a bien été coupé en deux en suivant la ligne tracée. Pour mieux visualiser ce qui s'est passé, sélectionnez un seul des deux chemins résultants et essayez de le déplacer :

La chose dont vous devez vous souvenir lorsque vous utilisez cet outil est que les extrémités du trait indiquant où couper (en rouge dans l'exemple précédent) doivent être en dehors du chemin que vous souhaitez diviser. Si l'une des extrémités se trouve à l'intérieur du chemin, la division ne fonctionnera pas.

Sommaire

Trouvez les réponses aux questions fréquentes concernant les SVG sur JetPunk. Si vous cherchez de l'aide sur Inkscape en général, rendez-vous sur la page Fonctionnalités avancées. Si vous ne trouvez pas de réponse à votre problème ici, tentez votre chance dans la rubrique Aide au dépannage.

Comment rendre un SVG compatible avec le Mode sombre ?

De nombreux quiz avec SVG se sont révélés difficilement lisibles voire incompatibles avec le Mode sombre, introduit en septembre 2021 sur JetPunk. Si vous utilisez un SVG standard de JetPunk pour votre quiz, vous n'avez rien à modifier car celui-ci sera mis à jour automatiquement. Cependant, si vous utilisez une carte personnalisée, vous devrez ajuster les paramètres de votre SVG manuellement.

Si vous utilisez une carte similaire à un SVG standard, comprenant les classes "country", "light-water", etc, vous pouvez simplement ajouter "jetpunk-svg" comme classe à l'objet SVG. Pour cela, il suffit d'ouvrir le SVG dans un éditeur de texte (Notepad, par exemple) et d'ajouter, à la fin du tag "<svg":

Exemple de la première ligne de la carte du monde JetPunk :

Cette classe permet la mise à jour des couleurs standards suivantes, lors du passage en Mode sombre (tout le reste n'est pas affecté) :

• #4477AA - bleu océan en Mode sombre
• #DDDD44 - jaune pour les pays en Mode sombre
• #334477 - bleu clair "light water" en Mode sombre
• #505559 - pays environnants en Mode sombre (ex : Turquie sur la carte de l'Europe)

Peut-on créer des SVG sur mobile ?

Malheureusement, non. Inkscape n'est actuellement disponible que pour une installation sur ordinateur. Toutefois, certains éditeurs en ligne fonctionnent sur mobile mais ils offrent généralement beaucoup moins de fonctionnalités qu'Inkscape.

Cependant, vous pouvez utiliser sur mobile comme sur ordinateur les SVG standards proposés par JetPunk en les sélectionnant depuis le sélecteur SVG. Vous ne pourrez simplement pas les modifier.

Où se procurer des SVG ?

Il existe de nombreuses façons de trouver des SVG sur internet, mais veillez à ne pas voler les créations de quelqu'un d'autre, qui peuvent être protégées par le droit d'auteur. Voici quelques sources pour trouver des SVG :

• Wikimedia - la plupart des SVG sur Wikimedia sont sous licence libre, ce qui vous permet de les utiliser et de les modifier comme bon vous semble. Si vous avez la chance de trouver ce que vous cherchez sur cette plateforme, n'hésitez pas !
• MapShaper - si vous vous limitez à créer des SVG "géographiques", vous pouvez utiliser MapShaper pour créer vos cartes. Un tutoriel (en anglais) est disponible sur ce blog : How to Make a Simple SVG Map.
• Inkscape - la dernière option consiste à créer vous-même un SVG avec Inkscape. Vous pouvez par exemple retracer des images (libres de droits) en redessinant leurs contours pour les utiliser dans un quiz. Dans ce cas, soyez prudent, et veillez à ne pas tracer des images qui sont ouvertement protégées par des droits d'auteur. Bien sûr, il est aussi possible de laisser libre cours à votre imagination en dessinant un SVG sans aucune image de référence. Le quiz de dug28 Country Shapes Under the Sea est un parfait exemple de ce qui peut être fait.

Il est important de souligner que le dessin de cartes par retraçade des contours peut demander beaucoup d'efforts pour un résultat lourd et parfois de qualité moyenne. Avant de vous lancer dans ce genre de travail, il est donc grandement conseillé de chercher sur Wikimedia si une carte libre de droit existe pour l'utiliser directement.

Quelle est la taille maximale d'un SVG ?

Un SVG doit peser moins de 600 kb pour être chargé sur JetPunk.

Il ne doit pas non plus dépasser 830 pixels de large sur 600 pixels de haut. Si vous rencontrez des difficultés pour charger votre fichier sur JetPunk, vous pouvez lire la rubrique Aide au dépannage.

Comment changer la couleur de plusieurs chemins, pour une seule réponse ?

Ce point a déjà été traité dans la section Les SVG sur JetPunk ainsi que dans les Fonctionnalités avancées. Mais puisqu'il s'agit d'une question fréquemment posée, reprenons cela ici.

Voici les deux principales façons de faire se colorer deux chemins distincts avec une seule réponse :

1. Combiner les chemins dans Inkscape pour qu'ils ne forment qu'un seul chemin
2. Garder des chemins séparés et utiliser une classe pour les colorer via JetPunk

La première méthode est utile si vous n'avez pas de scénarii qui nécéssitent d'avoir deux chemins séparés. Par exemple, si dans votre quiz il n'y a jamais une occasion où un seul des deux chemins doit se colorer, alors ceux-ci peuvent être combinés. Pour plus d'informations sur la manière de combiner des chemins, consultez la section Fonctionnalités avancées.

La seconde méthode est sans aucun doute l'option la plus "puissante", puisqu'elle permet de colorer l'un, ou l'autre, ou même les deux chemins simultanément. Pour ce faire, il faut utiliser les classes. Voici une brève explication sur ce point :

• Les classes sont stockées dans l'attribut "class" d'un chemin ; un chemin peut avoir plusieurs classes, séparées par un espace.
• Une classe ne peut contenir que des lettres, des chiffres, des tirets et des underscores, comme les identifiants (id).
• Les classes ne doivent pas nécessairement être uniques, c'est-à-dire qu'une classe peut être affectée à plusieurs chemins.
• Les classes peuvent être saisies à l'étape 2 de la création d'un quiz pour colorer les chemins, de la même manière que les ids.

Connaissant ces informations, on voit qu'il suffit de donner la même classe à deux chemins et de saisir cette classe dans la première colonne de gauche à l'étape 2 pour les faire se colorer à partir d'une même réponse.

Voyons maintenant un exemple concret. Prenons les capitales de l'Afrique du Sud. Dans le SVG standard JetPunk des capitales d'Afrique, on trouve :

• Bloemfontein avec l'id "za-c1"
• Le Cap avec l'id "za-c2"
• Pretoria avec l'id "za-c3"

Il existe donc trois capitales distinctes pour l'Afrique du Sud selon l'usage sur JetPunk. Cependant, dans certains quiz (ex : Capitales du Monde - Quiz) on peut souhaitez que la saisie d'une seule de ces trois capitales suffise pour valider la réponse de l'utilisateur, et ainsi colorer trois cercles sur la carte. Mais comment faire puisque ces chemins ont chacun un identifiant distinct ?

Eh bien, comme nous l'avons vu dans la section "Les SVG sur JetPunk", chacun de ces cercles se voit attribué la classe "za-c", car la carte standard suit les conventions de JetPunk sur les noms de classe et d'id. C'est précisément cette classe qui nous permet d'éclairer les trois capitales sur la carte à partir d'une seule réponse. Dans ce cas, si nous avions combiné les trois chemins, ils auraient perdu leurs propriétés de cercles et l'adaptation de leurs tailles avec le zoom ne fonctionnerait plus.

Ainsi, en tapant "za-c" dans la colonne de gauche de l'étape 2 de l'éditeur, et "Bloemfontein | Le Cap | Pretoria" dans la case de réponse correspondante, alors les trois cercles se coloreront en vert à la saisie de n'importe laquelle de ces trois capitales. Notez que le caractère "|" agit comme un "ou", et génère automatiquement les type-ins individuels pour chacune des réponses.

Et voilà ! J'espère que cet exemple pratique vous aura aidé à mieux comprendre l'utilisation des classes sur JetPunk. N'hésitez pas à essayer vous-même d'autres combinaisons en utilisant des SVG standards.

Comment créer un quiz avec "carte vierge" ?"

Un type de carte populaire est la "carte vierge", comme pour ce quiz Pays du monde avec une carte vierge. Mais comment créer une telle carte ?

C'est en fait assez simple : premièrement, ouvrez la carte que vous souhaitez avec Inkscape. Sélectionnez tous les chemins et changez la couleur de fond des chemins en blanc, puis supprimez les contours en allant dans "Style de contour" et en définissant une épaisseur à 0. Maintenant, si vous utilisez un SVG standard, il est nécessaire de "bloquer" les classes qui colorent automatiquement les chemins, comme "country" et "border".

Pour cela, ouvrez l'éditeur XML d'Inkscape et cherchez le nœud "svg:style", situé dans les premières lignes. Si votre SVG ne contient pas ce nœud, vous pouvez sauter cette étape. Si ce nœud est présent, sélectionnez le texte contenu à l'intérieur. Il se peut que vous deviez cliquer sur le triangle ou le + à gauche du nœud pour le développer et ainsi accéder au nœud texte à l'intérieur. Vous devriez alors voir cet écran :

Effacez la valeur de l'attribut "content", en supprimant le texte et en validant avec la touche Entrée. Vous obtenez :

Et c'est fini ! Vous obtenez une carte vierge fonctionnelle.

Comment cacher un chemin jusqu'à ce qu'il soit deviné ?

Heureusement, cela peut être fait aisément en utilisant la classe intégrée à JetPunk, "svg-hidden". Cette classe masque automatiquement le chemin jusqu'à ce qu'il soit deviné. Le moyen le plus simple d'ajouter ce paramètre est d'aller dans les Options SVG du créateur de quiz et d'activer l'option "Hidden Paths". De cette façon, vous cacherez les chemins de toutes les réponses jusqu'à ce qu'elles soient devinées. Cette option est également compatible avec les quiz aléatoires.

Cependant, cette option n'est pas compatible avec les quiz Cartes (Click Map).

Si vous souhaitez uniquement masquer certains chemins, vous pouvez ajouter manuellement la classe "svg-hidden" à ces chemins dans Inkscape. Nous avons expliqué précédemment comment ajouter une classe à un chemin. Voici un rappel : ouvrez l'éditeur XML sous "Édition" dans la barre de menus et sélectionnez le chemin désiré. S'il ne possède pas déjà de classe, ajouter un attribut en cliquant sur le + et saisissez le texte suivant :

Si votre chemin possède déjà un attribut de classe, ajoutez à sa valeur "svg-hidden", séparé des classes existantes par un espace :

En ajoutant cette classe aux chemins souhaités, JetPunk les cachera automatiquement jusqu'à ce qu'ils soient devinés.

Ne réglez pas l'opacité de votre chemin sur 0 depuis Inkscape; JetPunk supprime automatiquement tous les chemins transparents lors du chargement du SVG.

Comment cacher un chemin lorsqu'il est deviné ?

Si vous voulez faire l'inverse de ce que nous venons de voir, c'est-à-dire faire disparaître le chemin une fois que vous avez deviné la réponse correspondante, il suffit d'utiliser un peu de CSS. Tout ce que vous avez à faire est d'ajouter le code suivant dans les instructions du quiz. Puisqu'il est entouré de balises <style>, le code ne sera pas affiché comme du texte dans le quiz.

Analysons brièvement cette ligne de CSS : tout d'abord nous sélectionnons le conteneur "svg-holder", à l'intérieur duquel nous sélectionnons les chemins ayant la classe "svg-correct", que JetPunk attribue automatiquement à un chemin lorsque la réponse correspondante est devinée. Nous modifions ensuite la propriété de style "opacity", que nous rendons égale à zéro. Au final, nous obtenons que tout chemin correspondant à une réponse correcte verra son opacité réglée à zero (et sera donc non visible).

Si vous souhaitez masquer les mauvaises réponses au lieu des bonnes, par exemple pour vous assurer qu'après le quiz l'utilisateur ne voit que celles qu'il a dévinées, il suffit de remplacer ".svg-correct" par ".svg-incorrect". Si en revanche vous souhaitez masquer à la fois les bonnes et les mauvaises réponses, vous pouvez copier ce code :

Cette ligne de code ne fonctionnera que sur les quiz textuels. Si vous souhaitez modifier les quiz Cartes (Click Map), vous devez remplacer "svg" par "map" dans les différentes classes, par exemple "map-correct" et "map-holder".

Il s'agit là de CSS de base. Si vous voulez en savoir plus, rendez-vous sur la section Fonctionnalités avancées de ce Guide.

Comment améliorer le rendu des contours lors d'un zoom ?

Si les contours des chemins de votre SVG, par exemple les frontières sur une carte, sont gros et inesthétiques lorsque vous zoomez, sachez qu'il existe une solution très simple pour corriger ce vilain défaut : il suffit d'ajouter la classe "border" aux chemins souhaités. Pour voir comment ajouter une classe à un chemin, voir la rubrique ci-avant : "Comment cacher un chemin jusqu'à ce qu'il soit deviné ?".

Si vous utilisez déjà la classe "zoomable-circle" pour un chemin, vous n'avez pas besoin d'ajouter la classe "border" : ces deux classes héritent de la classe "small-stroke". C'est en fait cette dernière qui ajuste l'épaisseur des contours.

Comment réduire la taille des cercles lors d'un zoom ?

Si votre SVG contient des cercles ou des ellipses, il peut être pratique de les faire rétrécir lors d'un zoom avant. C'est une chose courante, par exemple, dans les quiz sur les villes, où l'utilisateur peut ainsi voir plus précisément la position de la ville sur la carte en zoomant.

Pour créer cet effet, il vous suffit d'ajouter la classe "zoomable-circle" au cercle (ou ellipse) que vous souhaitez rétrécir. Si vous ne savez pas comment ajouter des classes aux chemins, consultez la rubrique "Comment cacher un chemin jusqu'à ce qu'il soit deviné ?".

Notez que la classe "zoomable-circle" réduit également l'épaisseur des contours du chemin. Vous n'avez donc pas besoin d'ajouter également la classe "border" à votre cercle.

Comment redimensionner un chemin en conservant ses proportions ?

Pour redimensionner un chemin tout en conservant ses proportions (ratio), maintenez la touche Ctrl enfoncée et faites glisser l'une des flèches qui apparaissent aux coins lorsque vous sélectionnez le chemin. Les flèches ressemblent à ceci :

Maintenir Ctrl enfoncé verrouille le rapport d'aspect du chemin, et garantit que les proportions du chemin restent les mêmes.

Cela peut entraîner une mauvaise mise à l'échelle de l'épaisseur des contours. Dans ce cas, vous pouvez modifier manuellement l'épaisseur du contour à partir de l'onglet "Style de contour" de la fenêtre "Fond et contours".

Si vous voulez affecter des dimensions précises à votre chemin, vous pouvez saisir la largeur et la hauteur du chemin directement dans la barre de l'éditeur d'objets, juste en dessous de la barre de menus. Cliquez sur l'icône de verrouillage (cadenas) pour figer le rapport d'aspect, et ainsi toute modification de largeur ou de hauteur affectera l'autre proportionnellement.

Quelles sont les couleurs standards pour les SVG JetPunk ?

Voici la liste des couleurs standards utilisées par JetPunk. Si certaines descriptions vous sont inconnues, consultez la section Fonctionnalités avancées pour plus de détail. Toutes les couleurs sont données sous la forme d'un code RVB hexadécimal (sur Inkscape, ajoutez "FF" à la fin du code hex dans le champ RVBA).

• #64BEFF - bleu océan
• #FFFF80 - jaune pour les pays
• #BEEDFF - bleu clair dit "light water"
• #BBBBBB - pays environnants (ex : Turquie sur la carte de l'Europe)
• #888888 - territoires contestés
• #707070 - frontières des pays
• #FF9900 - villes / micro-états (souvent avec un fond à 70% d'opacité)

Ce sont les couleurs les plus utilisées dans les cartes standards de JetPunk. Vous trouverez ci-dessous les couleurs qui sont attribuées par les classes lors d'un quiz.

• #66FF66 - .svg-correct pour les quiz textuels
• #FF6666 - .svg-incorrect pour les quiz textuels
• #000000 - .random-svg-highlight pour les quiz textuels (path en surbrillance en mode aléatoire)
• #33FF33 - .map-correct pour les quiz Cartes
• #FF3333 - .map-incorrect pour les quiz Cartes
• #0000FF - .map-highlight pour les quiz Cartes
• #7B3294 - .svg-incorrect et .map-incorrect en mode daltonien

Sommaire

Si vous rencontrez un problème avec un SVG, vous trouverez certainement une solution ici. Pour obtenir de l'aide sur des sujets plus généraux, vous pouvez également essayer la Foire aux questions.

Erreurs lors du chargement d'un SVG

Lors du chargement d'un SVG sur JetPunk, il se peut que vous rencontriez des messages d'erreur si votre SVG n'est pas formaté correctement. Trouvez votre message d'erreur dans la liste ci-dessous et suivez les étapes pour résoudre le problème :

• Invalid parameters (Paramètres non valides)

  Cela se produit généralement lorsque vous ne sélectionnez pas de fichier à charger, ou sélectionnez plusieurs fichiers ou encore sélectionnez un mauvais fichier. Essayez de recharger la page et choisissez à nouveau le SVG que vous souhaitez charger.

• Exceeded filesize limit (Limite de taille de fichier dépassée)

  Cela signifie que vous avez essayé de télécharger un fichier dont le poids est supérieur à la valeur limite supportée par JetPunk, qui est de 2 Mb. Il est très rare qu'un SVG pèse autant, mais si c'est effectivement le cas alors cela signifie qu'il est beaucoup trop riche et détaillé. Dans tous les cas, consultez la sous-section suivante pour obtenir des conseils sur la façon de réduire le poids du fichier.

• Exceeded filesize limit of 600 kilobytes (Limite de taille de 600 kb dépassée)

  Contrairement à l'erreur précédente, votre fichier a été téléchargé sur JetPunk mais il dépasse la limite fixée de 600 kb. Cette limite a été fixée pour ne pas surcharger les serveurs JetPunk avec des SVG trop lourds, et également limiter les ralentissements lors de l'ouverture du quiz. Encore une fois, passez à la sous-section suivante pour obtenir des conseils sur la façon de réduire le poids de votre SVG.

• Uploaded file does not contain valid XML markup (Le fichier chargé ne contient pas de balise XML valide)

  Cela se produit généralement lorsque vous avez tenté de télécharger un fichier qui n'est pas un SVG, ou si le SVG est corrompu. La façon la plus simple de résoudre ce problème est d'utiliser un validateur XML. Nous vous recommandons d'utiliser W3C Markup Validation. Cet outil vérifiera si votre SVG est corrompu, il vous indiquera pour quelle(s) raison(s) et comment y remédier. N'oubliez pas qu'un SVG n'est finalement qu'fichier texte, donc si vous ne pouvez pas l'ouvrir avec Inkscape, vous pouvez toujours utiliser un éditeur de texte.

• Error processing SVG file (Erreur lors du traitement du fichier SVG)

  Tous les SVG téléchargés sur JetPunk sont compressés à l'aide d'un outil appelé "svgo". Cet outil épure et allège considérablement votre fichier, mais il peut également générer des erreurs s'il trouve quelque chose qui lui déplaît dans la structure du fichier. Malheureusement, si vous voyez cette erreur, cela signifie que quelque chose s'est mal passé lors de cette compression, et il n'y a aucun moyen de savoir quoi en particulier. Il s'agit d'une erreur qui ne se produit que très rarement, mais si c'est le cas vous pouvez essayer d'appliquer les autres correctifs mentionnés dans cette section, qui résoudront très certainement votre problème.

• Unable to find SVG tag at the start of the file (Balise SVG introuvable au début du fichier)

  Cela se produit lorsque votre SVG ne contient pas de balise "<svg" au début du fichier après compactage par svgo. Cela ne devrait pas arriver, mais si vous rencontrez cette erreur, ouvrez le SVG avec un éditeur de texte et supprimez tout ce que vous voyez écrit avant la balise "<svg".

• Unable to find height / width attribute in SVG tag. Make sure it is in pixels. (Impossible de trouver la hauteur/largeur dans la balise SVG)

  Cela se produit si les unités du fichier ne sont pas en pixels, ou si la largeur et/ou la hauteur du document n'ont pas été renseignées en attribut. Dans la plupart des cas, cela est lié à l'unité choisie, alors ouvrez le SVG dans Inkscape, allez dans les propriétés du document et changez les deux unités de mesure en pixels ("px"). Une fois cela fait, assurez-vous que le document ne dépasse pas 830px en largeur et 600px en hauteur afin de ne pas avoir un autre message d'erreur.

• SVG exceeded the maximum size of 830 pixels wide or 600 pixels high (Le SVG dépasse 830 pixels en largeur ou 600 pixels en hauteur)

  L'erreur est explicite. Pour diminuer la taille du fichier, allez dans les propriétés du document et changez sa largeur et sa hauteur à 830px et 600px respectivement. Ensuite, vous devrez probablement réduire vos chemins pour qu'ils restent contenus à l'intérieur de la page. Pour savoir comment réduire des chemins tout en conservant leur rapport d'aspect, rendez-vous à la section Foire aux questions.

• Unknown error (Erreur inconnue)

  C'est l'erreur la plus malheureuse qui puisse se produire. Nous ne savons pas quoi, nous ne savons pas où, mais quelque chose s'est mal passé lors du chargement. La seule option est de retenter de charger votre SVG et, si le message persiste, de vérifier la validité de votre fichier à l'aide de l'outil de validation de balises W3C Markup Validation.

SVG au-delà de la limite de 600 kb

Si votre SVG dépasse la limite des 600 kilobytes, vous pouvez essayer les méthodes suivantes pour réduire son poids :

1. L'option la moins risquée est d'utiliser Inkscape. Inkscape permet d'enregistrer différentes version d'un SVG ; par défaut, ils sont enregistrés au format Inkscape SVG (* .svg) qui contient des attributs XML inutiles pour JetPunk et qui alourdissent le fichier. Pour les supprimer et avoir un fichier un peu plus léger allez dans "Fichier", "Enregistrer sous..." et dans le menu déroulant sélectionnez le format "SVG simple (* .svg)".
2. Cette seconde option utilise également Inkscape. Comme il est peu probable que l'enregistrement du document en tant que "SVG simple" réduise suffisamment le poids du SVG, vous pouvez essayer d'enregistrer le fichier en tant que "SVG optimisé". Veillez à ne pas choisir accidentellement "SVG compressé" ou d'autres options n'ayant pas l'extension ".svg", car elles ne sont pas prises en charge par JetPunk. L'enregistrement d'un document en tant que SVG optimisé fera apparaître une fenêtre contextuelle avec des paramètres supplémentaires. Vous pouvez laisser les paramètres par défaut dans la plupart des cas, mais quelques-uns nécessitent d'être contrôlés. Dans l'onglet "ID", assurez-vous que "Raccourcir les identifiants" ne soit pas coché et que "Préserver les identifiants manuels [...]" soit coché. De cette façon, vous serez sûr que vos identifiants ne seront pas supprimés au cours du processus.
3. Toujours sur Inkscape, voici une méthode pour alléger un SVG en éditant les chemins. Tout d'abord, il faut savoir que plus un chemin compte de nœuds, plus il sera lourd. En particulier, si vous tracez librement des formes avec l'outil de Dessin à main levée (crayon), vous remarquerez que certains nœuds ne sont pas toujours utiles à la définition de la forme souhaitée. Vous pouvez alors les supprimer manuellement ou utiliser le puissant outil Simplifier (sous Chemin dans la barre de menus, ou raccourci Ctrl+L) qui va supprimer les nœuds en tentant de préserver la forme globale du chemin. Le seuil de simplification est réglable depuis les Préférences (sous Édition dans la barre de menus), onglet Comportement. Plus le seuil est élevé, plus la simplification sera brutale et supprimera de nœuds. En revanche, un seuil trop bas n'affectera pas votre tracé, voire amenera à la création de nœuds supplémentaires. Il faut donc adapter ce seuil à votre dessin. Enfin, en appuyant de manière rapide et répétée sur Ctrl+L, la simplification se trouvera incrémentée. Attention cependant à ne pas abuser de l'outil de simplification qui pourrait défigurer vos tracés.
4. Essayez SVGOMG.
5. Essayez SVG Minify.
6. Essayez Nano.

Ces 3 dernières options renvoient à des outils de compression de fichiers SVG, en ligne. S'ils peuvent permettre de réduire considérablement la taille du fichier, ils peuvent aussi en affecter voire supprimer des identifiants de chemin ou des classes. Gardez donc toujours une copie de sauvegarde avant de les utiliser.

Un chemin ne se colore pas une fois deviné

Ce problème peut avoir plusieurs explications. En voici une liste :

1. Cela peut sembler idiot, mais avez-vous bien vérifié que l'id ou la classe saisi à l'étape 2 corresponde bien à celle présente dans le SVG ? Ces données doivent correspondre parfaitement pour que tout fonctionne.
2. Un autre CSS remplace la coloration standard des réponses. Si, par exemple, vous avez copié une ligne de CSS provenant d'un autre quiz, assurez-vous de son effet. Si vous lisez ce Guide, vous devrez être en mesure de comprendre les effets d'un CSS sur un quiz et d'identifier si une de ses lignes empêche le chemin de se colorer en vert lorsqu'il est deviné.
3. Le chemin possède uniquement un contour, sans fond. Dans ce cas, le chemin ne deviendrait pas vert car les styles affectent le fond. Pour corriger cette erreur, accédez à l'écran "Fond et contour" dans Inkscape et donnez au chemin n'importe quelle couleur de remplissage unie.
4. La dernière des options les plus probables est que vous ayez entré un id de groupe à l'étape 2 au lieu de l'id du chemin. Malheureusement, JetPunk ne prend pas entièrement en charge les groupes de chemins. La solution consiste donc à faire du groupe un chemin unique, en utilisant les outils "Union" ou "Combiner", et utiliser l'id de ce chemin. Vous pouvez également affecter la même classe à chaque chemin dans ce groupe en utilisant celle saisie à l'étape 2. Tout ceci est détaillé dans la section "Comment changer la couleur de plusieurs chemins, pour une seule réponse ?" de la Foire aux questions.

Parties du SVG non visibles

Si des parties de votre SVG ne sont pas visibles sur JetPunk, le problème est probablement que le dessin déborde partiellement de la page du document. Si vous ne voyez pas la bordure de la page, accédez aux propriétés du document et assurez-vous que l'option "Afficher la bordure de page" est bien cochée. Vous pouvez également changer la couleur de bordure à l'aide de l'option "Couleur de la bordure" et cochez "Bordure au-dessus du dessin". Ainsi, vous pouvez vous assurer que tout le dessin se trouve dans ces limites. Si ce n'est pas le cas, vous pouvez redimensionner votre dessin en sélectionnant tous les chemins et en ajustant leurs tailles en maintenant la touche Ctrl enfoncée pour conserver leur rapport de forme.

Dysfonctionnements du zoom

Il s'agit d'un vieux bug qui ne devrait plus se produire. Si vous rencontrez toujours des problèmes lorsque vous zoomez, procédez aux vérifications suivantes :

• Ouvrez le fichier avec Inkscape et accédez aux propriétés du document. Dans cet écran, vérifiez que l'échelle est réglée exactement sur "1.00000". Les problèmes de zoom sont généralement dus à des valeurs d'échelle aberrantes. Après l'avoir corrigé, vous devrez redimensionner les chemins pour les amener à la taille souhaitée.

• Une autre possibilité est qu'il y ait un problème avec la viewBox. "viewBox" (zone de vue) est un attribut du SVG qui indique au programme essayant de rendre l'image la taille à laquelle il doit la faire apparaître. Vous pouvez voir la valeur attribuée à la viewbox en ouvrant l'éditeur XML dans Inkscape et en sélectionnant la balise "svg:svg" :

  Idéalement, la valeur de la viewBox dans l'éditeur doit être "0 0 L H", où "L" est la largeur de la page et "H" la hauteur, toutes deux en pixels. Dans les propriétés du document, vous pouvez également modifier la largeur et la hauteur de la viewBox (zone de vue), sous l'échelle. Enfin, dans le cas où votre document n'aurait pas d'attribut viewBox, vous n'êtes tout simplement pas concerné par cette solution.

Bien que ce bug de zoom ne soit plus censé se produire, ces deux explications sauront le corriger dans l'éventualité où il se produirait.

Le texte d'un SVG a un aspect modifié une fois chargé

Il se peut que la police de caractères (fonte) que vous avez choisie pour un texte sur Inkscape se trouve modifiée lors du chargement de votre SVG sur JetPunk. Cela tient au fait que, à la différente d'Inkscape, les SVG simples traités par JetPunk ne stockent pas les polices. Ainsi, si vous avez utilisé une police particulière qui n'est pas reconnue par défaut par les navigateurs, le texte sera différent lors de son chargement.

La solution la plus simple est de changer la police en Helvetica ou Arial, reconnues par tous les navigateurs.

Une autre solution, si vous souhaitez conserver l'aspect "personnalisé" de votre texte, consiste à utiliser l'outil de conversion d'objet en chemin (sous "Chemin" dans la barre de menus). Cet outil convertira le texte en un groupe de chemins, avec un chemin pour chaque lettre. Pour fusionner ces chemins en un seul, séparez-les d'abord en faisant un clic droit sur le groupe et en cliquant sur "Dégrouper". Ensuite, en gardant toutes les lettres sélectionnées, cliquez sur "Combiner" sous "Chemin". De cette façon, le texte aura le même aspect sur JetPunk que sur votre SVG !

Notez que cette méthode entraîne la suppression des ids et classes préalablement définies pour l'objet texte. Il vous faudra donc les ressaisir manuellement pour le nouveau chemin. Par ailleurs, une fois le texte converti en chemin, rappelez-vous qu'il ne pourra plus être modifié avec l'outil texte.

Sommaire

Cette page est consacrée aux outils proposés par JetPunk, et en particulier le Dot Placer et la fonction Show Missing Dots.

Le Dot Placer

Le Dot Placer, ou "Placeur de Points", est un outil qui permet d'ajouter des cercles dans le style de JetPunk aux SVG standard sans avoir à utiliser un éditeur comme Inkscape. Vous trouverez une brève explication en anglais sur la page dédiée à cet outil, mais nous vous proposons ici un tutoriel détaillé en français.

Premièrement, voyons les données nécessaires à l'utilisation de cet outil :

1. Le nom de la ville, du lieu, du monument où de tout autre élément que vous souhaitez matérialiser par un cercle sur une carte. Ce nom sera utilisé comme id.
2. La latitude et la longitude décimales des points où vous souhaitez insérer les cercles ; attention à ne pas saisir les coordonnées en degrés. Pour les villes, geodatos est un outil très pratique. Pour les autres éléments tels que les monuments, Google Maps permet d'obtenir les coordonnées en cliquant droit sur l'épingle les localisant. La précision demandée par JetPunk est de 3 décimales.
3. (Facultatif) Le rayon que vous souhaitez donner aux cercles. La taille par défaut est de 4 pixels, comme pour les capitales dans les SVG standards. Certains utilisateurs aiment faire varier le rayon des cercles, par exemple en fonction de la population d'une ville.

Dans la zone de texte de l'outil, vous devez saisir ces données séparées par une tabulation, afin de les délimiter en colonnes. Ne séparez pas les données avec des espaces, cela ne fonctionnera pas.

Vous pouvez également appliquer un style à tous vos points avant de les placer, grâce au sélecteur de style. La valeur par défaut du remplissage des ronds est #FF9900 (orange), comme c'est traditionnellement le cas sur les quiz JetPunk. L'opacité du fond est réglée à 70 % et le contour est noir uni, avec une épaisseur de 1 px. Ces valeurs sont celles par défaut, mais vous pouvez les personnaliser à votre guise.

La prochaine étape consiste à choisir le SVG standard qui fera office de fond de carte (Background). Vous avez le choix entre les cartes des différents continents, la carte du monde et celle des États-Unis, ainsi que deux autres cartes "bonus" qui sont des cartes vides utilisant différentes projections.

Une fois votre fond de carte choisi, cliquez sur "Draw Dots" (Dessiner les Points) puis téléchargez le SVG généré par l'outil. Il ne vous reste plus qu'à charger ce SVG dans votre quiz ! Les ids des cercles sont générés dans la zone de texte, où vous avez saisi vos données, en tant que cinquième colonne. Ainsi, vous pouvez aisément les collecter pour les ajouter à l'étape 2 (Step 2) du créateur de quiz, afin de colorer ces chemins lorsque les réponses sont trouvées.

Vous pouvez également télécharger la carte que vous souhaitez au préalable pour récupérer le SVG standard seul.

Remarque : si vous décidez de changer de fond de carte après avoir généré les cerles, ceux-ci seront supprimés. N'oubliez pas de cliquer à nouveau sur "Draw Dots" pour les générer sur la nouvelle carte choisie.

L'option Show Missing Dots

Cette fonctionnalité, que l'on pourrait traduire par "Afficher les points manquants", permet d'afficher ou masquer en un clic les points de repère sur un SVG. L'exemple d'utilisation le plus célèbre est bien entendu le quiz des Pays du monde, dans lequel les points indiquent les pays qui n'ont pas encore été devinés.

Pour activer cette fonctionnalité, accédez aux options SVG en cliquant sur le bouton jaune à l'étape 4 de la création d'un quiz textuel. Une fois le SVG chargé, choisissez "Yes" en face de l'option "Missing Dots". Deux nouvelles options apparaîtront, où vous pourrez modifier les textes affichés : "Show/Hide Missing Countries". En laissant ces options par défaut et si le quiz est correctement défini en Français alors JetPunk changera automatiquement ces textes en "Cacher/Révéler les pays manquants" (cela fonctionne pour toutes les langues proposées sur JetPunk). Si vous le souhaitez, vous pouvez néanmoins modifier ces textes selon votre envie.

Passons à la façon de dire à JetPunk où ces points doivent apparaître. Pour ce faire, passez à l'étape 2 et assurez-vous d'avoir au moins quatre colonnes. La première à gauche sera, comme d'habitude, réservée aux ids ou classes pour colorer les chemins. La deuxième et la troisième colonne doivent contenir les coordonnées en pixels de la position du point ; attention, dans ce cas il ne s'agit pas des coordonnées géorgaphiques, mais des coordonnées sur le SVG lui-même :

• La 2^ème colonne correspond à la distance horizontale à partir du coin supérieur gauche du SVG, en pixels
• La 3^ème colonne correspond à la distance verticale à partir du coin supérieur gauche du SVG, en pixels

Ainsi, saisir "192" et "123" placerait un point à 192px à droite et 123px en dessous du coin supérieur gauche du SVG. Si une cellule est laissée vide, sa valeur est prise égale à 0.

L'exemple ci-dessous montre comment saisir les coordonnées de points placés sur différentes îles, sur la carte du Monde JetPunk :

À l'étape 4, vous pouvez avoir un aperçu de l'endroit où les points apparaissent et procéder aux éventuels ajustements. Malheureusement, avec cette méthode, le positionnement des points doit se faire par tâtonnement. Il existe cependant une alternative qui consiste à utiliser Inkscape pour créer et placer vos points directement sur la carte. Sélectionnez l'un de ces points et récupérez les coordonnées de son centre dans l'éditeur XML (attributs "cx" et "cy"). Vous pouvez utiliser directement ces coordonnées à l'étape 2 pour compléter les colonnes 2 et 3.