« Utiliser Inkscape pour l'animation web » : différence entre les versions
(Page créée avec « {{En construction}} == Introduction == Ce tutoriel est une traduction de cet [http://edutechwiki.unige.ch/en/Using_Inkscape_for_web_animation article] sur [http://edutech... ») |
|||
| Ligne 1 : | Ligne 1 : | ||
{{En construction}} | {{En construction}} | ||
== Introduction == | == 1. Introduction == | ||
Ce tutoriel est une traduction de cet [http://edutechwiki.unige.ch/en/Using_Inkscape_for_web_animation article] sur [http://edutechwiki.unige.ch/en/Main_Page EduTechWiki (en)]. | Ce tutoriel est une traduction de cet [http://edutechwiki.unige.ch/en/Using_Inkscape_for_web_animation article] sur [http://edutechwiki.unige.ch/en/Main_Page 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. | 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. | ||
| Ligne 9 : | Ligne 9 : | ||
Pré-requis: | Pré-requis: | ||
[http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial Using SVG with HTML5 tutorial (en) | [http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial Using SVG with HTML5 tutorial](en) | ||
[http://edutechwiki.unige.ch/en/Static_SVG_tutorial Static SVG tutorial (en) | [http://edutechwiki.unige.ch/en/Static_SVG_tutorial Static SVG tutorial](en) | ||
[http://edutechwiki.unige.ch/en/SVG-SMIL_animation_tutorial SVG-SMIL animation tutorial (en) | [http://edutechwiki.unige.ch/en/SVG-SMIL_animation_tutorial SVG-SMIL animation tutorial](en) | ||
Interactive SVG-SMIL animation tutorial (maybe ...) (en) | [http://edutechwiki.unige.ch/en/Interactive_SVG-SMIL_animation_tutorial Interactive SVG-SMIL animation tutorial] (maybe ...) (en) | ||
Voir aussi : | Voir aussi : | ||
SVG (Short overview) (en) | [http://edutechwiki.unige.ch/en/SVG SVG] (Short overview)(en) | ||
SVG links (links to various SVG resources) (en) | [http://edutechwiki.unige.ch/en/SVG_links SVG links] (links to various SVG resources) (en) | ||
Ci-dessous, nous allons utiliser les exemples suivants: | |||
Dragon head silhouette | Dragon head silhouette | ||
Version du 28 octobre 2014 à 14:03
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