{"id":8549,"date":"2014-12-18T11:40:05","date_gmt":"2014-12-18T11:40:05","guid":{"rendered":"https:\/\/www.lilavert.com\/blog_lilavert\/?p=8549"},"modified":"2014-12-18T11:40:05","modified_gmt":"2014-12-18T11:40:05","slug":"svg-animations-et-applications-article-tres-complet-de-sara-soueidan","status":"publish","type":"post","link":"https:\/\/www.lilavert.com\/blog_lilavert\/svg-animations-et-applications-article-tres-complet-de-sara-soueidan\/","title":{"rendered":"SVG, animations et applications&#8230; article tr\u00e8s complet de Sara Soueidan"},"content":{"rendered":"<p><strong>SVG, animations et applications&#8230; <\/strong>article tr\u00e8s complet de\u00a0Sara Soueidan.<\/p>\n<p><a href=\"https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8550\" title=\"svg-animations - applications web tuto\" src=\"https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations.png\" alt=\"\" width=\"500\" height=\"628\" srcset=\"https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations.png 500w, https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations-119x150.png 119w, https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations-238x300.png 238w, https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations-400x502.png 400w, https:\/\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/12\/svg-animations-300x376.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>SVG\u00a0est un format d\u2019image vectorielle\u00a0de type XML pour les\u00a0graphiques en 2D, qui permet l\u2019interactivit\u00e9\u00a0et l\u2019animation. Les SVG sont des\u00a0balises XML\u00a0avec lesquelles il est possible de cr\u00e9er des formes et des graphiques que vous pouvez animer comme les \u00e9l\u00e9ments HTML.<\/p>\n<p><a href=\"https:\/\/plus.google.com\/+SaraSoueidan\/about\" rel=\"author\" target=\"_blank\">Sara Soueidan<\/a>\u00a0<em>est une int\u00e9gratrice web libanaise. Elle aime enseigner et \u00e9crit des tutoriels sur son\u00a0<a href=\"http:\/\/sarasoueidan.com\/\" target=\"_blank\">blog<\/a>\u00a0et sur\u00a0<a href=\"http:\/\/tympanus.net\/codrops\/\">Codrops<\/a>, dont elle est un des membres actifs. Vous pouvez la suivre sur<\/em>\u00a0<a href=\"https:\/\/twitter.com\/SaraSoueidan\">Twitter<\/a>\u00a0<em>et sur<\/em>\u00a0<a href=\"https:\/\/github.com\/SaraSoueidan\">Github<\/a>.<\/p>\n<ul>\n<li><a title=\"SVG, animations et applications web\" href=\"http:\/\/la-cascade.ghost.io\/svg-style-et-anime-avec-css\/\" target=\"_blank\"><strong>Article<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>SVG, animations et applications&#8230; article tr\u00e8s complet de\u00a0Sara Soueidan. SVG\u00a0est un format d\u2019image vectorielle\u00a0de type XML pour les\u00a0graphiques en 2D,<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[1332,215,3648,206,16,233,245,143],"tags":[198,504,3657,3661,3660,219,4008,103,3453,503,1145,141,3662,3656,1655,873,594,4005,146,148,3658,3659],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p6hYQX-2dT","jetpack-related-posts":[{"id":6842,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/a-super-jolie-html5-animation\/","url_meta":{"origin":8549,"position":0},"title":"A super jolie html5 animation","author":"LilaVert I-I","date":"30\/04\/2014","format":"video","excerpt":"A super jolie html5 animation pour le site\u00a0Capitol Couture Cliquez et passez votre souris sur \"Issue ONE\"","rel":"","context":"Dans &quot;Creation&quot;","block_context":{"text":"Creation","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/creation-2\/"},"img":{"alt_text":"html5 animation \/ Capitol couture","src":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/04\/html5-animation.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1278,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/les-plus-beaux-sites-responsive-design\/","url_meta":{"origin":8549,"position":1},"title":"Les plus beaux sites Responsive Design !","author":"LilaVert I-I","date":"12\/06\/2013","format":"gallery","excerpt":"Les plus beaux sites Responsive Design ! Une recherche sur n'importe quel moteur de recherche et la plupart des blogs \u00e9num\u00e9rant leur pr\u00e9f\u00e9rence sur le sujet se r\u00e9p\u00e8tent instansiblement. Les m\u00eames sites, pas des meilleurs \u00e0mha. Voici donc mon petit quid qui s'allongera au fil de mes d\u00e9couvertes... ~ El\u00e9gant\u2026","rel":"","context":"Dans &quot;News&quot;","block_context":{"text":"News","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/news\/"},"img":{"alt_text":"tres beau site responsive design","src":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2013\/06\/zoom-disney-nature-site-responsive.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2013\/06\/zoom-disney-nature-site-responsive.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2013\/06\/zoom-disney-nature-site-responsive.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2013\/06\/zoom-disney-nature-site-responsive.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":2473,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/selection-doutils-pour-un-site-compatible\/","url_meta":{"origin":8549,"position":2},"title":"Selection d&rsquo;outils pour un site compatible","author":"LilaVert I-I","date":"16\/07\/2013","format":"link","excerpt":"Selection d'outils pour un site compatible. Excellent article\u00a0sur le Blog du Webdesign, d\u00e9couvrez diff\u00e9rentes ressources pour faire des sites web compatibles sur tous les navigateurs existants... \u00a0","rel":"","context":"Dans &quot;graphisme&quot;","block_context":{"text":"graphisme","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/graphisme\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13545,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/le-site-mignon-du-jour\/","url_meta":{"origin":8549,"position":3},"title":"Le site mignon du jour","author":"LilaVert I-I","date":"06\/10\/2018","format":false,"excerpt":"Le site la \"Galerie des Esp\u00e8ces\" est un site ludique compos\u00e9e d\u2019une vingtaine de cr\u00e9atures, chaque visuel de cr\u00e9ature est accompagn\u00e9 d\u2019une pr\u00e9sentation \u00e9crite de l\u2019esp\u00e8ce et de sa lecture en audiodescription. Ces esp\u00e8ces imaginaires ont \u00e9t\u00e9 enti\u00e8rement fa\u00e7onn\u00e9es \u00e0 la main avec de la p\u00e2te \u00e0 modeler. Visitez le\u2026","rel":"","context":"Dans &quot;Creation&quot;","block_context":{"text":"Creation","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/creation-2\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2018\/10\/Galerie-des-especes.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":8182,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/600-free-vector-silhouettes\/","url_meta":{"origin":8549,"position":4},"title":"+600 free vector silhouettes","author":"LilaVert I-I","date":"06\/11\/2014","format":"image","excerpt":"+600 free vector silhouettes Free download by\u00a0VectorOpenStock.com\u00a0features more than 600\u00a0silhouettes of people in all manner of activity, from skateboarding to running. Dozens of animals, catfish to foxes, ducks or giraffes. Transport, scooters to trucks.\u00a0Available as a single file, in .ai, .eps, .pdf, and .svg format. (Source article : Webdesignerdepot) DOWNLOAD\u2026","rel":"","context":"Dans &quot;Creation&quot;","block_context":{"text":"Creation","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/creation-2\/"},"img":{"alt_text":"Silhouettes Freebie vector free download","src":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/11\/SilhouettesFreebie.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/11\/SilhouettesFreebie.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/11\/SilhouettesFreebie.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.lilavert.com\/blog_lilavert\/wp-content\/uploads\/2014\/11\/SilhouettesFreebie.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1511,"url":"https:\/\/www.lilavert.com\/blog_lilavert\/css-tools-for-webdesigner\/","url_meta":{"origin":8549,"position":5},"title":"CSS tools for webdesigner","author":"LilaVert I-I","date":"28\/02\/2013","format":false,"excerpt":"CSS tools for webdesigner \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0GRADIENT GENERATOR \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0BORDER RADIUS \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u2026","rel":"","context":"Dans &quot;graphisme&quot;","block_context":{"text":"graphisme","link":"https:\/\/www.lilavert.com\/blog_lilavert\/category\/graphisme\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/posts\/8549"}],"collection":[{"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/comments?post=8549"}],"version-history":[{"count":0,"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/posts\/8549\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/media?parent=8549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/categories?post=8549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lilavert.com\/blog_lilavert\/wp-json\/wp\/v2\/tags?post=8549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}