SVG rendering artifacts

[sjanssen2]

I am using qiime2-2022.8. When exporting an SVG from an Emperor plot, and loading the resulting SVG in e.g. Inkscape, I do see ugly artifacts: It is reproducible with other graphics editors lile sK1 or Firefox (slightly different view to show that not only spheres are affected)

Usually, I am using Ubuntu 20.04, but I also used OSX 10.13 qiime2 for generating the qzv file with the same artifacts.

I am attaching emperor plots generated from both OS (note I had to change file ending into *.zip) and the exported SVG emp_osx.zip emp_linux.zip

P.S. same artifacts show up, when exporting the SVG within OSX/Chrome

[antgonza]

I think this is a duplicate of https://github.com/biocore/emperor/issues/736, right?

[ElDeveloper]

I think they are different(?). The first screenshot from @sjanssen2 shows stars on the vertices of the polygins, and #736 only shows the polygons (which are to be expected).

[ElDeveloper]

@sjanssen2 Thanks again for reporting. Just had a chance to look into this. When I load the SVG file you uploaded I can see the artifacts. However, when I generate an SVG file using the EMPeror plot available in the view.qiime2.org homepage, I can't reproduce the issue.

The following two screenshots of Inkscape show the file you shared (with the artifacts), and a new file I generated (without the artifacts):

With Artifacts

Without Artifacts

I also tried generating an SVG file with the QIIME2 artifacts you uploaded however I wasn't able to reproduce the problem. My guess is this has something to do with the browser versions you are running. Would you mind sharing what those versions are?

[sjanssen2]

sorry for the late reply. I am using

To rule out issues with my browser or OS, I also did the same on an OSX in a virtual box via Chrome - exported the SVGs there and opened them with Inkscape within OSX - but got the same issues

[ElDeveloper]

Thanks, I just tried that exact same version and was able to reproduce the issue. I think we need to update THREE.js and the SVGRenderer class. Seems like there's a numerical precision issue where the triangles that make up the shapes are computed with a good bit of error when the triangles are small but if the triangles are large then you won't really observe this problem (unless you zoom in a lot). That is why I wasn't able to reproduce this before (I think).

To reproduce the error, save an SVG file of a plot with all spheres at a relatively small size, then open in Inkscape and zoom in ~2000%. You should be able to see that each shape has those artifacts around the vertices.