Import SVG files

[jakeg]

Would love to be able to include SVG files in node-canvas documents (input/drawImage() them, not output to SVG) similar to JPG/PNGs etc.

[enagorny]

+1

[mltucker]

Cairo doesn't read SVG files, so this would require adding another dependency like librsvg. Since librsvg works with cairo, it might be not that much work beyond adding the dependency. Feel free to submit a patch!

[mori-dev]

fabric.js can help your goal.

[syadykin]

+1 to this feature

[alex88]

Maybe with http://cairosvg.org/ it can read them?

[marie-x]

+1

[jakeg]

@mltucker are you sure cairo can't read svg files, or is it just that node-canvas doesn't yet have bindings to support them? I think surely the latter:

• http://cairosvg.org/ makes use of cairo to convert SVGs into PNG/PDF/etc
• https://cairographics.org/examples/ under 'SVG' says "Mozilla is using cairo to render SVG content as of Firefox 1.5 and 2.0. As of Firefox 3.0 it uses cairo for rendering all content and UI."
• https://wiki.gnome.org/action/show/Projects/LibRsvg says "librsvg is a library to render SVG files using cairo" with usage shown here: https://developer.gnome.org/rsvg/2.40/rsvg-Using-RSVG-with-cairo.html

... is importing SVGs not just a matter of requiring librsvg and for someone to add the necessary bindings as shown at https://developer.gnome.org/rsvg/2.40/rsvg-Using-RSVG-with-cairo.html ?

[jakeg]

Happy to pay a bounty if anyone would like to work on this?

[scott113341]

I too would love this functionality. @jakeg, does that bounty offer still stand? 😉

[jakeg]

It sure does. I've emailed you to discuss :)

[marie-x]

I'd be willing to kick in.

On Jun 29, 2016, at 10:28 PM, Jake Gordon [email protected] wrote:

It sure does. I've emailed you to discuss :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[scott113341]

To keep everyone updated, I am currently working on adding this functionality: https://github.com/scott113341/node-canvas/tree/svg

I have a couple demos in the svg-demo/ directory: https://github.com/scott113341/node-canvas/tree/svg/svg-demo

[chearon]

@scott113341 nice, bummer we have to add another dependency though ☹️

[scott113341]

Another option is to do something like this, where SVG geometry is parsed and then drawn onto the canvas. My guess is that this approach wouldn't work for all SVGs, but it's worth investigating.

[jakeg]

@scott113341 Yeah I was thinking about using canvg before and it's still a backup idea. However, from the progress you've made so far I've got my fingers crossed we'll be able to properly import svgs soon :)

@chearon is it really a problem to have another dependency?

[chearon]

@jakeg most of the issues posted here are with dependencies. I'm working on distributed static builds though so if that gets merged it would be less of a problem. In the meantime it's worth considering having the SVG library be built only if it's found on the system, the same way Pango currently is on master

[jakeg]

Just noticed pull request #406 from 2 years ago which claims to add this functionality I think?

[foysavas]

@scott113341 what's outstanding from your branch? I am planning to reapply #406 over current master and create a new PR, but want to check in with you about your work first.

[jakeg]

If I remember correctly from a couple of months ago, Scott's fork was working for some SVGs but mangling other ones. Also, if outputting as PDF, the SVGs were unfortunately placed as low res rasters in the PDF output, rather than being placed as-is in their original vector form.

[foysavas]

Thanks for the insight @jakeg.

• Mangling SVGs is definitely bad. I will look to confirm why and when this happens.
• Low-res raster renderings of SVGs in PDF output, however, may be acceptable. After all, the SVG is first rendered within an img element contained within a canvas of set size.
• As also requested, I will also make sure the next PR doesn't impose any new hard dependency requirements on node-canvas

As a next step, I will assess both @scott113341 and @petarov approaches and report back with any serious issues.

Do we have someone with merge privileges watching this discussion? I want to make sure the next PR doesn't lose our momentum.

Thanks again all!

[jakeg]

@foysavas if the SVG is inserted in the PDF at a good resolution (maybe adding an option somehow to specify this?), then this may just be good enough. However, the current code puts them in at a ghastly low resolution with a lot of JPG artifacts (or similar), if I remember correctly.

Ideally for my use though, the SVG would be inserted as-is. I'm printing around 50,000 books a year, using html5 canvas on the front end for users to design pages, and node-canvas on the server to produce PDFs which I then send to print. Clearly I'm going to need the SVGs to end up at a printable quality!

[foysavas]

Hi all, please try out #811 and tell me if there are any issues.

[jakeg]

This works fine with tree.svg, but not with the attached ok.svg (gah, github doesn't allow svg attach, so please rename from ok.png to ok.svg and then try it)

Here's the ok.svg file (saved as ok.png to get it to upload):

Here's the mangled output:

Also can confirm that PDF output is same as per Scott's code (low-quality raster version of the svg rather than original vector file placed as-is in the pdf)

[foysavas]

@jakeg What OS and version of librsvg and node are you using? I managed to render ok.svg without issue.

[jakeg]

@foysavas Ubuntu 14.04 (in a VM on Windows 10), Node v4.4.5 and librsvg 2 (installed with sudo apt-get install librsvg2-dev)

[petarov]

Just for the record, it looks good on my Arch Linux w/h node 6.5.0.

@jakeg Does the mangling occur only with this particular SVG or also with other ones you got?

[foysavas]

I can confirm the bad rendering of ok.svg on Ubuntu 14.04, using Node v4 or v6, and the packaged librsvg version 2.40.2.

In contrast, I can confirm a correct rendering of ok.svg on Ubuntu 16.04, using Node v4 or v6, and the packaged librsvg version 2.40.13.

I believe that librsvg around version 2.40.2 has a path parsing bug and that by 2.40.13 it was fixed. This abandoned bug post seems to support that: https://bugzilla.gnome.org/show_bug.cgi?id=767919

@jakeg Ubuntu 16.04 is also a LTS, hopefully you can transition to it. If you still run into issues, tell me.

[jakeg]

@foysavas fantastic! Yes, I am upgrading the main server to Ubuntu 16.04 today, and was going to run a new test after the upgrade, so wonderful to hear that :)

Has anyone had a look at PDF output at all yet? See below re the quality of the SVG in the PDF (although it says it does, github doesn't allow me to add a PDF so again just change file extension from png to pdf)

[foysavas]

@jakeg Glad to hear it! Native SVGs embedded in PDFs would be nice. Maybe the best way to implement it would be to use MODE_MIME as can be done with JPEGs. I'll spend some cycles to make it happen, but let's get PR #811 merged in first. I'm afraid deviating too much from master will put the PR at risk of going stale.

[zbjornson]

Closing since the corresponding PR for this landed in 2.x! 🎉

[usr-ein]

Just linking the PR mentionned above, if anyone ends up on this issue and wants to know what the PR was:

#811