It looks like you're using an ad blocker! I really need the income to keep this site running.
If you enjoy BlenderNation and you think it’s a valuable resource to the Blender community, please take a moment to read how you can support BlenderNation.

SVG Animation Output for Blender Freestyle

A new script by Francesco will render out your Freestyle animations to an SVG file. It stores each frame in a layer and will even give you access to all the components in the frame in sub-layers.

Francesco writes:

Hello guys, I wanted to let you know that I've been working on some code originally written by Jarno Leppänen that uses the Freestyle integration in Blender to render scenes to SVG format.

I've updated Jarno code to the new 2.70 freestyle API, and enhanced it, introducing the possibility to render animations besides still images. Everything gets rendered to a single SVG file, that when opened in Inkscape presents each single frame in a separated Inkscape layer, containing sub-layers for the rendered components (e.g fills, invisible edges, visible edges).

All comes in form of python modules to be used in freestyle script-rendering mode.
Maybe some of your readers could be interested.


Getting Started

Open the scripts as text blocks in your .blend file and make sure Freestyle python scripting mode is enabled. Now you can add the scripts as style modules. You can render still images or animations, the svg file will be written on the same directory of the source blender file. When opened in Inkscape each rendered frame will be in a separate layer, with sublayers for the different types or rendered elements (e.g. fills, invisible lines, visible edges) according to the modules you used to render.


  • Scott Amsberry

    Oh, I'm definitely going to have to find time to check this out. Will this integrate with a vector based animation program like Synfig?

  • Tom Agnew

    This is killer, exactly what I've been waiting for! Anything that will lead to easier integration of Blender animation sequences into interactive web applications is greatly appreciated, thank you.

  • hvfrancesco

    I'm working to add the ability to output a real frame-by-frame animated SVG file, ready to go online, hope to get there soon

  • hvfrancesco

    this is an example of animated SVG produced by this addon, it's a frame-based animation directly saved as SVG file from blender. I will push the new code to the github repository very soon, just need to polish it a bit.

  • Ross Franks

    Hmm I wonder if this could be incorporated into Adobe Edge animations, that would be brilliant!!!!

  • Ross Franks

    Hmm I tried to run the scripts in 2.70 and have Freestyle activated and get a error "Python script fail, look in the console for now..." am I missing something?

    • hvfrancesco

      HI Ross,
      it seems you are trying to run the script directly in text-editor, that's not how it is supposed to work. Correct workflow is as following:
      - load the scripts you intend to use in text editor
      - go to 'render' panel and enable freestyle
      - go to 'render layers' panel and in freestyle section choose 'python scripting mode' as Control Mode
      - add the style modules you previously loaded, clicking 'Add' and choosing them in selection field clicking on the left icon (this way you pick the pre-loaded text blocks, if you click on the icon to open the script file here it won't work). You can use as many style modules as you want, they get rendered in SVG in a sequence, so the first module you have will be the bottom layer in Inkscape
      - go to 'render' panel and choose render or animation. the SVG output will be written in the same directory where the .blend file is, so it's a good idea to save your blend file before rendering

      • Ross Franks

        Ok thanks hvfrancesco,

        got it working, although when I render it out I get a svg file, but it doesn't animate, ie if i drop it and drag it into my Chrome browser it shows all the frames as a single image, sorry for my noobness :)

        • hvfrancesco

          hi ross, have you added the module to your module queue in render-layers panel? that is the module that adds the animation tags for each frame

          • Ross Franks

            Doh missed that one, ok so I open the animation in Inkscape and can see it has separate layers, but when I drop and drag the SVG into my Chrome browser it still doesn't play it just shows all frames as a static image. You mention I have to use tags so do I have to reference it from a html5 file?

          • hvfrancesco

            the tags are written in the SVG file by module. If you open the resulting file in firefox or chrome you're supposed to see it animated. it is obviously a sub-optimal trick, as it is frame-by-frame animation and not an interpolation of the paths, so the files tend to grow quickly in size for complex objects, but it should work out of the box. Maybe you can try with firefox. what is your chrome version?

          • Ross Franks

            Hey there

            my Chrome version is 33.0.1750.152 and Firefox 22.0 on a 10.8.5 iMac and same on a PC Chrome version is 33.0.1750.154 and Firefox 28.0 I dropped and dragged your example files ( test_freestyle_advanced.svg & test_freestyle.svg ) into both of those browsers and they didn't animate, ie just looked like this...

            Dunno if this matters, but I work for a university and they have managed machines, so would they be blocking anything?

          • hvfrancesco

            hi ross, these two examples are not supposed to be animated.

            Please, go to the github page and check if you can see the animations there.

            I suggest you to get the latest version of the code, add the script to your freestyle script queue and open the resulting svg file with a text editor. If the layer groups contain an tag, then the svg animation is supposed to be working in most browsers.
            You can check SVG animation support here:

          • Ross Franks

            Ok thanks hvfrancesco,

            those new files worked, so sorry about all the hassle, now time to play!!!

            Is there an easy way to also have each frame exported out as separate SVG's?

            I'm working in Adobe Edge and when I import the SVG it just loops and I can't control it, where as if I had separate SVG's I could better control them (especially if I want to preview it on the timeline) or will that increase the file size too much?

  • Martin

    Waoow! I have been fiddling with SVG output for some time, but never got a nice result. I am trying to output elevations and sections of an architecture project, but get messy result with the old svg writer I usually got multiple lines in the same place!

    This method works perfectly! Only one line per edge, not that messy. The only thing is that lines are split at intersections of objects, I can live with that, but also: Lines between vertices are given extra points, although the line is straight. How do you prevent freestyle/this python script from introducing points on straight lines?

  • Kirill Trideshny

    Thank you a lot! This feature will be very-very much appreciated by many of us!

  • hvfrancesco

    animated SVG capability is now on the repo, just get it and test it :)

Share this story: