Svg file apears noisy in QML

tahuislam

I am a QtQuick 5 beginner. I am trying to display a svg icon with Image type in my app. But my svgs apears very noisy and sometimes a ellipsis would apears as a almost distorted square. How can I solve this.

                     Rectangle{
                            width:20
                            height:width
                            Button{
                                width:parent.width
                                height:parent.height
                                antialiasing: true
                                background:Image{
                                    source:"./../../GUI/Icons/ionicons.designerpack/ellipsis-horizontal-sharp.svg"
                                    anchors.fill:parent
                                    width:parent.width
                                    height:parent.height
                                    antialiasing: true
                                }
                            }
                        }

Screenshot (28).png

tahuislam

Problem Solved:
I added sourceSize measurement instead of basic width and height
And added fillMode: Image.PreserveAspectFit

background:Image{   
          source:"./../../GUI/Icons/ionicons.designerpack/heart- 
          outline.svg"
          anchors.fill:parent
          sourceSize.width:parent.width
          sourceSize.height:parent.height
          fillMode: Image.PreserveAspectFit
}

JoeCFD

@tahuislam said in Svg file apears noisy in QML:

      sourceSize.width:parent.width
      sourceSize.height:parent.height

these are not needed, right?
sourceSize.width:parent.width
sourceSize.height:parent.height

the following works as well

background:Image{   
          source:"./../../GUI/Icons/ionicons.designerpack/heart- 
          outline.svg"
          anchors.fill:parent
          fillMode: Image.PreserveAspectFit
}