Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. HTML - SVG images inserted in a text document show ugly
QtWS25 Last Chance

HTML - SVG images inserted in a text document show ugly

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
texthtmlimagesvgstretch
5 Posts 3 Posters 1.6k Views
  • 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.
  • J Offline
    J Offline
    jeanmilost
    wrote on 28 Apr 2020, 14:56 last edited by
    #1

    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
    0
    • F Offline
      F Offline
      fcarney
      wrote on 1 May 2020, 14:09 last edited by
      #2

      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.

      J 1 Reply Last reply 1 May 2020, 23:11
      0
      • F fcarney
        1 May 2020, 14:09

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

        J Offline
        J Offline
        jeanmilost
        wrote on 1 May 2020, 23:11 last edited by
        #3

        @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
        0
        • M Offline
          M Offline
          Mise
          wrote on 16 May 2020, 08:58 last edited by Mise
          #4

          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 16 May 2020, 14:44
          0
          • M Mise
            16 May 2020, 08:58

            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 Offline
            M Offline
            Mise
            wrote on 16 May 2020, 14:44 last edited by
            #5

            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
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved