{"id":914,"date":"2014-11-04T07:08:41","date_gmt":"2014-11-04T07:08:41","guid":{"rendered":"https:\/\/blog.kesato.com\/?p=914"},"modified":"2015-01-02T01:30:34","modified_gmt":"2015-01-02T01:30:34","slug":"web-design-with-svg-animation","status":"publish","type":"post","link":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/","title":{"rendered":"Web Design Using SVG Animation"},"content":{"rendered":"<p>SVG is Scaleable Vector Graphics offer the ability to have delicate line art due to its vector and path. SVG and Responsive Techniques are among the web design trends for 2014. There are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence. We have collected some tutorials that will help you learn how to create SVG animation for your website<!--more--><\/p>\n<p><a href=\"http:\/\/blog.teamtreehouse.com\/svg-path-animation-with-jquery-and-illustrator\" target=\"_blank\">SVG Path Animation with jQuery and Illustrator<\/a><\/p>\n<p><a href=\"http:\/\/blog.teamtreehouse.com\/svg-path-animation-with-jquery-and-illustrator\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-928\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Path-Animation-with-jQuery-and-Illustrator.jpg\" alt=\"web design using SVG\" width=\"650\" height=\"400\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Path-Animation-with-jQuery-and-Illustrator.jpg 650w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Path-Animation-with-jQuery-and-Illustrator-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/jakearchibald.com\/2013\/animated-line-drawing-svg\/\" target=\"_blank\">Animated Line Drawing in SVG<\/a><\/p>\n<p><a href=\"http:\/\/jakearchibald.com\/2013\/animated-line-drawing-svg\/\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-915\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/line-drawing-in-SVG.jpg\" alt=\"Line Drawing in SVG\" width=\"650\" height=\"400\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/line-drawing-in-SVG.jpg 650w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/line-drawing-in-SVG-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/oak.is\/thinking\/animated-svgs\/\" target=\"_blank\">Animated SVGs: Custom Easing and Timing<\/a><\/p>\n<p><a href=\"http:\/\/oak.is\/thinking\/animated-svgs\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone\" title=\"Web Design with SVG Animation\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/animated-svg-ff.svg\" alt=\"\" width=\"650\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/tympanus.net\/codrops\/2013\/12\/30\/svg-drawing-animation\/\" target=\"_blank\">SVG Drawing Animation<\/a><\/p>\n<p><a href=\"http:\/\/tympanus.net\/codrops\/2013\/12\/30\/svg-drawing-animation\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-920\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Drawing.png\" alt=\"Web design with SVG\" width=\"650\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Drawing.png 1000w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Drawing-300x180.png 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/tympanus.net\/Development\/AnimatedSVGIcons\/\" target=\"_blank\">Animation SVG Icons<\/a><\/p>\n<p><a href=\"http:\/\/tympanus.net\/Development\/AnimatedSVGIcons\/\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-921\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Animation-SVG-Icons.png\" alt=\"Animation SVG Icons\" width=\"650\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Animation-SVG-Icons.png 766w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Animation-SVG-Icons-300x223.png 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/product.voxmedia.com\/2013\/11\/25\/5426880\/polygon-feature-design-svg-animations-for-fun-and-profit\" target=\"_blank\">Polygon Feature Design: SGV Animations For Fun and Profit<\/a><\/p>\n<p><a href=\"http:\/\/product.voxmedia.com\/2013\/11\/25\/5426880\/polygon-feature-design-svg-animations-for-fun-and-profit\" target=\"_blank\"><img decoding=\"async\" class=\"alignnone size-full wp-image-919\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Polygon-feature-design-SVG-animations.gif\" alt=\"Web Design with SVG Animation\" width=\"650\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/jonibologna.com\/using-svg-stroke-attributes\/\" target=\"_blank\">Using SVG Stroke Attributes<\/a><\/p>\n<p><a href=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Using-SVG-stroke-Attributes-2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-927\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Using-SVG-stroke-Attributes-2.png\" alt=\"web design using SVG\" width=\"650\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Using-SVG-stroke-Attributes-2.png 710w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/Using-SVG-stroke-Attributes-2-300x174.png 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/sputnikcreative.com\/blog\/post\/animating-svg-with-svg-js\" target=\"_blank\">Animating SVG with SVG.JS<\/a><\/p>\n<p><a href=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/ANIMATING-SVG-WITH-SVG.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-926\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/ANIMATING-SVG-WITH-SVG.png\" alt=\"Web Design with SVG\" width=\"650\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/ANIMATING-SVG-WITH-SVG.png 747w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/ANIMATING-SVG-WITH-SVG-300x159.png 300w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG is Scaleable Vector Graphics offer the ability to have delicate line art due to its vector and path. SVG and Responsive Techniques are among the web design trends for 2014. There are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence. We have collected some tutorials that will help [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[139,140,109],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO\" \/>\n<meta property=\"og:description\" content=\"SVG is Scaleable Vector Graphics offer the ability to have delicate line art due to its vector and path. SVG and Responsive Techniques are among the web design trends for 2014. There are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence. We have collected some tutorials that will help [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Creative Blog - Web Design - Graphic - Technology - SEO\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-04T07:08:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-01-02T01:30:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Path-Animation-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"220\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Administrator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrator\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\"},\"author\":{\"name\":\"Administrator\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/5192429dd0d0ab69b8252963069a4760\"},\"headline\":\"Web Design Using SVG Animation\",\"datePublished\":\"2014-11-04T07:08:41+00:00\",\"dateModified\":\"2015-01-02T01:30:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\"},\"wordCount\":119,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\"},\"keywords\":[\"Animation\",\"SVG\",\"Web Design\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\",\"url\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\",\"name\":\"Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO\",\"isPartOf\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#website\"},\"datePublished\":\"2014-11-04T07:08:41+00:00\",\"dateModified\":\"2015-01-02T01:30:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kesato.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design Using SVG Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#website\",\"url\":\"https:\/\/www.kesato.com\/blog\/\",\"name\":\"Creative Blog - Web Design - Graphic - Technology - SEO\",\"description\":\"Creative articles for your inspiration in web, design, graphics, technology, photography, music, architecture, brand, culture, update and trends\",\"publisher\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kesato.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\",\"name\":\"Creative Blog - Web Design - Graphic - Technology - SEO\",\"url\":\"https:\/\/www.kesato.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png\",\"contentUrl\":\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png\",\"width\":155,\"height\":31,\"caption\":\"Creative Blog - Web Design - Graphic - Technology - SEO\"},\"image\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/5192429dd0d0ab69b8252963069a4760\",\"name\":\"Administrator\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/13b4fbde1a4d8382713c1d412dd0866d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/13b4fbde1a4d8382713c1d412dd0866d?s=96&d=mm&r=g\",\"caption\":\"Administrator\"},\"sameAs\":[\"https:\/\/twitter.com\/@adip23\"],\"url\":\"https:\/\/www.kesato.com\/blog\/author\/adi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/","og_locale":"en_US","og_type":"article","og_title":"Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO","og_description":"SVG is Scaleable Vector Graphics offer the ability to have delicate line art due to its vector and path. SVG and Responsive Techniques are among the web design trends for 2014. There are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence. We have collected some tutorials that will help [&hellip;]","og_url":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/","og_site_name":"Creative Blog - Web Design - Graphic - Technology - SEO","article_published_time":"2014-11-04T07:08:41+00:00","article_modified_time":"2015-01-02T01:30:34+00:00","og_image":[{"width":750,"height":220,"url":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2014\/11\/SVG-Path-Animation-cover.jpg","type":"image\/jpeg"}],"author":"Administrator","twitter_misc":{"Written by":"Administrator","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#article","isPartOf":{"@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/"},"author":{"name":"Administrator","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/5192429dd0d0ab69b8252963069a4760"},"headline":"Web Design Using SVG Animation","datePublished":"2014-11-04T07:08:41+00:00","dateModified":"2015-01-02T01:30:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/"},"wordCount":119,"commentCount":0,"publisher":{"@id":"https:\/\/www.kesato.com\/blog\/#organization"},"keywords":["Animation","SVG","Web Design"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/","url":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/","name":"Web Design Using SVG Animation - Creative Blog - Web Design - Graphic - Technology - SEO","isPartOf":{"@id":"https:\/\/www.kesato.com\/blog\/#website"},"datePublished":"2014-11-04T07:08:41+00:00","dateModified":"2015-01-02T01:30:34+00:00","breadcrumb":{"@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kesato.com\/blog\/web\/web-design-with-svg-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kesato.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design Using SVG Animation"}]},{"@type":"WebSite","@id":"https:\/\/www.kesato.com\/blog\/#website","url":"https:\/\/www.kesato.com\/blog\/","name":"Creative Blog - Web Design - Graphic - Technology - SEO","description":"Creative articles for your inspiration in web, design, graphics, technology, photography, music, architecture, brand, culture, update and trends","publisher":{"@id":"https:\/\/www.kesato.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kesato.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.kesato.com\/blog\/#organization","name":"Creative Blog - Web Design - Graphic - Technology - SEO","url":"https:\/\/www.kesato.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png","contentUrl":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png","width":155,"height":31,"caption":"Creative Blog - Web Design - Graphic - Technology - SEO"},"image":{"@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/5192429dd0d0ab69b8252963069a4760","name":"Administrator","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/13b4fbde1a4d8382713c1d412dd0866d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/13b4fbde1a4d8382713c1d412dd0866d?s=96&d=mm&r=g","caption":"Administrator"},"sameAs":["https:\/\/twitter.com\/@adip23"],"url":"https:\/\/www.kesato.com\/blog\/author\/adi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts\/914"}],"collection":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/comments?post=914"}],"version-history":[{"count":0,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts\/914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/media\/929"}],"wp:attachment":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/media?parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/categories?post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/tags?post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}