Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 321
mattneri Avatar asked Aug 27 '15 06:08

mattneri


People also ask

Why are my SVG images not showing?

If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.

What is Qt SVG?

Scalable Vector Graphics (SVG) is an XML-based language for describing two-dimensional vector graphics. Qt provides classes for rendering and displaying SVG drawings in widgets and on other paint devices.


1 Answers

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

like image 173
SR_ Avatar answered Sep 20 '22 05:09

SR_