SVG export uses wrong scale due to nonstandard pixels per inch

[tookitogo]

Preflight Checklist

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

You must agree to search and the code of conduct. You must fill in this entire template. If you delete part/all or miss parts out your issue will be closed.

If you are technical, you should reporting bugs along the lines of https://marker.io/blog/how-to-write-bug-report. If you are not technical, we will make allowances, please try to make an effort to understand the process.

Describe the bug Exporting to SVG for import into another application produces incorrectly scaled output.

Tested applications for import:

• Inkscape 1.3.2
• Microsoft Word (Version 2406 Build 16.0.17726.20078) 64-bit

To Reproduce

1. Set draw.io units to inches
2. Create a square with a solid fill and no line.
3. Set the square's dimensions to 1.0".
4. Export to SVG using the following settings:

• Zoom: 100%
• Border width: 0
• Size: diagram
• Transparent background: doesn't matter
• Shadow: unselected
• Include a copy of my diagram: unselected
• Embed images: unselected
• Embed fonts: unselected
• Links: automatic

5. Open the SVG in Inkscape.
6. Select the square and inspect its dimensions. It is 100x100px or 1.042".
7. Insert the SVG into a Word document and inspect its dimensions: it is 1.04".

Expected behavior The square should be 96x96px or 1.0".

Since draw.io's SVG definition defines the page size in px (and not in mm or inches, etc), and a CSS pixel is defined as 1/96", all dimensions in the SVG file are expected to be in CSS pixels of 1/96".

Actual behavior The square is 100x100px, and in the SVG markup, the square's tag indeed contains width="100" height="100". This means that draw.io is exporting SVG based on 100ppi instead of 96ppi as expected by the CSS standard on which SVG relies. Since other programs expect a 96ppi pixel, the drawing renders 4.2% oversize.

Also, the square is offset by 0.5px, because the SVG definition has the viewbox origin set at -0.5/-0.5 for some reason. (All objects, including the page background if so configured, are shifted.) I suspect this may be related to #2774.

I recognize that draw.io uses 1/100" as its internal units of measurement, but I don't think this is a wise unit to use for SVG export.

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version 24.6.4 (downloaded desktop app)

Desktop (please complete the following information):

• OS: Windows 10 2H22 Build 19045.4529
• Browser: n/a, not running draw.io in browser

Smartphone (please complete the following information):

• n/a

I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:

• n/a, not running in browser

Additional context A user workaround is to export at 96% zoom. A better solution would be for draw.io to do this automatically. An even better solution may be for draw.io to export using actual absolute units, like inches. Then the program opening the SVG knows exactly what the intent was.

Sources for 96ppi expectation: https://www.w3.org/TR/SVG2/coords.html#Units https://oreillymedia.github.io/Using_SVG/guide/units.html https://inkscape.gitlab.io/extensions/documentation/authors/units.html