animated svg-s

Show off your finished Inkscape work.
Moini
Posts: 3020
Joined: Mon Oct 05, 2015 10:44 am

Re: animated svg-s

Postby Moini » Mon Feb 19, 2018 4:17 am

@Zech: use blender.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

Lazur
Posts: 4658
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Mon Feb 19, 2018 9:03 am

Synfig for bones?

The title of this topic was animated svg-s -nothing fancier than that, no >>animations<<. Browsers choke on rendering even such simple svg-s, we are not there yet to have *live* rendering of animated vectorgraphics of this kind.
Animations may be rendered to image sequences or to video files instead.

Zech
Posts: 43
Joined: Wed Jan 24, 2018 8:38 am

Re: animated svg-s

Postby Zech » Tue Feb 20, 2018 3:18 am

Okay

Lazur
Posts: 4658
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Mon Nov 19, 2018 10:31 am

More animatemotion fun.

SVG Image

Original image was traced from a work of Ansimuz.
Full vector svg.


Tried to animate the background as well but those pixels got flickering.

Lazur
Posts: 4658
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Sun Dec 30, 2018 1:27 am

Tinkering with keyfame animation.

First, tried out blender's rendering to animated svg.
Modelled a football, added a simple lockrot transformtaion keyframe at start-end, added linear interpolation and used the freestyle svg export.
All built in, nothing that fancy at this point.
It renders each frame into a raster image at a given resolution then centerline traces it and arranges the result to a layered svg file with some sort of animation trick.

Here is the result:

SVG Image

Takes time to load in every frame and there is some flickering. Additionally the paths aren't optimised as neat as they were drawn manually. On top of that, some contours were missing.

Therefore attempted another go with it and rendered each frame from blender to separate bmp-s and used potrace to trace them as described here. (Potrace cannot take png-s but bmp-s.)
So far so good.
The frames from blender were 1800 px /1800 px sized. The svg-s generated with the basic settings were all set up with 1800 / 1800 user units in pt, display unit in px thus having a viewbox scale factor of 0,75.
Wanted to have the output in a 600 px / 600 px svg, so ended up manually scaling each content on the layers.
Which eventually wasn't the finish because of the autotracing the overall shapes didn't have the same height and width -edited them manually as well...

So now, have two layered svg-s with images from a football on each layer. One which has an additional jessyink animationso it can be "played" with the arrow keys.

Not so sure how to move forward with it. Been searching around and synfig seemed to have the most potential with an svg export option.
Rather avoid any more manual steps repeated 250 times.

SVG Image

User avatar
brynn
Posts: 10149
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: animated svg-s

Postby brynn » Sun Dec 30, 2018 8:13 am

Apparently this kind of animation messes with scrolling the page in the browser. So far, I haven't been able to get the text of your message in the viewing area, so I can read it. Eventually I can scroll it into view, but then the browser keeps on scrolling, and it's gone. But I did see the ball move, at one point.

Lazur
Posts: 4658
Joined: Tue Jun 14, 2016 10:38 am

Re: animated svg-s

Postby Lazur » Sun Dec 30, 2018 12:19 pm

Hmm the line animation displays fine in chrome.
The latter with the jessyink displays as a still image due to the embedding.

They were both containing the link to the original source if you click them.

Posting the links here as well:
animated outlines
jessyink animation
-note that the sources display a still image -a 2400/2400 px png image- at openclipart as a thumbnail, so you need to click on those to see the real thing (unless you saw those already in the post above.


Couldn't find a way to animate a layered svg straight into a keyframe animation, gave synfig a go.
What a mess.
It cannot import the original layered svg out of its size.
Then, searched for a way to export the layered image to separate svg-s since they are resized and edited unlike the output from potrace...
Got a hint at the irc to use this extension. Got it working eventually.
Yet synfig freezes at any kind of svg importing -at least with any frames pre-drawn.
Thought it was about an issue with the smooth nodes so set every node to cusp before running the splitting svg extension.
Too bad it generated all those svg-s having smooth nodes even though the originals had cusp ones set.

Tried to draw some test animation straight with synfig. Not impressed yet.
The replay is extra laggy, not sure why the intermediate steps are not rendering smoothly.
The interfafe is ove my head. Could set up 250 frames but cannot zoom in to the timeline if I wanted to add in a keyframe at a specific time.
The implication is that it's not really suited for such a job to play one svg frame after another but to modify-morph one path to another shape.

Well, fine. At least that'd also mean the possibility to render intermediate steps right? Hope so. If ever...
Then looking at the rendering options, rendering the animation to an animated svg is not built in.
There was a way to convert a synfig file to an svg, sort of. But currently that project is abandoned since 2016 and the link to the sif2svg.xsl file was removed.

Could render the animation from blender straight to raster images and convert that to a gif but I'm after animating svg-s.
Rendering to svg from blender wasn't satisfactory out of the blinking and missing parts, no fills and horrible structure.
So then rendered to png, traced each separately to svg-s, tweaked them one by one and then there is still no way to have it?
Guess synfig is not up for animating svg-s then.

Moini
Posts: 3020
Joined: Mon Oct 05, 2015 10:44 am

Re: animated svg-s

Postby Moini » Wed Jan 02, 2019 2:30 am

Lazur, this one works, too:
https://gitlab.com/su-v/inx-exportobjects

Additionally: To get rid of the flickering, I believe you would have to make sure the objects all have the same id (possible) and path structure (impossible to do perfectly). That way, the browser can interpolate the intermediate frames better.

(btw. had to block the animated football, so typing here would work properly) - maybe it would be nicer if you linked to the images only? Then people with low-end hardware can at least read the posts.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)


Return to “Finished Inkscape Work”

Who is online

Users browsing this forum: No registered users and 4 guests