4

This is a bit of a long shot, but does anyone know of a tool that can export a png from an svg input AND retain the CSS styles applied to it. I have used canvg, but everything appears black in the output, as the styles are kept in css and not part of the svg document.

The solution is web based, and i'd like to perform the conversion client side using a javascript solution if possible.

pluke
  • 3,832
  • 5
  • 45
  • 68
  • [Inksape's command line utility](http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions#Can_Inkscape_be_used_from_the_command_line.3F) might work, although I haven't looked into it in depth. – Bojangles Jan 01 '12 at 17:52
  • Hi @JamWaffles, should probably have made it clearer, I'd like to achieve this in client side javascript as this is for a web based solution. It would be interesting to see if Inkscape allows for this sort of output though, and then see if you could link into the libraries server side – pluke Jan 01 '12 at 19:36
  • No, you're doing just fine - I didn't read your tags! Unfortunately you can't link to executables (command line Inkscape) or even libraries without browser extensions, so you'd have to do this on the server. There is [this question](http://stackoverflow.com/questions/8569842/is-there-a-way-to-export-the-content-in-div-to-a-image-programmatically), which might shed some light. It was closed, but there are some useful links in it. – Bojangles Jan 01 '12 at 20:37
  • Using [fabric.js](http://kangax.github.com/fabric.js/), you can display SVG content on canvas, then get a picture via native `HTMLCanvasElement::toDataURL` method. – kangax Jan 02 '12 at 00:34
  • @kangax That approach requires support of Canvas, "data:" URIs and URIs of unlimited length, which are not interoperable. – PointedEars Jan 03 '12 at 13:15

2 Answers2

3

Update:

I understand that you are using an external stylesheet for your SVG markup. So I think you need a three-step solution:

  1. Make the stylesheet declarations that apply to the SVG markup inline. This is done best client-side. I do not have a solution in source code right now, but it should be possible to use W3C DOM Level 2 Style interface implementations to find out the selectors that apply to an element, and the declarations that have been used in the corresponding blocks (document.defaultView.getComputedStyle() alone will probably result in an SVG fragment having too many inline declarations).
  2. Convert SVG markup with inline stylesheets to PNG. This is best done server-side (e. g., with ImageMagick), so you would need to send the SVG markup to the server.
  3. Serve the PNG resource to the user.

Those two steps could be performed on form submission where in the onsubmit attribute you do step #1 and then call the form's submit() method.

PointedEars
  • 14,752
  • 4
  • 34
  • 33
  • Hi @PointedEars, a little context: I'm embedding SVGs into a website for people to manipulate and would like to give users the ability to export raster files for personal use (converting the SVG into png, and displaying it so that they can right click and save as). As I'm using multiple SVG files I have one CSS file for style information. The raw SVGs don't have any colour information, and this is applied by dynamically changing the classes attached to the SVGs. The ideal would be to have a javascript tool that allowed for SVG -> PNG whilst retaining the applied CSS. Hope this makes sense. – pluke Jan 01 '12 at 19:33
  • Sorry, I had not read your question carefully enough. Please see my updated answer. – PointedEars Jan 02 '12 at 23:12
  • This looks like it'll do the job. I'll try to knock something together that crawls the SVG structure applying the various CSS rules inline and then pass that to canvg. The less server side stuff the better. Thanks! – pluke Jan 03 '12 at 23:10
  • 2
    Its been a while but is there any source code available for this? – Travis Jun 27 '13 at 09:08
  • As @Travis pointed out earlier, any source code or example on this would be most helpful. – amergin Jun 30 '14 at 17:03
  • Sadly I got moved to another project, so hoping someone else might be looking at this... – pluke Jul 01 '14 at 11:47
0

@pluke, you've asked in the comments of the reply of @PointedEars for source code to turn external CSS styling into inline styles for your SVG. I've spent hours of searching for such a tool myself, and found none. However, I've discovered a quite specific solution that applies SVG generated with Rickshaw / D3: @thirdcreed has posted the JavaScript it at: Rickshaw CSS/Axes in JSDOM - just adapt those D3 specific selectors to your custom CSS / SVG elements as needed.

Community
  • 1
  • 1
HumanInDisguise
  • 1,335
  • 4
  • 17
  • 29
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – antyrat Jan 19 '15 at 13:25
  • @antyrat Edited for clarification. – HumanInDisguise Jan 19 '15 at 14:21