Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. <\/p>\n
<\/p>\n
SVG elements can be targeted and styled with CSS. Meaning, you can apply animation through @keyframes. Like this:<\/p>\n
<svg viewBox=\"0 0 127.9 178.4\">\r\n <path id=\"left-leg\" d=\"M37.6,138.8c0 ... \" \/>\r\n<\/svg><\/code><\/pre>\n.left-leg {\r\n fill: orange;\r\n animation: dance 2s infinite alternate;\r\n}\r\n@keyframes dance {\r\n 100% {\r\n transform: rotate(3deg);\r\n }\r\n}<\/code><\/pre>\nYou might choose animating this way if…<\/h4>\n\n- The animation is fairly simple.<\/li>\n
- You only need to animate properties that CSS can animate.<\/li>\n
- You already know and are comfortable with CSS animations.<\/li>\n<\/ul>\n
2. Animating with SMIL <\/h3>\n
There is a syntax for animations built right into SVG. Here’s a very simple example:<\/p>\n
<svg viewBox=\"0 0 127.9 178.4\">\r\n <path d=\"M37.6,138.8c0 ... \">\r\n <animate attributeName=\"fill\" dur=\"5000ms\" to=\"#f06d06\" fill=\"freeze\" \/> \r\n <\/path>\r\n<\/svg><\/code><\/pre>\nHere’s a big tutorial<\/a> on all that is SMIL.<\/p>\nYou might choose animating this way if…<\/h4>\n\n- You need to animate properties that CSS can’t, like the shape itself<\/a>.<\/li>\n
- You need other SMIL specific features, like beginning an animation when another ends without manually syncing durations\/delays. Or interaction stuff, like beginning an animation on a click.<\/li>\n<\/ul>\n
3. Animating with JavaScript<\/h3>\n
With JavaScript, you have access to things like requestAnimationFrame (or other loops), so you can animate just by way of rapidly changing property values. There are also frameworks out there for working with SVG that typically have animation stuff built in. Or animation frameworks that work with SVG. Like SnapSVG<\/a>, GreenSock<\/a>, SVG.js<\/a>, or Velocity.js<\/a>. <\/p>\nHere’s an example with SnapSVG:<\/p>\n
<svg id=\"robot\" viewBox=\"0 0 127.9 178.4\">\r\n <circle id=\"left-pupil\" cx=\"34.4\" cy=\"15.4\" r=\"4.8\" \/>\r\n<\/svg><\/code><\/pre>\nvar s = Snap(\"#robot\");\r\nvar leftPupil = s.select(\"#left-pupil\");\r\n\r\nleftPupil.animate({\r\n r: 50,\r\n fill: \"lightgreen\"\r\n}, 1000);<\/code><\/pre>\nYou might choose animating this way if…<\/h4>\n\n- You’re working in JavaScript anyway, perhaps your animation has to do with data you receive with JSON or the like.<\/li>\n
- You need JavaScript anyway, because you need the logic or math or something else really only possible there.<\/li>\n
- You’re interested in the JavaScript solving some bugs for you<\/a>.<\/li>\n
- The scope of your animation is rather large\/complicated and you need the abstraction and organization JavaScript can provide.<\/li>\n<\/ul>\n
Demo<\/h3>\n
See the Pen Three Ways to Animate SVG<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\nDoesn’t how you ultimately use the SVG affect your options?<\/h3>\n
It does. If you’re using SVG-as-<img>, you won’t be able to use use CSS animations from another stylesheet. But, you’re SMIL animations will work, in some browsers (at the time of this writing, Chrome yes, Firefox no). I wouldn’t be surprised if embedded CSS in SVG files work or will work one day. JavaScript, probably not. <\/p>\n
If you’re using SVG in a CSS background-image, I imagine it’s a similar story as above.<\/p>\n
If you use inline <svg><\/code>, all the possibilities are open to you. <\/p>\nIf you’re using SVG through an object<\/code> or iframe<\/code>, you would need to embed the scripts\/styles right in the SVG for it to work.<\/p>\n","protected":false},"excerpt":{"rendered":"Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[612,469],"acf":[],"jetpack-related-posts":[{"id":187264,"url":"https:\/\/css-tricks.com\/lodge\/svg\/27-animating-svg-javascript\/","url_meta":{"origin":190764,"position":0},"title":"27: Animating SVG with JavaScript","date":"November 1, 2014","format":false,"excerpt":"JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":186540,"url":"https:\/\/css-tricks.com\/lodge\/svg\/23-animating-svg-smil\/","url_meta":{"origin":190764,"position":1},"title":"23: Animating SVG with SMIL","date":"October 18, 2014","format":false,"excerpt":"Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but if you want a complete reference guide definitely check out\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":186539,"url":"https:\/\/css-tricks.com\/lodge\/svg\/22-animating-svg-css\/","url_meta":{"origin":190764,"position":2},"title":"22: Animating SVG with CSS","date":"October 18, 2014","format":false,"excerpt":"When you use inline SVG, all that SVG code is right in the HTML, and thus in the DOM. You can style them just like you would a , , or any other HTML element. CSS styling brings the possibility of animations and transitions. A simple example: See the Pen\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243521,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-path\/","url_meta":{"origin":190764,"position":3},"title":"offset-path","date":"July 19, 2016","format":false,"excerpt":"This property began life as motion-path. This, and all other related motion-* properties, are being renamed offset-* in the spec. We're changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. The offset-path property in CSS defines a movement\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":150309,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/11-animating-jquery\/","url_meta":{"origin":190764,"position":4},"title":"#11: Animating with jQuery","date":"September 17, 2013","format":false,"excerpt":"If you first dabbled with jQuery many years ago, it might have been it's ability to do animation. That was perhaps one of jQuery's first big draws. These days, CSS can do animation as well with fairly decent browser support and it tends to be more performant, so it's less\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13714,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/","url_meta":{"origin":190764,"position":5},"title":"animation","date":"August 20, 2011","format":false,"excerpt":"The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: .element { animation: pulse 5s infinite; } @keyframes pulse\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/190764"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=190764"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/190764\/revisions"}],"predecessor-version":[{"id":249816,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/190764\/revisions\/249816"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=190764"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=190764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}