QML doesn't show svg images

问题

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

回答1:

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).

回答2:

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.

回答3:

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.