Playing .SVG animation smoothly...

1,520 views
Skip to first unread message

Carlos Eduardo

unread,
Mar 13, 2012, 10:30:28 AM3/13/12
to sozi-...@googlegroups.com
Hi,

I am begging on animating with Inkscape and Sozi.

I watched this interesting animation:
http://sozi.baierouge.fr/wiki/_media/layers-demo.svg#1

The problem with .SVG animation I have observed is that the browser
(Firefox, IE) don't play the animation as a "smooth" video. Always I realize
some "frames".

a) Does anyone know if it is possible to play a .SVG animation in another
mean / player besides the browser?

b) On the other hand, is it possible to save a Inkscape animation in other
format besides .SVG (maybe .SWF could achieve smooth video quality)?

Ps1.: My intent is to add an Inkscape animation in a video-editing workflow
(using Sony Vegas, Adobe Premier for instance). So, this video tools can't
read .SVG file. I am looking for a way to catch Inkscape animation and make
it compatible with any format like these: SWF / ASF / WMV / MOV / MP4 / AVI.

Ps2.: I tried to capture video screen when .SVG was playing in browser. The
problem is that the output will reflect the mentioned above about the
browser doesn't play animation smoothly and the frames are seen as well.

Any tip will be appreciated.

Best,
Cadu

Guillaume Savaton

unread,
Mar 13, 2012, 12:28:36 PM3/13/12
to sozi-...@googlegroups.com
Hi Carlos

2012/3/13 Carlos Eduardo <carl...@ymail.com>:


> I watched this interesting animation:
> http://sozi.baierouge.fr/wiki/_media/layers-demo.svg#1
>
> The problem with .SVG animation I have observed is that the browser
> (Firefox, IE) don't play the animation as a "smooth" video. Always I realize
> some "frames".

This demo is known to be smoother in Webkit-based browsers such as
Google Chrome.
The animation is supposed to play at 50 fps, but it seems that the SVG
rendering engine of Firefox is too slow.

> a) Does anyone know if it is possible to play a .SVG animation in another
> mean / player besides the browser?

Animations in Sozi are written in Javascript.
Currently, AFAIK, the "players" that have the best support for SVG and
Javascript are web browsers.

> b) On the other hand, is it possible to save a Inkscape animation in other
> format besides .SVG (maybe .SWF could achieve smooth video quality)?

There is a feature request for this and some ideas have been proposed.
There is currently a solution that generates a sequence of still image
files while the animation is played in the browser.
https://github.com/senshu/Sozi/issues/15

However, I guess it will not be better than your attempt to capture
the screen as a video.

To capture a smooth video even with complex documents, we must let the
web browser render each animation step completely and save the
corresponding image. I'm sure this is feasible, but it requires to
modify the Sozi animation script.
Now this is not the feature with the highest priority, and I don't
know if anyone will want to implement it soon.

Guillaume

Carlos Eduardo

unread,
Mar 13, 2012, 5:51:45 PM3/13/12
to sozi-...@googlegroups.com
Hi Guillaume,

Thanks for answering!

Through chrome I could realize little improvement.

I had hope that there was any mechanism to bring .SVG to video workflow
directly (as I mentioned, through SWF format).

Therefore, it seems only way is recording browser screen.

I made a trial using XVid codec in MP4 format. It is available at:
http://www.youtube.com/watch?v=Ogujo6YegaY&feature=youtu.be

You will see the "frames" that are making impossible to obtain a smooth
video. This is exactly what I have seen in my screen. I.e. even using chrome
the "frames" still appearing.

Does anyone know if it is possible to change chrome configuration to achieve
better animation performance. Once I could get it in the browser, the screen
capture would be improved as well...

Best,
Cadu

Craig Barnes

unread,
Apr 17, 2012, 4:40:48 PM4/17/12
to sozi-...@googlegroups.com
Any tip will be appreciated.
 
Hi Cadu,

I have used Firefox in a live presentation with smooth rendering on a low power device (EeePC).

Here's what generally works for me.

1. Convert all text to objects. I usually keep the original text in a separate hidden layer.
2. Convert any complex graphics to bitmaps.
3. Reduce the window size of your browser (this makes the most difference).  For presentation this means reducing the screen resolution.  You can discover your optimum size by resizing the browser window.

HTH.

Craig

Carlos Eduardo

unread,
Apr 17, 2012, 5:04:31 PM4/17/12
to sozi-...@googlegroups.com

Thanks Craig. I will follow your tips!

 

From: sozi-...@googlegroups.com [mailto:sozi-...@googlegroups.com] On Behalf Of Craig Barnes
Sent: 17 April 2012 17:41
To: sozi-...@googlegroups.com
Subject: Re: Playing .SVG animation smoothly...

 

Any tip will be appreciated.

Reply all
Reply to author
Forward
0 new messages