search

statgen / locuszoom

A Javascript/d3 embeddable plugin for interactively visualizing statistical genetic data from customizable sources.
https://statgen.github.io/locuszoom/
MIT License
156 stars 29 forks source link

Resulting SVG has black background during conversion to PDF #272

Closed VasLem closed 2 years ago

VasLem commented 2 years ago

Hi, congratulations for this amazing tool. I have an issue converting the downloaded SVG file to PDF, both locally and online, it gets rendered to have black background. I have tried to process the CSS style written in the SVG, to no avail. Can you also replicate this ? If so, is there a way to fix it? I would really like the idea to have selectable text in my report, and the SVG option is the only way to achieve that, but Latex does not support it directly and conversion needs to take place.

abought commented 2 years ago

Thanks for the question!

I sincerely wish I had a better answer for you, but as you indicate, the key problem is that not every program supports certain things in SVG. Generally these images look good in browsers, MS Office, and basic viewer programs, but conversion tools seem to have less capable format support, leading to display glitches.

(worse, the list of what is broken varies by program, and by version- which makes it difficult for a small team to guarantee ongoing PDF support)

The big omission here is support for global / inline styles. We try to centralize them for performance in the browser, but unless duplicate info is inlined directly on every single SVG element, many converters have trouble... and even then, support is not guaranteed. I just ran the current SVGs through two programs (Inkscape and Illustrator) where people had reported some success in the past, but both are showing display artifacts.

For whatever it's worth, we do support an "export to PNG" option that will produce more consistently portable publication-quality high resolution images. Since it is a bitmap image format, it doesn't support user-selectable text. I do miss the accessibility, and I'd like to see the SVG/PDF experience improved- but I'm not sure that current tools are moving in that direction.

VasLem commented 2 years ago

Thank you for the conclusive response! I have used the "export to PNG" feature. As far as your remark about functionality, I think that using the xml format is generally more compatible across platforms. For example, every figure I have exported using Matlab or Python using svg is in xml format and all platforms seem to support them. But there might be something else. Anyways, hopefully the burden of compatibility will not be a worry for future developers of such great tools :).

abought commented 2 years ago

SVG is indeed XML based. But it allows people to mix in another language (CSS)- and even though that's a valid way to write SVG, it's a lot more work to parse. Inconsistent / incomplete CSS support across tools is a recurring headache for everyone. (1, 2, 3)

By sidestepping all the fancy calculated interactive stuff, PNGs are far simpler and tend to be more portable. Some programs use fewer SVG features, and so they can create files that are more consistently supported everywhere. In our case we had to prioritize a rich interactive experience in the browser, and relied on PNGs for everywhere else.

I really wish it wasn't that way. Even some of the big companies like Google have been moving tools away from XML/CSS layouts in recent years, citing problems with inconsistent behavior. There's some ongoing work to make tools better, so it should be an interesting few years.