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. Not scaling svg in Image
QtWS25 Last Chance

Not scaling svg in Image

Scheduled Pinned Locked Moved Solved QML and Qt Quick
13 Posts 5 Posters 1.4k 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.
  • M Mihaill

    Hi.
    I using svg in Image. And when I increase size Image, quality not increased, image is blurred. How I can increase size Image and increase quality?

    O Offline
    O Offline
    odelaune
    wrote on last edited by
    #2

    @Mihaill which object do you use to disply the SVG file?
    If this is a QPixmap, then what you get is the expected behaviour because QPixmap convert the SVG to a matrix image before being displayed.

    M 1 Reply Last reply
    0
    • O odelaune

      @Mihaill which object do you use to disply the SVG file?
      If this is a QPixmap, then what you get is the expected behaviour because QPixmap convert the SVG to a matrix image before being displayed.

      M Offline
      M Offline
      Mihaill
      wrote on last edited by Mihaill
      #3

      @odelaune It's not widgets. I use QML image and set source.

      Image {
                  id: imageMap
                  source: "/path/to/file/or/data/from/file"
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.horizontalCenter: parent.horizontalCenter
                  width: flickableMap.contentWidth * 0.2
                  height: flickableMap.contentHeight * 0.2
                  fillMode: Image.PreserveAspectFit
      
      JoeCFDJ 1 Reply Last reply
      0
      • M Mihaill

        @odelaune It's not widgets. I use QML image and set source.

        Image {
                    id: imageMap
                    source: "/path/to/file/or/data/from/file"
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: flickableMap.contentWidth * 0.2
                    height: flickableMap.contentHeight * 0.2
                    fillMode: Image.PreserveAspectFit
        
        JoeCFDJ Offline
        JoeCFDJ Offline
        JoeCFD
        wrote on last edited by
        #4

        @Mihaill can you show your pic? If it is too complicated, svg may not be able to keep the resolution.

        M 1 Reply Last reply
        0
        • JoeCFDJ JoeCFD

          @Mihaill can you show your pic? If it is too complicated, svg may not be able to keep the resolution.

          M Offline
          M Offline
          Mihaill
          wrote on last edited by
          #5

          @JoeCFD I cant load heare svg file. All vector graphics are scaled.

          JoeCFDJ 1 Reply Last reply
          0
          • M Mihaill

            @JoeCFD I cant load heare svg file. All vector graphics are scaled.

            JoeCFDJ Offline
            JoeCFDJ Offline
            JoeCFD
            wrote on last edited by
            #6

            @Mihaill
            There are two notable reasons why you may not choose to use an SVG file.
            1. Not the right format for high-quality or detailed photos. Designers create vector graphics with points and paths, not pixels. ...
            2. Requires some knowledge of code. SVG is an XML-based scene description language for graphics.

            I have a background image with a lot of machines and svg does not help in its display. Therefore, it was made to png.

            M 1 Reply Last reply
            0
            • JoeCFDJ JoeCFD

              @Mihaill
              There are two notable reasons why you may not choose to use an SVG file.
              1. Not the right format for high-quality or detailed photos. Designers create vector graphics with points and paths, not pixels. ...
              2. Requires some knowledge of code. SVG is an XML-based scene description language for graphics.

              I have a background image with a lot of machines and svg does not help in its display. Therefore, it was made to png.

              M Offline
              M Offline
              Mihaill
              wrote on last edited by
              #7

              @JoeCFD With my svg file all good, I can scaled his in Inkscape. What me need doing with my svg? Me need scaled image.

              1 Reply Last reply
              0
              • S Offline
                S Offline
                SimonSchroeder
                wrote on last edited by
                #8

                I am not an expert in QML as I am always using QWidgets. Inside QWidgets you would use something like QPixmap or QImage. Both render the SVG file with a certain resolution and forget about the source. This is why it would also look pixelated using QWidgets. There, I would write code that reacts to the scaling and reloads the SVG every time to have the proper size (maybe a trick would be to load it with twice the pixelRatio and hope it looks fine when scaled like this).

                I am not sure how (or if) this approach translates to QML. Can you react to the resizing in QML and then "change" the image to the same SVG file?

                M 1 Reply Last reply
                0
                • S SimonSchroeder

                  I am not an expert in QML as I am always using QWidgets. Inside QWidgets you would use something like QPixmap or QImage. Both render the SVG file with a certain resolution and forget about the source. This is why it would also look pixelated using QWidgets. There, I would write code that reacts to the scaling and reloads the SVG every time to have the proper size (maybe a trick would be to load it with twice the pixelRatio and hope it looks fine when scaled like this).

                  I am not sure how (or if) this approach translates to QML. Can you react to the resizing in QML and then "change" the image to the same SVG file?

                  M Offline
                  M Offline
                  Mihaill
                  wrote on last edited by
                  #9

                  @SimonSchroeder updating image not help me, Image rendered svg with big pixels.

                  johngodJ 1 Reply Last reply
                  0
                  • M Mihaill

                    @SimonSchroeder updating image not help me, Image rendered svg with big pixels.

                    johngodJ Offline
                    johngodJ Offline
                    johngod
                    wrote on last edited by
                    #10

                    @Mihaill set the Image mipmap property to true

                    mipmap: true
                    
                    M 1 Reply Last reply
                    1
                    • johngodJ johngod

                      @Mihaill set the Image mipmap property to true

                      mipmap: true
                      
                      M Offline
                      M Offline
                      Mihaill
                      wrote on last edited by
                      #11

                      @johngod It's too not help me. Scaled image are blurred.

                      JoeCFDJ 1 Reply Last reply
                      0
                      • M Mihaill

                        @johngod It's too not help me. Scaled image are blurred.

                        JoeCFDJ Offline
                        JoeCFDJ Offline
                        JoeCFD
                        wrote on last edited by
                        #12

                        @Mihaill
                        using sourceSize
                        https://forum.qt.io/topic/11859/solved-rendering-svg-images

                        M 1 Reply Last reply
                        0
                        • JoeCFDJ JoeCFD

                          @Mihaill
                          using sourceSize
                          https://forum.qt.io/topic/11859/solved-rendering-svg-images

                          M Offline
                          M Offline
                          Mihaill
                          wrote on last edited by
                          #13

                          @JoeCFD Thanks, it is help me

                          sourceSize.width: paintedWidth
                          sourceSize.height: paintedHeight
                          
                          1 Reply Last reply
                          0
                          • M Mihaill has marked this topic as solved on

                          • Login

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