Pdf.js: Issues rendering pdf as SVG

[stephanepericat]

Configuration:

• Web browser and its version: Google Chrome 49.0.2623.110 (64-bit) (but really all browsers)
• Operating system and its version: OSX 10.10.5
• PDF.js version: 1.5.188
• Is an extension: no

Steps to reproduce the problem:

1. Implement SVG rendering using PDFJS.SVGGraphics
2. Preview complex pdf with gradients and shading

What is the expected behavior? (add screenshot)

We are using PDF.js as part of our product to render a lot of pdf white papers. Some of these PDF documents are quite complex with a lot of graphs and visual elements. After updating PDF.js to version 1.5.188, I tried to implement SVG rendering in an attempt to solve some of the performance issues we are facing with canvas rendering. However, in most cases our white papers do not display properly when using SVG rendering. Similar issues occur when trying to print a pdf rendered with SVG.

What went wrong? (add screenshot)

I get a lot of warnings about unimplemented methods in the console:

Warning: Unimplemented method shadingFill
Warning: Unimplemented method endGroup
Warning: Unimplemented method dependency
Warning: Unimplemented method setTextRise
Warning: Unimplemented method setTextRenderingMode
Warning: Unimplemented method beginGroup

I also get errors related to negative height values:

Error: Invalid negative value for <svg:rect> attribute height="-452.541"

We were hoping to be able to move towards the SVG implementation but unfortunately it seems like a lot of features are not yet implemented and therefore this approach is not production-ready.

When can we expect the SVG rendering to be fully implemented ?

Best Regards,
Stephane

[yurydelendik]

I tried to implement SVG rendering in an attempt to solve some of the performance issues we are facing with canvas rendering.

We found that performance on the SVG on browsers (especially on mobile devices) worse than using canvas (at least from my experiments). So it will not solve your problem.

When can we expect the SVG rendering to be fully implemented ?

There are no contributors are contributing and it's not a priority due to the finding above. The SVG backend was a GSoC project and the student no longer contributing. Hopefully somebody will take it and continue the development.

Closing as answered. More specific SVG backend items tracked somewhere else.

[ldenoue]

SVG would still be great to have even on mobile for retina displays. Canvas rendering is really bad on retina but SVG looks great at any resolution.
Seriously, nobody wants an SVG renderer?

[timvandermeij]

The SVG renderer does have advantages. At the moment we're working on improving the SVG back-end to evaluate if it is indeed better than canvas (not only in terms of quality, but also performance). Refer to https://github.com/mozilla/pdf.js/projects/2 for the progress.

[shklyarik]

I tested on mobile device and svg render faster then canvas, but with some problems :(

[ldenoue]

What kind?

[shklyarik]

I tried open on mobile pdf file in cordova application with PDFJS.SVGGraphics and with canvas. And PDFJS.SVGGraphics worked faster.

[yurydelendik]

To properly measure the performance take in account time spend by browser on re-painting and layout -- there are lots of "hidden" operations and it's hard to compare since with SVG you see all at once, with CANVAS we are trying to not block main thread hence you can often "see" painting on slow devices.

[ldenoue]

could you also send the link of the PDF you tried?

On Thu, Dec 1, 2016 at 10:22 PM, Yury Delendik [e-mail]
wrote:

To properly measure the performance take in account time spend by browser
on re-painting and layout -- there are lots of "hidden" operations and it's
hard to compare since with SVG you see all at once, with CANVAS we are
trying to not block main thread hence you can often "see" painting on slow
devices.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mozilla/pdf.js/issues/7265#issuecomment-264298925,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJIOTO9olOle1oHgcCeaCFUDAY7z83yks5rDzp5gaJpZM4IR9f2
.

[shklyarik]

@yurydelendik, you right, I tried add opacity = 0 for canvas before render and set opacity = 1 after render, and I feel the work faster.