{"id":23268,"date":"2020-10-05T21:19:53","date_gmt":"2020-10-05T13:19:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23268"},"modified":"2022-10-14T18:21:46","modified_gmt":"2022-10-14T10:21:46","slug":"javascript-libraries-animate-svg","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/","title":{"rendered":"8 JavaScript Libraries to Animate SVG"},"content":{"rendered":"<p>SVG is a resolution-independent graphic. That means it will <strong>look good on any type of screen without suffering any loss of quality<\/strong>. Beyond that, you can also make SVG come alive with some animation effects.<\/p>\n<p>In one of the post of our SVG series previously, we have shown you how <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphics-animation\/\" rel=\"nofollow\">SVG animation works<\/a> with the &lt;animate&gt; element albeit at a low level. This time, we will share a couple of JavaScript libraries that help extends SVG animation to the next level.<\/p>\n<h3>More related:<\/h3>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\" rel=\"noopener noreferrer\">Animate.css \u2013 CSS3 Library to create animation easily<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/animate-text-textillatejs\/\" rel=\"noopener noreferrer\">Easily animate text with Textillate.js<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/psd-text-svg\/\" rel=\"noopener noreferrer\">How to convert Photoshop text into SVG<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/\" rel=\"noopener noreferrer\">Animate to hide and slide content with jQuery<\/a><\/li>\n<\/ul>\n<h2>1. Vivus<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/maxwellito.github.io\/vivus\/\" rel=\"noopener noreferrer\">Vivus<\/a> is a JavaScript library that <strong>gives your SVG the appearance of being drawn<\/strong>. Vivus works out of the box without a need for any dependencies (e.g. jQuery). Simply include the <code>.js<\/code> file in your HTML, and designate the SVG element you want to animate, along with some preset options to start the animation right away.<\/p>\n<p>For example:<\/p>\n<pre>\r\nnew Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });\r\n<\/pre>\n<p>The above will animate my SVG element that has the <code>svg-element<\/code> ID in 200 millisecond. Each element of this SVG will be drawn one after the other within that time frame.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg\" alt=\"svg vivus\" width=\"700\" height=\"380\"><\/figure>\n<h2>2. BonsaiJS<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/bonsaijs.org\/\" rel=\"noopener noreferrer nofollow\">Bonsai<\/a> is a powerful JavaScript library that allows you to draw, morph as well as animate graphical elements on web pages.<\/p>\n<p>It supports both HTML5 graphic type <a target=\"_blank\" href=\"http:\/\/diveintohtml5.info\/canvas.html\" rel=\"noopener noreferrer nofollow\">Canvas<\/a> and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic\/\" rel=\"noopener noreferrer\">SVG<\/a>. With Bonsai, you can build a simple rectangle or a circle or if you like, a <strong>full-fledged multiplayer<\/strong> animated game <a target=\"_blank\" href=\"https:\/\/vimeo.com\/53452607\" rel=\"noopener noreferrer\">like this one<\/a>.<\/p>\n<p>You can use Orbit to feel how Bonsai works in live action or check out a couple of these impressive examples to draw inspiration from.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-bonsai.jpg\" alt=\"svg bonsai\" width=\"700\" height=\"380\"><\/figure>\n<h2>3. Velocity<\/h2>\n<p><a target=\"_blank\" href=\"http:\/\/velocityjs.org\/\" rel=\"noopener noreferrer\">Velocity<\/a> is a JavaScript library built for fast animations. Velocity\u2019s speed when rendering animation is incredibly fast. It outperforms jQuery, and even CSS, in comparison.<\/p>\n<p>Velocity\u2019s API works similarly to the animation in jQuery, except it uses the keyword alias <code>$.velocity()<\/code> instead of <code>$.animate()<\/code>. That aside, you can use the exact same animation keywords such as <code>fadeIn<\/code> and <code>fadeOut<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-velocity.jpg\" alt=\"svg velocity\" width=\"700\" height=\"380\"><\/figure>\n<h2>4. Raphael<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/dmitrybaranovskiy.github.io\/raphael\/\" rel=\"noopener noreferrer\">RaphaelJS<\/a> is a library that allows you to draw as well as animate vector graphic SVG on web pages. It supports a wide range of browsers, which pretty much makes Raphael the most dependable JavaScript library in the niche.<\/p>\n<p>With RaphaelJS, you can build  interactive analytic charts, world maps, and game interactions akin to that of Counter-Strike.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-raphael.jpg\" alt=\"svg raphael\" width=\"700\" height=\"380\"><\/figure>\n<h2>5. Snap<\/h2>\n<p><a target=\"_blank\" href=\"http:\/\/snapsvg.io\/\" rel=\"noopener noreferrer\">SnapSVG<\/a> is another popular JavaScript library for SVG animation developed by Raphael developer, Dmitry Baranovskiy, along with the Adobe Web Platform Team from the ground up.<\/p>\n<p>Unlike Raphael though, SnapSVG is meant for only the latest browsers. That allows the library to be significantly smaller than Raphael and to support SVG features like clipping and masking.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-snapjs.jpg\" alt=\"svg snapjs\" width=\"700\" height=\"380\"><\/figure>\n<h2>6. Lazy Line Painter<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/plugins.jquery.com\/lazylinepainter\/\" rel=\"noopener noreferrer\">Lazy Line Painter<\/a> is a jQuery plugin for animating SVG paths to animate the drawing sequence, similar to Vivus.<\/p>\n<p>The bad news is this plugin only does this very specific thing. Hence, when you import SVG from apps like Illustrator or Inkscape, ensure that there is no Fill color left on your SVG, just the paths.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-lazyline.jpg\" alt=\"svg lazyline\" width=\"700\" height=\"380\"><\/figure>\n<h2>7. SVG.js<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/svgjs.com\/docs\/3.0\/\" rel=\"noopener noreferrer nofollow\">SVG.js<\/a> is a lightweight library for manipulating and animating SVG. With this library, you\u2019ll be able to animate the size, position or color within your SVG element.<\/p>\n<p>It not only animates though; you can also <a target=\"_blank\" href=\"https:\/\/github.com\/svgdotjs\/svg.js\" rel=\"noopener noreferrer\">apply additional plugins<\/a> to add extra functionalities. This <a target=\"_blank\" href=\"https:\/\/svgjs.com\/docs\/2.7\/tutorials\/\" rel=\"noopener noreferrer nofollow\">example<\/a> uses the svg.filter.js <a target=\"_blank\" href=\"https:\/\/github.com\/svgdotjs\/svg.filter.js\" rel=\"noopener noreferrer\">plugin<\/a> to apply filters like gaussian blur, desaturate, contrast, sepia etc. to the image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-svgjs.jpg\" alt=\"svg svgjs\" width=\"700\" height=\"380\"><\/figure>\n<h2>8. Walkway<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/github.com\/ConnorAtherton\/walkway\" rel=\"noopener noreferrer\">Walkway<\/a> supports three type of elements, <code>path<\/code>, <code>line<\/code>, and <code>polyline<\/code> used to draw SVG lines. <a target=\"_blank\" href=\"https:\/\/www.polygon.com\/a\/ps4-review\" rel=\"noopener noreferrer\">Here is an example<\/a> from Polygon that shows the PlayStation 4 console line animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-walkway.jpg\" alt=\"svg walkway\" width=\"700\" height=\"380\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can also make SVG come alive with some animation effects. In one of the post of our SVG series previously, we have shown you how SVG animation works with the&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497,4117,2175],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>8 JavaScript Libraries to Animate SVG - Hongkiat<\/title>\n<meta name=\"description\" content=\"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can\" \/>\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.hongkiat.com\/blog\/javascript-libraries-animate-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 JavaScript Libraries to Animate SVG\" \/>\n<meta property=\"og:description\" content=\"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-05T13:19:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-14T10:21:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"8 JavaScript Libraries to Animate SVG\",\"datePublished\":\"2020-10-05T13:19:53+00:00\",\"dateModified\":\"2022-10-14T10:21:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/\"},\"wordCount\":609,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-animate-svg\\\/svg-vivus.jpg\",\"keywords\":[\"Javascript Library\",\"Javascripts\",\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/\",\"name\":\"8 JavaScript Libraries to Animate SVG - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-animate-svg\\\/svg-vivus.jpg\",\"datePublished\":\"2020-10-05T13:19:53+00:00\",\"dateModified\":\"2022-10-14T10:21:46+00:00\",\"description\":\"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-animate-svg\\\/svg-vivus.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-animate-svg\\\/svg-vivus.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-animate-svg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"8 JavaScript Libraries to Animate SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"8 JavaScript Libraries to Animate SVG - Hongkiat","description":"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can","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.hongkiat.com\/blog\/javascript-libraries-animate-svg\/","og_locale":"en_US","og_type":"article","og_title":"8 JavaScript Libraries to Animate SVG","og_description":"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can","og_url":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-10-05T13:19:53+00:00","article_modified_time":"2022-10-14T10:21:46+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"8 JavaScript Libraries to Animate SVG","datePublished":"2020-10-05T13:19:53+00:00","dateModified":"2022-10-14T10:21:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/"},"wordCount":609,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg","keywords":["Javascript Library","Javascripts","Scalable Vector Graphics (SVG)"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/","url":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/","name":"8 JavaScript Libraries to Animate SVG - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg","datePublished":"2020-10-05T13:19:53+00:00","dateModified":"2022-10-14T10:21:46+00:00","description":"SVG is a resolution-independent graphic. That means it will look good on any type of screen without suffering any loss of quality. Beyond that, you can","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-animate-svg\/svg-vivus.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-animate-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"8 JavaScript Libraries to Animate SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-63i","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23268"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23268\/revisions"}],"predecessor-version":[{"id":62801,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23268\/revisions\/62801"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23268"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}