Buggy SVG font import and export

[fcs_77]

When importing SVG graphics into Affinity Designer that do contain text, the positioning of characters is all over the place but not how it should be.

As an example I attached a SVG file of a graph generated by python and matplotlib. The graph should look like this

But if opened in Designer it looks like this (original svg file is attached as matplotlib_graph.svg). The macOS file previewer and other programs have no problem displaying the file correctly.

 

Similar things appear if I export drawings from Designer to SVG that do contain text. Here is an example

Graph in Affintiy Designer:

And corresponding SVG file as displayed with other Mac apps:

By the way I'm using Affinity Designer 2.3.0 which should be the most recent version.

I also attached the original svg files. Hope that helps.

matplotlib_graph.svg affintity_svg_export_bug.svg

[NathanC]

Welcome to the forums @fcs_77,

SVGS generated in matplotlib failing to import into the Affinity apps correctly is a known issue that has been previously logged with the developers, so i'll bump the existing issue with your report.

Was your second SVG file exported from affinity, originally created in Affinity? The text appears to be comprised of text layers that are all strangely fragmented apart which appears to be the problem. For example 'capacity' at the bottom of the graph is split into two separate text frames 'CAPAC' and 'ITY' and they overlap with one another dependant on the font used/substituted. I noticed this as I didn't originally have Montserrat installed so the fonts were subbed with Arial so the issue wasn't visible on the SVG when viewed in a Web Browser or the App. However, as soon as I installed the Montserrat font (A slightly different version to your embedded 'MontserratRoman') the issue became visible when using the standard Regular variant, but the Thin variant showed the text as expected.

To avoid all these formatting issues it might make more sense prior to exporting out to SVG to re-write graph labels as singular art text/text frame objects, that way the bottom and left text labels won't end up overlapping if it gets substituted for another when opened across different devices/apps.