Tutoriels pour Inkscape et Xia

Créez vos images interactives !

Usages du numérique Formation Ressources

mercredi 20 janvier 2016, par Serge Raynaud

Présentation

Xia est un logiciel libre développé par des enseignants de l’académie de Versailles. Il est distribué sous la licence GPLv3.
XIA est un « outil auteur » qui, couplé à Inkscape, vous permet de réaliser simplement des images interactives, avec des détails zoomables et des jeux sérieux en html5.

Pour bien comprendre :

  • Inkscape : logiciel de traitement vectoriel d’images permet d’associer des informations à une image ou des détails d’une image. Ces informations, écrites en format texte dans des onglets, sont intégrées au fichier « *.svg » créé par Inkscape lors de enregistrement de votre travail. Ce fichier « *.svg » se présente comme une image classique et sa taille en kilooctets est très petite. Tel que, le fichier n’a aucune interactivité...
  • XIA : ce logiciel est devenu une extension d’Inkscape. Il est donc accessible depuis Inkscape, même si les deux doivent avoir été installés, Inkscape puis XIA, sur votre ordinateur. XIA va « récupérer », « assembler » et compiler en langage html5 toutes les informations embarquées dans l’image « *.svg ». Le tout en quelques secondes.

Mutualisation et partage

Une formidable opportunité vous est offerte avec ce duo magique Inkscape-XIA : travailler seul ou à plusieurs sur un même projet, puis partager ce projet simplement, via le web ou par mail.
Car, même si la quantité d’informations est importante, le fichier *.svg sera très facile à faire circuler grâce à sa taille très faible.

l’exemple ci-dessous est parlant : l’image interactive présente une quantité non négligeable d’informations ; le fichier « Tuto_Xia_Couleurs_Dane_2000_1300_win.svg » « pèse » 429 Koctets.
Si vous avez installé Inkscape et XIA, téléchargez ce fichier, ouvrez-le avec Inkscape et exportez-le avec XIA dans un dossier que vous aurez créé avant pour accueillir votre image interactive : vous obtiendrez, avec des logos et un fond différents, la même image interactive !

  • Ouverture dans une fenêtre :

Cliquer sur cette image pour afficher l’image interactive des tutoriels


Documents source

  • Image source du tutoriel (sur base bitmap au format PNG ci-dessous), exportée avec Xia en accordion black :
    Tutoriels pour Inkscape et Xia sous Windows
    Svg à télécharger, placer dans un dossier de destination, ouvrir avec Inkscape et exporter avec Xia en accordion black pour obtenir l’image active
    S. Raynaud
  • Logos (Fond aux couleurs du site HR et logos HR-MA) :
    Images de fond et logos HR-MA
    À substituer aux logos XIA du dossier Img
    S. Raynaud
  • Image de base créée avec Inkscape (Charte Dane académie de Versailles, couleurs des rectangles et police BPreplay). C’est ce dessin vectoriel qui, exporté en bitmap, me donne l’image de fond « *.png ».
Image Inkscape pour créer la base bitmap du tutoriel Xia
Image créée avec des calques vectoriels et exportée en bitmap (png)
S. Raynaud

Liens

Dans la même rubrique