Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Unsolved HTML - SVG images inserted in a text document show ugly

    QML and Qt Quick
    text html image svg stretch
    3
    5
    683
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • jeanmilost
      jeanmilost last edited by

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

      HTMLTest.png

      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
          }
      }
      
      1 Reply Last reply Reply Quote 0
      • fcarney
        fcarney last edited by

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

        C++ is a perfectly valid school of magic.

        jeanmilost 1 Reply Last reply Reply Quote 0
        • jeanmilost
          jeanmilost @fcarney last edited by

          @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>
          
          1 Reply Last reply Reply Quote 0
          • M
            Mise last edited by 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???

            M 1 Reply Last reply Reply Quote 0
            • M
              Mise @Mise last edited by

              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);
              }
              
              1 Reply Last reply Reply Quote 0
              • First post
                Last post