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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 22 : Ligne 22 :


tête de dragon
tête de dragon
     Original: dragon-head-silhouette-by-kuba (openclipart.org)  
     Original: [https://openclipart.org/detail/64849/dragon-head-silhouette-by-kuba dragon-head-silhouette-by-kuba] (openclipart.org)  
     Revised version: dragon-head-silhouette.svg  
     Revised version: [http://tecfa.unige.ch/guides/svg/ex/html5/animation/dragon-head-silhouette.svg dragon-head-silhouette.svg]
     Animated version: dragon-head-silhouette-anim.svg  
     Animated version: [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

Version du 28 octobre 2014 à 14:08

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é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 (maybe ...) (en)

Voir aussi :

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

Nous allons utiliser les exemples suivants:

tête de dragon

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

fille de manga

   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