Xia est un logiciel libre développé par la délégation académique pour le numérique éducatif de l’académie de Versailles. Distribué sous licence GPLv3, (Windows, Mac, Linux) il est le successeur du logiciel « ImagesActives ». Xia est un convertisseur qui prend en entrée un fichier svg et fournit en sortie une image active en html5. Au-delà des templates d’export déjà connus des utilisateurs du logiciel ImagesActives (accordéon, boutons, etc.), Xia permet en outre de générer des activités interactives : jeux de glisser-déposer, discrimination, sélection, etc.
Le site Web : http://xia.dane.ac-versailles.fr/

Des exemples et une documentation sont sur le site. Indispensable pour utiliser Xia : 10 tutoriels vidéo progressifs pour créer une image html5 interactive

Cette vidéo ci-dessous montre comment réaliser un petit jeu html5 basé sur le principe du glisser/déposer. Le jeu est conçu avec Inkscape et généré en html5 grâce à XIA.

Créer une image Xia en 7 tutoriels par Christine Fiasson – TraAM Histoire-Géographie
http://www.histoire.ac-versailles.fr/IMG/html/traam_tutorielxia.html#

Utilisation pédagogique avec Éduthèque :

Les 3 scénarios pédagogiques ci-dessous indexés pour Éduthèque dans les EDU'bases – (Histoire Géographie)
http://www.edutheque.fr/accueil.html

Au collège (5ème) :
Introduire la séquence sur la place de l'Église par un "moment numérique" avec Xia

Dans le cadre des TraAM 2014-2015, cette activité permet d'introduire la séquence en histoire sur "La place de l'Église au Moyen Âge" grâce à une animation interactive (format html 5) conçue avec le logiciel Xia. Le questionnaire permet d'étudier une enluminure représentant Saint Michel combattant un dragon (source : le site du Louvre via éduthèque). L'analyse guidée permet un travail en autonomie des élèves en salle multimédia.

Au collège (3ème) :
Étudier la Libération de Paris en étant guidé par une image Xia

Cette activité a été conçue dans le cadre des TraAM 2014-2015. L'animation proposée est basée sur une image support composée de captures issues d'un film d'actualités tourné en 1944 sur la Libération de Paris. Ce film est accessible via le site INA-Jalons via éduthèque. Une vidéo est associée à chaque capture et les élèves peuvent accéder à des extraits du film en cliquant sur les zones interactives de l'image. Des consignes leur précisent la durée du visionnage et ils doivent répondre à un ensemble de questions. Ils rédigent leurs réponses dans un questionnaire en ligne (édu-Sondage) pour faciliter la correction collective et la remédiation.

Au Lycée (1ère STMG ou 3ème) :
De la carte IGN de Roissy au croquis, une activité interactive réalisée avec Xia

Cette activité a été conçue dans le cadre des TraAM 2014-2015. L'analyse de la carte IGN de l'aéroport de Roissy est guidée par trois animations interactives différentes basées sur des images Xia : chacune d'entre elles correspond à une étape de l'activité numérique que les élèves doivent réaliser. L'image qui sert de support à la première image Xia est une carte IGN issue du site édugéo via éduthèque. Ces animations interactives ont été conçues pour permettre un travail en autonomie à partir d'un document cartographique dans une logique de pédagogie différenciée.

Un autre outil pour créer interactivité et animation des objets repose sur la bibliothèque javascript Snap.svg

Le site Web de Snap.svg : http://snapsvg.io/

Utilisation pédagogique en SVT : http://viasvt.fr/

Les applications SVT du site Viasvt proposées devraient normalement fonctionner sur tout système, ordinateur ou tablette, doté d'un navigateur moderne prenant correctement en charge les technologies HTML5, SVG et Javascript (Chrome et Firefox de préférence). François Puech, enseignant de SVT au  lycée collège Barral à Castres, réalise le contenu avec le logiciel libre Inkscape et Snap.svg.
http://www.cafepedagogique.net/lexpresso/Pages/2016/01/12012016Article635881777153643957.aspx

Démo utilisation Snap.svg :

Des ressources pour Inkscape :

A Noter : D'autres outils pour des animations à partir d'images Svg https://inkscape.org/fr/apprendre/animation/

1. Des didacticiels en ligne : http://www.inkscape.org/doc/basic/tutorial-basic.fr.html (débutant)

et http://www.inkscape.org/doc/advanced/tutorial-advanced.fr.html (avancé)

2. Un site de ressources : http://www.inkscape-fr.org/

3. Un guide complet du logiciel : http://tavmjong.free.fr/INKSCAPE/MANUAL/html_fr/index.html

4. Des didacticiels vidéo téléchargeables sur http://screencasters.heathenx.org/

Un tutoriel tout en français : http://fr.flossmanuals.net/inkscape/

2 numéros spéciaux du magazine libre "Full Circle Magazine", consacré au logiciel libre de dessin vectoriel Inkscape.
n° 1 : http://www.fullcirclemag.fr/?download/302
n°2 : http://www.fullcirclemag.fr/?download/312

Quelques exemples : Cartographie: utiliser la topographie

Cartographie: la perspective pour focaliser les données