FreeSVG community discussion forum

Actually, I have some images that might need to be deleted or reworked. I have some that worked with the OpenClipArt API that no longer work. Also, some of my earlier animations no longer work due to browser updates that should be updated/deleted.

Thanks to freesvg.org for keeping embedded script. That is something freesvgclipart.com stripped rendering several of my clipart useless. For example, I set the current time on many clocks with script - adding script to remix the great work of others.
Compare:
https://freesvgclipart.com/download/55344/
versus
https://freesvg.org/storage/zip/blog/An … lClock.svg

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.