Animating SVG

[Acorn]

Until a few weeks ago, I was relying on anime.js to animate content including SVG.
The biggest downside to this approach as @Egg and @handrawn was the lack of a Timeline Panel.

My go-to application for SVG production for as few years has been Boxy SVG and a few weeks pack launched v4, which handles SVG animation with timelining.
There is no current tutorial or documentation, just a commitment to fully develop the animation aspects:

animate over 50 different properties such as fill color, stroke width, font size, view box and path data. Motion paths and transform animations are also supported in this release

In other words, you can currently achieve a hell of a lot.

I produced this, while learning my way: SVG - Animated.xar

If you open into https://boxy-svg.com/app, you can roll your own.
If you want to see what I worked on, drag this into Boxy: TG.svg.

The mechanics of adding the animation into a Xara design are a bit crude presently but essentially create a Box 500px square.
Open the exported SVG file, saved from Boxy, in a text editor and copy the contents into the Box's Placeholder Body.

It even works as far back as Xara WDPv11.
Do note, you see nothing in Preview, you have to open into a more modern browser.

Acorn

[Egg Bramhill]

Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.

https://parkeston.com/!!!!!!test/boxy-ani.svg

[Acorn]

Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.
https://parkeston.com/!!!!!!test/boxy-ani.svg

Egg, thanks for having a go. Sometimes the silence is deafening.

If you start with a clutch of SVG Shapes then select them all before switching to the Animation pane.
You can then apply any transformation to each individually.
Paths are Bezier and can have nodes added.
All effects can be set to Infinity, loops for a set period and/or ended.
Freeze set keeps the shape in place at its reached end point.
You can drag the timeline back and forth.
You set up values when you have selected the Start or End nodes or any added node in-between.
You can also apply an overall effect to the SVG as a whole.
The one thing I have yet to find is to be able to reverse the motion or effect.

I did mention there was no help as yet. The best read of the possible is https://css-tricks.com/guide-svg-animations-smil/. Not all aspects are implemented currently.

Acorn

[Egg Bramhill]

Understand most of that but a looping timeline would be a huge benifit. Also a way to change a shapes origin would be good.

Here's an animation I created in Boxy that does loop but the workaround is very limiting.

I attach a xar with one embedded copy and one svg text pasted into a placeholder but Xara Designer Pro X 17 truncates the text. I can't test wether Xara Designer Pro+ is better.

[Acorn]

Egg, perhaps it's how we approach the animations.
When you click the Bar and pick infinity, it greys out for the rest of time.

I use Web properties > Placeholder > Replace with graphic file for local files.. I use your for already uploaded SVGs.
When the Placeholder code is too big, try SVG-OMG; you can compact a fair amount.
Placeholdering is good if you intent to manipulate the SVG with JS or CSS after rendering.

If the design is complex then save out the static SVG parts as a separate file.
Your original file seemed to have a few invisible part that make the size on the page wider then the visible design.

Your animation reworked: Copper.svg.
Still too big for Placeholder but works well embedded.

Acorn

[handrawn]

I don't have pro+ so I can't use this in xda ?

I'll look at the online app, but it does not appear to be supported in firefox so it will have to wait for now...

[Acorn]

I don't have pro+ so I can't use this in xda ?
I'll look at the online app, but it does not appear to be supported in firefox so it will have to wait for now...

handrawn

You can use it in any version of XDa if you either, copy and paste the SVG source into a Placeholder, or, link to Line through a Placeholder.
I said all this and that old XDA Preview will not work (as it is IE).

Boxy SVG relies on a large number of libraries that all work fine in Chrome, Chromium, Edge, Vivaldi & Opera.
It seems to also work in Norton Secure Browser. I would expect it to not run in FF or ToR.


Acorn

[gwpriester]

Might be something for Xara to consider adding since the Flash animation is basically useless. I had to look just now to see if it was still there. It is.

[handrawn]

@ acorn

ok thanks for that clarification; of course, not being a webbie, I have zero experience in using placeholders but I can look into it

re libraries: fair enough; firefox is my default browser, I can use edge idc...

[Egg Bramhill]

Bit late on posting, I forgot to hit the Reply button.

Acorn that's great! You're nicked!

Your original file seemed to have a few invisible part that make the size on the page wider then the visible design.

Indeed it does. This was my point re no appearing to set the origin. I wanted the hand to enlage/shrink from the wrist, not the centre of the hand (as you've got it now) So to do this I created a circle centred on the wrist and set it to no fill / no stroke. Same-same for the the foot tapping which I wanted to tap from the heel not the bots centre.

@ HD Yes you can use it in xda, I used 17 to create the one in the earlier post. True the app can't be used to create in FF but it will render in FF once created. You can also d/l the app to run on your PC not just a browser.