Washed/Antialiasing problems on PDF output

[ariya]

emilta...@gmail.com commented:

Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.

1.4.1

What steps will reproduce the problem?

1. Convert a webpage with embedded SVG to PDF using rasterize.js and "A4" as print size (anything else yields the same results)
2. Open the resulting PDF

What is the expected output? What do you see instead?

• The strokes on the path shapes are washed out (antialiased/blurred), see screenshot

Which operating system are you using?

• OSX, Windows

Did you use binary PhantomJS or did you compile it from source?

• Binary

Please provide any additional information below.

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #372.
🌟   3 people had starred this issue at the time of migration.

[aportale]

alessandro.portale@gmail.com commented:

Could you attach the PDF?

[ariya]

emilta...@gmail.com commented:

Yup, here we go...

[aportale]

alessandro.portale@gmail.com commented:

Thanks. The PDF seems to contain the vector graphics from the original SVG. When printing it out with 300+ dpi should give crisp and clear borders.

But here I agree with you: Viewing the PDF on a screen at low resolution causes the PDF viewer to use anti aliasing (for several obvious reasons).

Question: Does your original SVG only have elements with integer pixel coordinates in a way that if viewed in a browser at 100% zoom, all borders are crisp? And do you want the PDF to accurately carriying over these coordinates? Is the PDF supposed to be viewed on-screen?

Just for reference, I attached a small SVG sample that has some crisp and some blurry borders (when viewed in a browser with 100% zoom).

[ariya]

emilta...@gmail.com commented:

Take a look at the attached HTML containing the embedded SVG. This is the origianal of the exported PDF.

Yes, the PDF is intended to be perfectly visible on screen as well but I'm not sure how to do that, hence this logged issue. I think all of the objects have integer coordinates but I might be wrong. Look at the for example...they're all x=0 y=0 and yet still blurry when exported.

Any ideas appreciated!

[TheunisKotze]

Has this been fixed? I am using phantomjs to convert svgs to pngs, and at low resolution the images are often blurry and whitewashed.. sounds similar to this issue with pdfs.

[stale]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!