When I display SVG with curve filling, I get exactly what I see with browser; But when I use the same html and svg images with prince, output PDF is drawing some white dotted lines in the filled area as shown in the attached ppt file.

How can I suppress these white lines?

1. svg-issue.pptx‎ 88.6 kB

This SVG is drawing multiple adjacent polygons and disabling anti-aliasing to try to eliminate visible gaps between them, however this is not ideal for resolution-independent rendering in PDF.

A better solution would be to draw the entire shape as a single path element, guaranteeing that there are no visible gaps.

Thanks for the note. The SVG is generated by a third party charting library and we don't have any control over it. Is there anyway we can turn it off in Prince?

Thanks

This is the best we can do with the SVG at the moment. Perhaps it would be possible to use JavaScript to pre-process the SVG first?

JavaScript to draw entire shape from adjacent polygons? It is possible to preprocess SVGs, but I have no idea how to combine SVG polygons into a single shape (Basically am an application developer). Any hints/pointers will be of great help.

The attached join.js script demonstrates how to combine multiple polygon elements into a single path element. You can run this on a single SVG file and it should fix the cracks:

prince --script join.js Test.svg

(Please note that this script is specific to your SVG files and will not work for all SVG files).

While this is a solution, I'm not sure what is the best way to run it if you are including multiple SVG files as images from a single HTML file, as these will not be accessible to scripts.

One way would be to run Prince on each SVG individually first and write out document.innerHTML to the console to capture the transformed SVG, although this feels a little clunky.

You could also take the function in the script and put it in your own code called outside of Prince, which may be easier.

1. join.js‎ 1.2 kB

Mike,

Thanks for the script. It works very well. Tried with document.innerHTML work around as well and it seems to work just fine - as you said, it is clunky though!

I will try to convert this into C# and preprocess the SVG.

Thanks alot for showing a way out!