QML doesn't show svg images

Question

I wrote a simple QML ui that is using some svg images. When I execute the app on my desktop everything is fine, the UI is shown and also the svg images on it. The problem happens when I try to execute the app on an embedded device (running windows embedded). In this case the UI is displayed but the svg images are not shown and on the console I'm getting the following message: QML BorderImage: Invalid image data: my_image.svg

The png images are shown correctly instead.

I research the problem over the Internet and I've found a lot of ppl that had solve the issue by adding svg and other dependencies to the .pro file. Unfortunately this didn't help in my case. Those are the contents of my .pro file:

TEMPLATE = app

QT += qml quick widgets svg xml gui core

QTPLUGIN += qsvg

SOURCES += main.cpp \
    SignalProcessor.cpp \
    PopupMode.cpp \
    BasicToolbarModel.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

HEADERS += \
    SignalProcessor.h \
    PopupMode.h \
    BasicToolbarModel.h

CONFIG += qmltestcase

QUICK_TEST_SOURCE_DIR += Tests

DISTFILES += \
    qml/main.qml \
    qml/CustomToolBar.qml \
    qml/components/BatteryStatus.qml \
    qml/components/ImageButton.qml \
    qml/components/Popup.qml \
    qml/components/WifiStatus.qml \
    qml/pages/PlayButtonView.qml \
    qml/pages/StopButtonView.qml \
    qml/tests/tst_CustomToolBar.qml \
    qml/tests/tst_WifiStatus.qml \
    scripts/Utils.js

Edit: all the svg images are located inside the resource file

mainly 128x128 or even smaller and around 3kb. I don't think the problem is the size of the images also because the cpu is an Atom E3845 — mattneri, Aug 27 '15 at 09:48

score 9 · Answer 1 · answered Jul 14 '16 at 16:05

In order to display an SVG image, I've done the following :

Added svg to the .pro file :

QT += svg

Ensured that my Image had a size :

    height: 400
    width: 400

Ensured that I set the source SVG a size :

sourceSize.width: 100
sourceSize.height: 100

That's all.

When I have forgotten things in my QML file, I have had warnings like :

W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShaderProgram: could not create shader program
W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShader: could not create shader

After fixing the QML, the emulator was still complaining :

E/OpenGLRenderer( 4435): GL error:  GL_INVALID_VALUE

I had to restart the emulator in order to have it display something again.

Tip : in order to have a correct visual quality, do not set sourceSize too low compared to the Image size (the above example can give ugly results because of the x4 factor).

(I'm testing with Qt 5.7 on an Android emulator).

Thanks for the `sourceSize` tip, saved me! – Jake Stoeffler Nov 07 '17 at 14:46 — Jake Stoeffler, Nov 07 '17 at 14:46

score 2 · Answer 2 · answered Aug 27 '16 at 08:29

As documentation says:

Qt comes with a number of plugins which are loaded at run-time when they are needed. These can handle anything from connecting to SQL databases to loading specific image formats. Detecting plugin dependencies is impossible as the plugins are loaded at run-time, but androiddeployqt tries to guess such dependencies based on the Qt dependencies of your application. If the plugin has any Qt dependencies which are not also dependencies of your application, it will not be included by default. For instance, in order to ensure that the SVG image format plugin is included, you will need to add QT += svg to your .pro file so that the Qt SVG module becomes a dependency of your application.

You need to indicating plugin dependencies using .pro file.

score 1 · Answer 3 · edited May 23 '17 at 10:30

1

Maybe some shared libraries are missed. Accordingly to the documentation, on Windows (I guess even on WinCE) you have to deploy all the required dll along with your application.

Here is an interesting page on the topic from the wiki.

Here you can find a similar question on that site.

This one is another resource which could be helpful.

edited May 23 '17 at 10:30

Community

1
1

answered Aug 27 '15 at 17:25

skypjack

49,335
19
95
187

score 1 · Answer 4 · answered Sep 07 '15 at 20:44

1

I solved similar issue by adding qsvgicon to QTPLUGIN:

QTPLUGIN += qsvg qsvgicon

It was QWidget application, but I think this solution should help.

answered Sep 07 '15 at 20:44

Alexander Sorokin

703
4
12

score 0 · Answer 5 · answered Sep 11 '15 at 09:15

0

You need to include these lines in your .pro file

QT += xml svg
QTPLUGIN += qsvg

answered Sep 11 '15 at 09:15

marmistrz

5,974
10
42
94

QML doesn't show svg images

5 Answers5

Linked