We were able to observe the issue but we need to look into it more. We have logged the issue in our database for investigation and for a fix. Once, we will have some news for you, we will update you in this topic.
This issue has been logged as
CELLSNET-46589 - Unexpected grid lines appeared in SVG converted from Excel worksheet
We fill the cell color one by one. Following is the path record in SVG: path_start_end.png (22.3 KB)
You can see that the cell fill paths are one by one, the end of left cell fill path is the start of right cell fill path. There should be no white space between cell fill paths. But the white space appears when you open the SVG in browser.
Please try to add borders with the same color as the fill color to the cell(s) (see attachment “test2_add_border.xlsx”), the output SVG file seems ok to us.
Do you think if this can be done automatically in the Aspose rendering process (maybe only when the line start and end are of the same value, and the background is colored)?
Adding such an offset in this case will make our API too complex. Let us try to research why the white space appears when the line start and end are the same value in SVG first. Once we have an update on it, we will let you know here. test2_add_border.zip (6.1 KB)
As we are automatically rendering different worksheets to images, we cannot predict whether/when to create borders for each cell, also adding borders sometimes changes the margin of the text resulting in different layout in the final output, therefore, we’d like to wait for the update on the SVG issue.
It works ok in Chrome, FireFox and Safari browser types, see attachment “out_shape_rendering.svg” for your reference. But it does not work in IE and Edge browser, see the ref page:
If you can ignore IE and Edge browser and live with it, we can add ‘shape-rendering=“crispEdges”’ attribute for you. By the way, some news about IE and Edge browser as we found:
“Internet Explorer is a compatibility solution,” rather than a browser that businesses should be using day to day for all web browsing activity. Microsoft Edge is planned to be rebuild to base Chromium project. add_shape_rendering.png (22.6 KB) out_shape_rendering1.zip (1.1 KB)
Many thanks for your suggestions, the information is very helpful.
I have also done some experiment myself, turning off anti aliasing indeed helped the gap issue with Chrome, FireFox and Safari, however, as described in the property, it has lower quality for chart slash lines because anti-aliasing has been turned off:
I understood IE and Edge browser has worse compatibility than others and Edge is to be rebuilt based on Chromium so the browser compatibility is less of my concern, while the aliasing issue seems to be more visible. To me, technically, under this solution we need to balance between the accuracy (the grid line) and the quality (the slash line).
If there’s no other choices available to get rid of the line without losing the quality, would it be possible to make this optional (maybe somewhere in the ImageOrPrintOptions) so developers can decide whether/when to turn off/on this property?
We can add ‘shape-rendering="crispEdges"’ to let it only effect on cell fill paths (cell background) as per the attachment “out_shape_rendering.svg” shared in the previous post. Then it will not effect on other elements of the chart. Also, we make a test file with chart for comparisons (check the attached zipped archive “test2_chart.zip”). You will find one with ‘shape-rendering="crispEdges"’(see the “out_chart_shaperendering.svg” in the zipped archive), the another one is rendered without ‘shape-rendering="crispEdges"’(see “out_chart.svg” in the zipped archive). You will see ‘shape-rendering="crispEdges"’ only effects on cell background, the charts are always ok. test2_chart.zip (19.4 KB)