SVG animations for FREE!!!

rob_s · 2019-10-07 15:00:45

Today I learned SVG files can be animated in a FREE open source program called Synfig, it would be great to see some of the SVG's found on freesvg.org brought to life, and posted to youtube for the whole world to see.

Maybe the developers would be kind enough to share links to the contributed video's to help inspire future animators, or just a place to exchange idea's and techniques.

rob_s · 2019-10-25 18:38:12

The following guide was put together by user Jaynick, so all credit goes to him. posted on th 25/10/19 @ 17:15

Anyone interested in the animating SVG's using CSS / Javascript / SMIL should give it a read, as it's very informative, further material is available from his website:https://steamcoded.org

____________________Animating SVG Images

I have created animated SVG images, but am far from an expert. There are 3 ways to animate an SVG image that I am aware of: Javascript, SMIL, and CSS. Javascript animation might be best used with the <canvas> element. A combination that works well for gaming. Javascript, however, is disabled when using an HTML <img> or SVG <image> reference. Here are a couple of animation sequences demonstrating how to code a Bezier curve using javascript for animation: https://steamcoded.org/images/curve1.svg and https://steamcoded.org/images/curve2.svg These images will animate when used in an <iframe> as shown on this page: https://steamcoded.org/engr.html

Aside from animation, many SVG images I created linked dynamic data into the image and updated the image as the data changed. To do that, I found it easier to hand code the SVG images. Drawing programs provide quite a bit of bloat making it more difficult to find a specific object. To get a good understanding of animation, I recommend hand coding a simple SVG image and reading the W3C specifications. No clue how to hand code an SVG image? Try my SVG lessons page, which I created to show students (grades 4-12) how to hand code SVG images: https://steamcoded.org/lessons/index.html

Parts of the SMIL specification were incorporated into the SVG specification as seen in the SVG1.1 specification - animation section https://www.w3.org/TR/SVG11/animate.html There are examples in the specification. In addition there are SMIL animation examples on the online tutorial site w3schools - look under the SVG Misc heading: https://www.w3schools.com/graphics/svg_examples.asp

When Microsoft finally added SVG support in IE9, they stated they would not add support for SMIL and recommended CSS animation instead. Soon after, Google announced with would be removing SMIL support in Chrome, but relented at the community outrage and kept it in. There are some things that SMIL can do that CSS can not.

The CSS animation specification https://www.w3.org/TR/css-animations-1 provides a definition and w3schools has examples https://www.w3schools.com/css/css3_animations.asp In addition there are examples on all the animatable properties https://www.w3schools.com/cssref/css_animatable.asp

While I have been able to duplicate many SMIL animated SVG images with CSS, I have searched for a solution to restart a CSS animation sequence without finding a way other than using javascript. I have found, however, that by using SMIL, I can restart a CSS animation sequence. I use the technique in these images https://steamcoded.org/images/MazeAnimation.svg and https://steamcoded.org/images/AnimatedTriangles.svg The advantage of restarting the sequence with SMIL versus javascript is that it works with an <img> tag which blocks javascript.

Since my images are mostly hand coded, the source code is fairly easy to understand. I recommend viewing the source code to see how I coded it.

Not much of a guide. I welcome additional guidance.

rob_s · 2019-12-12 00:30:35

FreeSVG community discussion forum

#1 2019-10-07 15:00:45

SVG animations for FREE!!!

#2 2019-10-25 18:38:12

Re: SVG animations for FREE!!!

#3 2019-12-12 00:30:35

Re: SVG animations for FREE!!!

Board footer