HTML - SVG images inserted in a text document show ugly

jeanmilost

In a Qt Quick Text document, I want to show several SVG images. I tested the following HTML code:

As you can see on the result on the right, the non-scaled SVG image looks good, but if I try to resize it, it becomes ugly. As the source is a SVG image, it should be drawn with the same quality whatever the size.

How can I configure my Text block to achieve that?

Here is the source code of my Text block:

Text
{
    id: laOutput
    objectName: "laOutput"
    x: -sbTextHorz.position * width
    y: -sbTextVert.position * height
    text: taInput.text
    renderType: Text.NativeRendering
    textFormat: Text.RichText
    onLinkActivated: Qt.openUrlExternally(link)

    /**
    * Right text output mouse area
    */
    MouseArea
    {
        anchors.fill: parent
        acceptedButtons: Qt.NoButton
        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
    }
}

fcarney

Does the no hinting trick work here too? I don't have enough data or code to test this.

jeanmilost

@fcarney said in HTML - SVG images inserted in a text document show ugly:

Does the no hinting trick work here too? I don't have enough data or code to test this.

No, doesn't work, unfortunately. About the data, I simply added a Text area in a qml document, for which I passed the following text, as HTML text:

<img src="file:///C:/Users/Admin/Desktop/test2.svg" width="25" height="25"></img>

The test2.svg I use above is the following one:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>

  <circle cx="5" cy="5" r="4" />
</svg>

Mise

I'm facing the exact same issue.

I want to use this text in a QLabel, where "image.svg" is rendered as an image.

Hello <img src=":/Resources/image.svg" height="100" width="100"> World!

But the rendered image is pixelated and is not fit for purpose.

Surely I'm missing something - there must be a way to achieve this???

Mise

Is it possible to to extend QLabel and implement my own paintEvent() that draws the text and draws the svg image?

It seems to work, but would problaby take alot of effort to get it right (i.e. to get the image in the right location everytime).

void MypLabel::paintEvent(QPaintEvent* event) {
        QPainter painter(this);
        const auto pos = QPoint(0, 16);
        painter.drawText(pos, this->text());
    
        const auto posPixMap = QPoint(30, 0);
        auto size = QSize(16, 16);
        auto pixMap = QIcon(":/Resources/smiley.svg").pixmap(size);
        painter.drawPixmap(posPixMap, pixMap);
}