cheminfo / nmrium

React component to display and process nuclear magnetic resonance (NMR) spectra.
https://docs.nmrium.org
MIT License
55 stars 26 forks source link

Fix SVG export to be compatible with word #2166

Closed jschneidewind closed 1 year ago

jschneidewind commented 1 year ago

Current behaviour

Currently it is possible to export vector graphics of spectra as .svg. While this file format is well suited for many applications, there are some issues when using it with Microsoft Word, where it often does not render properly.

See for example (tested with Microsoft Word for Mac 2019): MLB-170-1_10_Word_SVG_import.pdf (spectrum is only partially rendered and integral values are missing)

In contrast to how it should look like in the .png: MLB-170-1_10

A work-around is to convert the .svg to .pdf using software such as Inkscape. In this conversion, however, some graphic elements are lost (e.g. the integral values). See for example: MLB-170-1_10_Inkscape_SVG_to_PDF.pdf

Furthermore, when the color of the spectrum is changed within NMRium and it is then saved as .svg, the spectrum disappears in the .svg to .pdf conversion (see for example: MLB-170-1_10_Color_Changed_Inkscape_SVG_to_PDF.pdf). The spectrum is also not visible when the .svg is directly imported into Word.

Suggested feature

If possible, it would be great if an option for the direct export to .pdf is added, which would expand the options for vector graphic export and enable direct use with Microsoft Word (which is of course commonly used for both teaching and publications).

Thanks for your work on NMRium!

For reference here are the original .zip Bruker file as well as the .svg files with original and changed color:

MLB-170-1.zip MLB-170-1_10 MLB-170-1_10_Color_Changed

lpatiny commented 1 year ago

While PDF exportation could be possible it would require a large library to be bundled with NMRium. https://www.npmjs.com/package/pdfkit could be one of them.

I would first focus on fixing the bugs / limitations in SVG exportation.

@hamed-musallam Could you check why we are loosing the integration ?

image

When I open the SVG in Inkscape there is no integration. I guess we are using a feature that is too recent and unsupported (rgba ?).

image

Same is true for the change of color of spectra that is problematic. Before changing we have for color:

image

After changing

image

The color has now alpha channel.

This can be related to: https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha

hamed-musallam commented 1 year ago

@jschneidewind

can you test with the last version of NMRium on https://dev.nmrium.org/ and see if the export as SVG works well or not?

jschneidewind commented 1 year ago

Thanks a lot for your work on this @hamed-musallam! I just tested the SVG export with the dev version: when opening the file with Inkscape (or importing it into Word), the integral values are now visible. However, the problem caused by changing the color of the spectrum persists as it not visible when opening it with Inkscape. I have attached the SVG file for your reference: MLB-187-1_10

hamed-musallam commented 1 year ago

@jschneidewind

Now the problem should be resolved after we remove the x-axis grid during the exportation, can you test from your end with the last version of NMRium https://dev.nmrium.org/

jschneidewind commented 1 year ago

Thanks for your reply @hamed-musallam ! I just tested it with the dev version but unfortunately the problem seems to persist (after changing the color of the spectrum and exporting the SVG file, the spectrum itself is not visible when opened with Inkscape or Word, all other elements like the axis, integrals, peak labels, are shown).

lpatiny commented 1 year ago

@hamed-musallam The branch is now working correctly and I can open it in inkscape without problems.

There is however an issue if you import it in Microsoft word and print from word to PDF. I did a LOT of testing by simplifying the SVG in order to track down the bug.

Here are the 2 files. It seems that Microsoft word it simplifying the path if it is too long (at least in Microsoft on macintosh) and I could not find an option that would prevent this.

If anybody could test those 2 files on windows and tell if it works would be nice.

Archive.zip

Not working:

image

Working:

image

hamed-musallam commented 1 year ago

I test with a windows machine, and this is what I got once I export the spectra as SVG from MS Word (Microsoft® Word for Microsoft 365 MSO (Version 2302 Build 16.0.16130.20186) 64-bit ) as PDF

it works perfect

spectra smaple.pdf

targos commented 1 year ago

Here's an example with my version of Word (drag and drop both svgs, save as PDF with default options) Microsoft® Word pour Microsoft 365 MSO (Version 2302 Build 16.0.16130.20186) 64 bits

test.pdf

hamed-musallam commented 1 year ago

If anybody could test those 2 files on windows and tell if it works would be nice.

Archive.zip

sample 2.pdf

it seems the problem is how the MS Word convert the PDF, it seems at the MS Word version that i use in my windows machine works without a problem

lpatiny commented 1 year ago

Ok this confirms it is a word problem. On my mac version 16.70 (23021201) I get the following pdf.

mac-16.70-23021201.pdf

From the following word document.

document.docx.zip

Hopefully this will be resolved in a future version.

hamed-musallam commented 1 year ago

@jschneidewind

The problem is resolved right now, concerning the PDF exportation, it works perfectly on the last release of MS Word and it seems it is a bug in a specific release of MS Word.

Please test with the last version of NMRium and inform us if you still face the same problem.

jschneidewind commented 1 year ago

@hamed-musallam @lpatiny I just tested it and everything works well! Thanks a lot for your all of your work on this!