Tutoriels pour Inkscape et Xia Créez vos images interactives !

, 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 :
    Scalable Vector Graphics - 469.8 ko
    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 – 20 janvier 2016
  • Logos (Fond aux couleurs du site HR et logos HR-MA) :
    Zip - 60.9 ko
    Images de fond et logos HR-MA
    À substituer aux logos XIA du dossier Img
    S. Raynaud – 20 janvier 2016
  • 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 ».
    Scalable Vector Graphics - 95.8 ko
    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 – 20 janvier 2016

Liens