FreeSVG community discussion forum

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.

Jaynick, just a thought, not sure if this is of interest to you but would you be interested in putting together a guide for demonstrating how people would go about creating SVG animations and what tools are needed, I mention this was possible using synfig in a brief post but it could really do with being extended upon by somebody that knows what they are talking about, such as yourself, no pressure entirely up to you, and would completely understand if you can't as I am sure it would take some time to put together. But I think people would find it more useful than my post which lacks instructions https://forum.freesvg.org/viewtopic.php?id=13 you take full credit and guide remains CC0 belonging to no one.

I think the download button is great for 99% of people, as it's convenient, me personally I hated having to right click and save as to download in openclipart, but that is just my preference. As a future feature request purhaps the Webdevs could put in one of those copy boxes"the kind you see on script snippet sharing sites", where you can copy the direct link to the content by clicking a button, or purhaps just a copy link to clipboard button.

https://undraw.co/license

https://www.kisscc0.com/

https://svgsilh.com/tag/banner-1.html

My two cents: then purhaps someplace else on a private server devoted to opensource resources which an individual may already have, or split between 2 githubs/gitlabs. Or maybe freesvg could set aside some server space to hold publically accessable zipbackup

As stated by the webdevelopers, further suggestions are welcome and may be discussed.

Looks like a new opensource site is in the works by coderspress, link to the github archive is here, you might want to consider checking the contents of their archive to see if there are any images that can be added to your collection:

https://github.com/CodersPress/freesvgc … master/svg
freesvgclipart.com

Superb Vedran, you guys are class.

Not free but low cost, currently: 2.98gbp plus shipping to US I think, free to UK.

https://www.ebay.co.uk/itm/Brothers-Sca … 0677.m4598

I am astonished people are actually paying for these considering they are CC0 apparently.

I've cross references a couple of the images in the screen shot and can't see any of these images in your archive. Pay close attn to item description, seller appears to have included their own images which may be copywrited, to prevent reselling, so these probably need to be removed. Would also suggest getting written declaration that images on the the disk are CC0 prior to publishing.

For the price, it's a quick boost of images to your collection.

no response needed.

Sorry Vedran unrelated to the Image recognition, I ment you're probably going to need to drop in a blocklist to prevent swear words at some stage, for any comments or tags written by contributors. I think it's already on your to do list.

Hi Vedran / Boris, tested and now OK in latest edge, chrome & firefox. ta

https://www.svgrepo.com/info/licensing