qtsvg

Text in SVGs appears round/smooth when added to the resource system

Qt version: 5.15.15

I'm trying to create some very simple SVG files using https://editsvg.online/editor.html, and then import them in my Qt Project for use.

I'm creating 6 very simple SVGs, just symbols for "+X", "+Y", "+Z", "-X", "-Y", and "-Z".

In the editor, and when the final product is viewed in a browser, it looks fine! But once imported into the QRC, it is smoothed/rounded and loses a lot of detail.

This shows up both when looking at the QRC file:

enter image description here

And when viewing it in the final program:

enter image description here

Is there some way to configure/tell Qt to use a higher resolution when working with SVGs?

Here is an example SVG, for "-Z":

<?xml version="1.0"?>
<svg width="24.000000000000004" height="24.000000000000004" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
 <title>minus_z</title>
 <g class="layer">
  <title>Layer 1</title>
  <text fill="#000000" font-family="Serif" font-size="24" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="0" style="cursor: move;" text-anchor="middle" transform="matrix(0.840809, 0, 0, 0.894209, 10.2146, 12.059)" x="2.16" xml:space="preserve" y="8.04">-Z</text>
 </g>
</svg>

And here's what it looks like in a browser:

enter image description here

Solution

  • As the comments say, the real issue was that this was really text and not an SVG - therefore to get it to look the same we'd need to make sure the preferred font is loaded into QT.

    Here's the sum of changes I made:

    1: Remove all 'stroke' entries from the SVGs

    2: Add a new preferred font to the source directory, I chose "FreeSerif" but any will do. I also added it to the QRC file but I'm not positive if that's needed or not.

    3: Call int QFontDatabase::addApplicationFont(const QString &fileName) on the path to the new font.

    4: If you put in the path correctly, the return will be something other than -1. (I personally had to do a post-build step to copy the font over to the build folder, but this may not apply to everyone)

    5: Temporarily, add a line where you pass that ID to QStringList QFontDatabase::applicationFontFamilies(int id). This will give the font family of the newly added font. Once you write it down somewhere, you can delete this line.

    6: Open the SVGs and edit the 'font-family' tag to match the return from applicationFontFamilies().

    7: Done!