Utiliser Inkscape pour l'animation web

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

1. Introduction

Ce tutoriel est une traduction de cet article sur EduTechWiki (en). Dans ce petit tutoriel, nous allons fournir des conseils concernant l'édition d'images SVG dans Inkscape pour ajouter des animations SVG-SMIL et de l'interactivité avec d'autres outils. Inkscape ne permet pas l'édition de code SVG, mais il est utile d'apprendre quelques astuces concernant Inskscape afin de préparer le SVG pour créer des animations à base de cliparts complexe que vous pourriez trouver sur http://openclipart.org.

(Les exemples de cette page ont été testé en janvier 2014 avec Firefox et Chrome.)

Pré-requis:

   Using SVG with HTML5 tutorial(en)
   Static SVG tutorial(en)
   SVG-SMIL animation tutorial(en)
   Interactive SVG-SMIL animation tutorial (maybe ...) (en)

Voir aussi :

   SVG (Short overview)(en)
   SVG links (links to various SVG resources) (en)

Ci-dessous, nous allons utiliser les exemples suivants:

Dragon head silhouette

   Original: dragon-head-silhouette-by-kuba (openclipart.org) 
   Revised version: dragon-head-silhouette.svg 
   Animated version: dragon-head-silhouette-anim.svg 

Manga girl

   Original: girl with silver hair by Ying-Chun Liu PaulLiu 
   Cleaned version: paulliu_girl_with_silver_hair-mod.svg 
   Animated version: paulliu_girl_with_silver_hair-mod2.svg