Export to video #15

senshu opened this Issue Oct 27, 2010 · 15 comments


None yet

5 participants

senshu commented Oct 27, 2010

Export a Sozi presentation to a video. All frames should have a timeout specified.


I have been lately thinking about how to use gstreamer to do such an export. Several points:

Even if svg is supported, javascript animation is not, nor smil. One way to control the behaviour of the presentation would be to use gstreamer Controller that can modify properties during playing.

The properties controlled would be the ones of a zoom effect, i.e. the geometrical parameters of the area to focus. With use of the controller, a fine-grained animation is possible.

Such Zoom effect does not exist by now. I have been talking on #gstreamer, some elements (videoscale) can be reused, but it is not straightforward...

helgam commented Oct 19, 2011

I've looked around -unsuccessfully- for something that can export animated svg to video. svg2png http://www.treebuilder.de/default.asp?file=660000.xml apparently did so. It's a firefox extension, but when I try to install it on firefox 7 it says "not compatible".

Maybe it's possible to use Inkscape's rendering engine to export numbered png frames of a given resolution. Then, turning these into video should be quite straightforward (I'm thinking of videoporama). I could manually set the timeout for each main view. It's the transitions that seem tricky to me.

chaosct commented Oct 19, 2011

I've stepped into the same problem, and I think a workaround could be write a script (for instance in python) that:

  • Loads the svg file
  • takes all Sozy information (frames, animations etc)
  • takes all drawable items on the root of the svg and takes them inside a group () and adds a transformation to this group (http://apike.ca/prog_svg_transform.html)
  • now for each video frame:
    • it adjusts the values of that transformation interpolating between the positions of the frames
    • it writes the file
    • it uses inkscape to render the image
      Finally we can use ffmpeg to join all frames into a video file

I'm pretty new at programming xml-related things but if I have time I may start trying to code this.

senshu commented Oct 22, 2011

The basic idea would be to replicate what Sozi already does, but saving each animation step into an image or a video frame.
Doing it outside of the browser can require translating a significant part of Sozi in another language.
It also means that many features provided by the DOM will have to be reimplemented, e.g for dealing with geometric transformations. Even in Inkscape extensions there is no straightforward technique for retrieving the actual location, angle and scale of an SVG element.

My preferred solution would be in the form of a Firefox extension. Maybe svg2png can be a good starting point.

chaosct commented Feb 21, 2012

I just found PhantomJS (http://www.phantomjs.org/) and they have examples rendering svg+js into png. May be this is a sensible way to implement it.

chaosct commented Feb 22, 2012

I hacked something that does exactly that. It loads a SVG sozi animation and generate png frames for the animation using PhantomJS.


senshu commented Feb 25, 2012

Hi @chaosct
I will give it a try. It looks promising.


hello @senshu and @chaosct,

have you had success in this? i got hold of @chaosct's gist (soziframes). i created a three "frame" sozi presentation with the timeout of the first two frames set to 2sec, and disabled the timeout for the last frame. when i use soziframes (set at 4000ms), however, the script seems to render only the first frame of the sozi presentation/animation. it seems, phantomjs is not advancing to the next "page" or url anchors, i.e. #2, #3, and so on.

what do you think?

chaosct commented Jan 22, 2013

Hey @francogonzaga,

The script on the gist is working, but only with older versions of sozi. What I do is to copy the whole script xml node from a former svg to the new animations before using the script.

I'm using the version of this file:

I hope it helps!


hello @chaosct,

I confirm that by embedding the script node from an older version of sozi to a newer sozi animation, soziframes succeeds in rendering the animation. From the rendered png files, I am able to produce a video file using ffmpeg.

Have you taken a look at the difference between the scripts? And what is it that makes soziframes (and perhaps phantomjs) work in the older version, and fail in the newer version?

chaosct commented Jan 23, 2013

That is great @francogonzaga,

For the old sozi I had to override Date.now and window.setTimeout functions. I guess that new versions use other functions to calculate the framerate and transformations. But since it was quite difficult for me just to make the old version to work and understand the code, I just assumed that would be simpler replacing the script xml node.

Another factor was that the new sozi seemed to have an slide indicator and a menu visible by default, while the old didn't, and was better for my purpose of using it for animation.


I agree @chaosct, with the choice of just replacing the new script xml node with the older version. And yes, the menu and slide of the new sozi script will not look nice for a generated video.

Thanks again!

senshu commented Jan 23, 2013

@chaosct In recent versions of Sozi, "animation frames" are used when supported by the web browser.
It may be the reason why your script does not work anymore.

the new sozi seemed to have an slide indicator and a menu visible by default

The "menu" is not supposed to be visible by default.
Until I provide a better solution, the frame number can be hidden using CSS: https://gist.github.com/2431268

chaosct commented Jan 23, 2013

@chaosct In recent versions of Sozi, "animation frames" are used when supported by the web browser.

If somkeone knows how to replace "animation frames" to be controlled by the script feel free to fork and pull request :)

@senshu sorry I was just talking by heart for the menu. And nice trick with the CSS solution.

senshu commented Jan 4, 2016

The export to video for Sozi 15 is available in a separate project

@senshu senshu closed this Jan 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment