« Utiliser Inkscape pour l'animation web » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 20 : Ligne 20 :


tête de dragon
tête de dragon
     Original: [https://openclipart.org/detail/64849/dragon-head-silhouette-by-kuba dragon-head-silhouette-by-kuba] (openclipart.org)  
     Version originale: [https://openclipart.org/detail/64849/dragon-head-silhouette-by-kuba dragon-head-silhouette-by-kuba] (openclipart.org)  
     Revised version: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette.svg dragon-head-silhouette.svg]  
     Version révisée: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette.svg dragon-head-silhouette.svg]  
     Animated version: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette-anim.svg dragon-head-silhouette-anim.svg]  
     Version animée: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette-anim.svg dragon-head-silhouette-anim.svg]  


fille de manga
fille de manga
     Original: [https://openclipart.org/detail/2364/girl-with-silver-hair-by-paulliu girl with silver hair] by Ying-Chun Liu PaulLiu  
     Version originale: [https://openclipart.org/detail/2364/girl-with-silver-hair-by-paulliu girl with silver hair] by Ying-Chun Liu PaulLiu  
     Cleaned version: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/paulliu_girl_with_silver_hair-mod.svg paulliu_girl_with_silver_hair-mod.svg]  
     Version révisée: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/paulliu_girl_with_silver_hair-mod.svg paulliu_girl_with_silver_hair-mod.svg]  
     Animated version: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/paulliu_girl_with_silver_hair-mod2.svg paulliu_girl_with_silver_hair-mod2.svg]
     Version animée: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/paulliu_girl_with_silver_hair-mod2.svg paulliu_girl_with_silver_hair-mod2.svg]


== ==
== ==

Version du 28 octobre 2014 à 15:19

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.



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és 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 (peut-être...) (en)

Voir aussi:

   SVG (bref aperçu)(en)
   SVG links (liens vers les différentes ressources SVG) (en)

Nous allons utiliser les exemples suivants:

tête de dragon

   Version originale: dragon-head-silhouette-by-kuba (openclipart.org) 
   Version révisée: dragon-head-silhouette.svg 
   Version animée: dragon-head-silhouette-anim.svg 

fille de manga

   Version originale: girl with silver hair by Ying-Chun Liu PaulLiu 
   Version révisée: paulliu_girl_with_silver_hair-mod.svg 
   Version animée: paulliu_girl_with_silver_hair-mod2.svg