SVG Render 0.7
Svg render is currently not maintained and it does not work with actual version of Firefox browser.
You may be able to get it working with Firefox 17 - download the portable version here.
SVG renderer is Firefox plugin that converts SVG images and SVG animations into raster image(s) and/or video files.
SVGis truly a great format for vector graphics. It is a XML format - which allows you to use a bunch of universal tools (such as DTD, XSLT, XPath) on it.
Also it's backed up (and standartized) by W3C itself. One of the best open source vector editors - Inkscape
uses SVG as its default format - and it's quite intuitive to write the SVG XML code by hand.
SVG is supported by all last versions of major browsers and could be used to replace Flash.
And - what's more - SVG supports animations conveniently written in the same XML fashion. Sadly there are only few WYSIWYG SVG editors which would sufficiently support animations - one of them could be Synfig Studio with some plugin
For more information about SVG see Wikipedia
Apart from this lack of WYSIWYG editors there is also lack of SVG animation conversion solutions - typically something that could convert SVG to PNG or other raster image formats; when it comes to animations (e.g. convert SVG to AVI) the situation is even more dismal.
One of the projects is Apache foundation Java SVG toolkit Batik. But this program is sometimes unable to render our SVG images or animations properly.
The most convenient way to display SVG is probably a web browser - and current versions of browsers are in the top in proper interpretation of SVG standard. What if we use the browser itself to rasterize SVG images and animations?
I gave it few days - and first version of Firefox extension that uses browser to convert SVG images to PNGs and SVG animations to AVI/MPEG movie is here.
Please excuse the backlogs in this extension - and mail them on svgrender at adasek dot cz! On the end of this page is TODO list - problems that I will improve if is this extension seem to be useful for others.
- Instalation of Firefox extension is as easy as a pie. Just open .xpi file in Firefox.
- SVGRender uses ffmpeg to create videos from sequences of PNG images. It's not necessary to have FFMPEG if you're not intending to create videos from animations.
- FFMPEG is free A/V recorder, converter and streamer. You can download Windows Executable here; on Linux use your favourite package manager to install ffmpeg.
- SVGRender has its button placed in Tools menu. You have to show main menu to be able to access this extension.
- After installation of extension do not forget to restart your browser!
How to use
Navigate to svg image (e.g. http://adasek.cz/svgrender/examples/ball.svg or file:///C:/animation.svg ). In Firefox main menu click "Tools" and there "Render SVG".
Window should appear.
- SVG element - list of svg elements found on page (typically only one)
- FPS (rendering) - frames per second to render the animation. For example if you enter 25fps, animation would have steps 1000/25 = 40ms. If you enter "100", animation step would be 10ms and so on.
- FPS (video) - FPS of the result video. Standard Youtube video should have 25fps. Beware! FFMPEG doesn't support all combinations of formats and fps.
- Frames - Count of frames to be rendered. If you want to render 2seconds of animation with FPS(rendering) 25, "frames" would be "50".
- FFMPEG path - Path to your FFMPEG binary. On windows there should be doubled backslashes in the address.
- Output video extension - FFMPEG automatically sets video format depedning on this. "AVI" produces MPEG-4 video, "MPG" produces MPEG-1/2
- Additional FFMPEG parameters - You can pass basically anything here - but you won't get any feedback what FFMPEG said = if you pass wrong parameters, no video would be produced. Default value "-b 4096k" is tested on both formats.
Known bugs / TODO
This extension is currently in beta version.
- "SVG element" should be able to find embeded svg's in html page. Currently, only standalone SVG (file.svg) and HTML5 with inline <svg> is supported.
- FPS(rendering) gets rounded when converted to period. Values that do not divide 1000 could desync.
- FFMPEG path should have "file choose" dialog.
- FFMPEG should somehow return its status message in case it failed.
- More convenient GUI for rendering non-animated images.
- Resizing and croping options would be nice
- Automatically open the folder with images.
- Preview image - sometimes it's not displayed properly
- SVG elements with width or height as "###px" are not properly rendered - it's necessary to use plain integers here. (I have to look into specification)
"No SVG element found" message box
Open in the browser the .svg file alone. You can usually find its adress in the source code.
Rendering stuck on "Starting..."
See if the last bug isn't the case; try to slightly modify SVG file (its header). Send me svgrender at adasek dot cz the svg file and relevant js error console messages.
No video is rendered
Check your ffmpeg executable, additional parameters (try empty). Try another output extension.
If everything else fails, you should be able to make video manually with ffmpeg from rendered pngs. Use %7d.png as input imagess.
- 0.7 - 12th June 2012 - Settings now gets saved (in the moment when rendering starts) and loaded
- 0.6 - 15th May 2012 - first public version