<< QT_LOG

SVG画像の表示方法

QTではPNGやJPEGなどの画像形式のほかにベクター形式のSVGも表示することができます。

SVG画像の準備

例えば次のようなチェックマークのSVG画像をcheckmark.svgとして作成したとします。

画像SVGファイルの中身(checkmark.svg)
SVG画像の例 
<svg xmlns="http://www.w3.org/2000/svg">
    <circle r="8"cx="8"cy="8"
        stroke-width="2"stroke="#20A020"
        fill="#80A080"/>
    <path d="M 3 8 L 8 12 L 13 5"
        stroke-width="2"stroke="#303080"
        fill="none"/>
</svg>

このSVG自体はxml文章としてテキスト形式で保存されています。xml文章なので文字コードは必ずUTF-8で保存します。

そしてこのSVGファイルをプロジェクトのリソースとして追加します。

プロジェクトの設定

リソースに追加したら次にプロジェクトファイルを開いてSVG関連のライブラリを使うために赤色の部分を追加します。

QT       += core gui svg xml
    #上の1行を変更

TARGET = MyApp
TEMPLATE = app

SOURCES += main.cpp\
        mainwindow.cpp \

HEADERS  += mainwindow.h \
FORMS    += mainwindow.ui \

RESOURCES += \
    MyApp.qrc

このプロジェクトファイルのようにsvg xmlを追加します。

SVGをウィジェットに表示する

いよいよSVGをリソースとして読み込んでウィジェットに表示してみようと思います。

SVGを表示するにはQSvgRendererクラスからSVGファイルを読み込み、そこからウィジェット上に画像として表示できます。

例としてQWidgetを継承したカスタムビュー上のpaintEvent関数からウィジェットの左上にSVGを表示してみます。

#ifndef IMAGE_WIDGET_H
#define IMAGE_WIDGET_H

#include <QPaintEvent>
#include <QPainter>
#include <QtSvg/QSvgRenderer>

class ImageWidget : public QWidget
{
    /**コンストラクタ*/
    ImageWidget(){}
    
    /**SVG画像を表示する*/
    virtual void paintEvent(QPaintEvent* event)
    {
        QWidget::paintEvent(event);
        QPainter painter(this);
        QSvgRenderer renderer(QString(":/checkmark.svg"));
            ///パスからSVG読み込み
        renderer.render(&painter, QRect(0, 0, 30, 30));
            ///ウィジェットの左上に30x30の大きさで描画
    }
};
#endif    //IMAGE_WIDGET_H

SVGをリソースからQSvgRendererに読み込むだけで簡単に画像を表示できます。

もし何も表示されなければSVGファイルに誤りがあるかもしれません。

以上、SVGをウィジェットに表示する方法でした!

関連項目