QML Plugin SVG-Icons pixelated when using data uri

Ask the Community
1

Hi,

I’m currently writing a little project plugin for QFIELD that creates a toolbar button with an SVG icon using the following code:

QfToolButton {
  id: updateButton
  bgcolor: Theme.darkGraySemiOpaque
  width: 40
  height: 40
  padding: 0
  round: true
  iconSource: "update.svg"
}

This works perfectly fine, but to avoid a separate SVG file for the icon in the project folder, I’m trying to embedd the SVG via data source uri directly into the plugin code :

QfToolButton {
  id: updateButton
  bgcolor: Theme.darkGraySemiOpaque
  width: 40
  height: 40
  padding: 0
  round: true
  iconSource: 'data:image/svg+xml;utf8,<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="update" class="icon glyph"><path d="M5,12A7,7,0,0,1,16.89,7H14a1,1,0,0,0,0,2h5.08A1,1,0,0,0,20,8V3a1,1,0,0,0-2,0V5.32A9,9,0,0,0,3,12a1,1,0,0,0,2,0Z"></path><path d="M20,11a1,1,0,0,0-1,1A7,7,0,0,1,7.11,17H10a1,1,0,0,0,0-2H4.92A1,1,0,0,0,4,16v5a1,1,0,0,0,2,0V18.68A9,9,0,0,0,21,12,1,1,0,0,0,20,11Z"></path></svg>'
}

This works as intended, however the SVG icon appears pixelated and blurry. What am I doing wrong or do I have to set some sort of scaling factor to it? When I use a web uri of the same icon (svgrepo.com/show/460134/update.svg), it is rendered nicely. But as I want this to be offline useable, this is not an option.

2

hello @calidris , just a guess, but have you tried with a bigger SVG? That is, instead of enlarging the box to 800px on which you extend the SVG, to try and make the lines occupy 800px in the first place.

Here I’ve attached the icon rescaled to 800px if you want to try:

update-big
update-big800×889 1.09 KB

3

Heya!

I have no experience directly embedding SVG data into the Plugin source code itself, but for icons that resemble those already used by QField, you can just use QField’s own icons instead:

iconSource: Theme.getThemeVectorIcon("ic_rotate_white_24dp")
iconColor: "white"

The icons available this way can be found here (minus the .svg file extension): QField/images/themes/qfield/nodpi at master · opengisch/QField · GitHub

4

Thanks @cuprico . But unfortunately it didn’t change anything. I tried it before with bigger icons and again with your enlarged SVG, but no difference.