Export protovis SVG to image in python/django

[Jan van Gemert]

Hi,

Just thought to share my python solution to exporting protovis graphs
to a static image.
I'm using it in a Django website, and post the protovis generated SVG
as a string to the server, after which i can convert the SVG to a PDF/
PS/PNG image in python and return it back to the browser.

see also this thread on extracting the SVG string from protovis:
http://groups.google.com/group/protovis/browse_thread/thread/d92e7eacff78e01a

after you have the SVG as a string in svgString, this python code
converts it to a vector based PDF (Postscript, a bitmapped PNG or
others are also possible: http://cairographics.org/documentation/cairomm/reference/classCairo_1_1Surface.html
)

import cairo, rsvg

svg = rsvg.Handle(data=svgString)
width = svg.props.width
height = svg.props.height

# create PDF
surf = cairo.PDFSurface('output.pdf', width, height)
cr = cairo.Context(surf)
svg.render_cairo (cr)
surf.finish()

Hope this may be useful for someone,

Jan

[Bixente]

Hi Jan,

Thanks a lot for that. Please excuse this silly question but would it
mean that we could save our protovis SVG as a Pdf and Png?

If I understand what you wrote, we could export the SVG string to a
server which would send the PNG back.
The thing is I don't understand how you extract the SVG string, you
send it to the server and you get it back.
All of this could be contained in one html file?

Thanks a lot,

Bixente

On Nov 5, 1:38 pm, Jan van Gemert <nietp...@gmail.com> wrote:
> Hi,
>
> Just thought to share my python solution to exporting protovis graphs
> to a static image.
> I'm using it in a Django website, and post the protovis generated SVG
> as a string to the server, after which i can convert the SVG to a PDF/
> PS/PNG image in python and return it back to the browser.
>

> see also this thread on extracting the SVG string from protovis:http://groups.google.com/group/protovis/browse_thread/thread/d92e7eac...

>
> after you have the SVG as a string in svgString, this python code
> converts it to a vector based PDF (Postscript, a bitmapped PNG or

> others are also possible:http://cairographics.org/documentation/cairomm/reference/classCairo_1...

[Jan van Gemert]

Hi Bixente,

Yes indeed, it allows you to export your protovis SVG to a PDF (png,
ps, ..)

you can get the SVG string like this (if vis is the root panel):

var svgString = vis.scene[0].canvas.innerHTML;

But, it seems that various viewers handle SVG differently. And the
rsvg library that i use also suffers from black bars as discussed
here:
http://groups.google.com/group/protovis/browse_thread/thread/d92e7eacff78e01a
So you'd have to "fix" your SVG (as discussed in that thread)

> All of this could be contained in one html file?

Well.. there is posting to the server required.
I use jquery for this, see: http://api.jquery.com/jQuery.post/
and then after you post the string to the server, you have to return
it.
This is how Django does that:
http://docs.djangoproject.com/en/dev/howto/outputting-pdf/
and where they use reportlab, i use the code that i posted above.

So, you do need a webserver that understands python to make this work.
If you only have a browser and no server, you could skip this approach
entirely, and write the svgString to the screen with
console.log(svgString) or alert(svgString) and then save it to a .svg
file and use inkscape (or some other program) to read/convert it.

Hope this helps,

Jan

[Bixente]

Thanks Jan,
Bixente

On Nov 5, 3:47 pm, Jan van Gemert <nietp...@gmail.com> wrote:
> Hi Bixente,
>
> Yes indeed, it allows you to export your protovis SVG to a PDF (png,
> ps, ..)
>
> you can get the SVG string like this (if vis is the root panel):
>
> var svgString = vis.scene[0].canvas.innerHTML;
>
> But, it seems that various viewers handle SVG differently. And the
> rsvg library that i use also suffers from black bars as discussed

> here:http://groups.google.com/group/protovis/browse_thread/thread/d92e7eac...