Bug 452879 - SVG export text often stretches beyond rectangle (class diagram)
Summary: SVG export text often stretches beyond rectangle (class diagram)
Status: REPORTED
Alias: None
Product: umbrello
Classification: Applications
Component: exporter (show other bugs)
Version: 2.33.2 (KDE releases 20.12.2)
Platform: Other Linux
: NOR normal
Target Milestone: ---
Assignee: Umbrello Development Group
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-04-22 19:54 UTC by 1234ab
Modified: 2022-04-26 16:18 UTC (History)
0 users

See Also:
Latest Commit:
Version Fixed In:


Attachments
original image (png export, looks like how it should) (319.09 KB, image/png)
2022-04-22 19:54 UTC, 1234ab
Details
svg image, in svg format (104.87 KB, image/svg+xml)
2022-04-22 19:55 UTC, 1234ab
Details
difference between Inkscape and Gwenview (not a problem this time but may be other times) (109.01 KB, image/png)
2022-04-22 20:00 UTC, 1234ab
Details
Trying out the lengthAdjust property, svg format (104.10 KB, image/svg+xml)
2022-04-24 18:52 UTC, 1234ab
Details
lengthAdjust property in Firefox and gnome image viewer (184.86 KB, image/png)
2022-04-24 18:54 UTC, 1234ab
Details

Note You need to log in before you can comment on or make changes to this bug.
Description 1234ab 2022-04-22 19:54:59 UTC
Created attachment 148308 [details]
original image (png export, looks like how it should)

SUMMARY
In the exported SVG image, the text often stretches beyond the box/rectangle, or at least the last letter is on the edge.
I think this should be fixed somehow.


STEPS TO REPRODUCE
1. the classes I used for screenshots can be found here: https://github.com/4321ba/Gameotry/tree/562dc9e23a6486353624ac7bc52972f148848c6c
2. export as png
3. export as svg

OBSERVED RESULT
they look very similar, however somehow the text in the svg files is a liittle bit wider, so in the end they all look ugly
also I see that different viewers (gwenview, firefox) display fonts slightly differently, but I think that having a larger place left on the right looks much better than when the text just barely doesn't fit

EXPECTED RESULT
the text fits in the box well
I'll attach files
SOFTWARE/OS VERSIONS
Kubuntu 20.04, using the latest (2.32.2) snap
Comment 1 1234ab 2022-04-22 19:55:56 UTC
Created attachment 148309 [details]
svg image, in svg format
Comment 2 1234ab 2022-04-22 20:00:15 UTC
Created attachment 148310 [details]
difference between Inkscape and Gwenview (not a problem this time but may be other times)
Comment 3 1234ab 2022-04-22 20:15:50 UTC
But with all of the apps I looked at (except maybe Gimp, it looks like everything fits there, and except Krita, there it reaaally doesn't fit, like a third of the text is outside), e.g. Console::hMeter's last 2 characters are outside
it's a shame, because otherwise svg's are much better then rasterizing them (select text, high resolution, etc.)

related: https://bugs.kde.org/show_bug.cgi?id=349234

so I don't know what settings (inside an svg) are available to solve this, I don't think it's a great idea to make the box longer (it looks pretty good this way, it's exactly the same as the png export version)
it would also probably be a bad idea to make the text 1 point smaller when exported with svg, because of the same reason
the best would probably be something like making the letters take up 3-4% less space horizontally in the svg export (while staying the same font and size), but probably there isn't a way to do that in svg, idk
Comment 4 1234ab 2022-04-23 11:19:04 UTC
I think I found something useful, https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust
I'll try to experiment with it, if I can get it to work
Comment 5 1234ab 2022-04-24 18:52:16 UTC
Created attachment 148344 [details]
Trying out the lengthAdjust property, svg format

Here I tried out that property, added it to 2 text elements: to "KEY_DOWN: const int" and to the hMeter method (the longest). The first one should now be exactly the same size as the underline, and the second should fit into the box
I tried this with the Gnome image viewer (it didn't work), and Firefox (it did work)
I'll attach screenshots
also, it looks like something is very different from how it looks on KDE, idk what (it looks like even noto sans is available here too)
Comment 6 1234ab 2022-04-24 18:54:52 UTC
Created attachment 148345 [details]
lengthAdjust property in Firefox and gnome image viewer
Comment 7 1234ab 2022-04-24 19:41:40 UTC
after quite a bit of clicking, I found the method we'd need to override, though it doesn't seem easy
https://code.woboq.org/qt5/qtsvg/src/svg/qsvggenerator.cpp.html#_ZN15QSvgPaintEngine12drawTextItemERK7QPointFRK9QTextItem
in this method we could add the 2 tags (textLength and lenghAdjust), and the actual length could be gotten like this:
https://code.woboq.org/qt5/qtbase/src/gui/painting/qpainter.cpp.html#6492 (`ti.width`), though maybe it needs to be transformed somehow
Comment 8 1234ab 2022-04-26 15:38:35 UTC
adding to the compatibility list, this svg file that I posted on 2022-04-24 18:52 UTC, the one that I modified by hand and added 2 textLengths and lengthAdjusts,
works well in:
LibreOffice, Falkon, FIrefox, Inkscape

doesn't work (shows as if I didn't do any modifications):
Gnome Image Viewer (eye of gnome is the real name? dunno), Gwenview, KolourPaint (whatever that is), GIMP

so it seems like applications supporting these properties is a hit or miss, though I think it's still worth thinking about
also about LibreOffice: it literally displays them in different lengths based on how much I zoom in, and there's like at least 20-30% length difference XD; however with these properties it always has the correct length
Comment 9 1234ab 2022-04-26 16:18:06 UTC
librsvg, which EOG uses, plans to implement support: https://gitlab.gnome.org/GNOME/librsvg/-/issues/838
here is the related thing from the qt side: https://bugreports.qt.io/browse/QTBUG-79042 (they only claim to support tinysvg 1.2, while these need 1.1 and the full version)
gwenview (and kolourpaint) depend on libqt5svg (which I assume means that they use it for svg import)
and gimp if I found correctly seems to use a custom script https://github.com/GNOME/gimp/blob/708f075f804caa5cbd11cae2f85f3726456aedcb/plug-ins/common/file-svg.c