[SOLVED] Rendering SVG Images

markc

If I load a SVG file into a web browser or Inkscape it'll contract and expand smoothly regardless of the size (from tiny to huge) but if I use a SVG file as the source of an Image in QML (ie; Image { source: "some.svg" }) then it will render okay at the original intended size but becomes terribly pixelated when enlarged.

Is it possible to render the same SVG image smoothly at any size via QML?

markc

Thanks to gri and elpuri in #qt-qml who suggested using sourceSize. It works as I would expect...

@qmldesktopviewer svgtest.qml@

svgtest.qml

@import QtQuick 1.0
import QtDesktop 0.1

Window {
title: "SVG Test"
width: 640; height: 360
visible: true; focus: true
Keys.onEscapePressed: Qt.quit()
Image {
source: "markc.svg"
sourceSize.width: parent.width
sourceSize.height: parent.height
}
}@

markc.svg

@<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
width="100%" height="100%"
viewBox="0 0 32 18"
preserveAspectRatio="xMinYMin meet"
id="markcsvg">
<polygon points=" 1,13 31,13 16,17" style="fill:#ff007f;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points=" 3,11 29,11 16,17" style="fill:#7f00ff;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points=" 5,9 27,9 16,17" style="fill:#3f3fff;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points=" 7,7 25,7 16,17" style="fill:#00bf00;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points=" 9,5 23,5 16,17" style="fill:#ffbf00;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points="11,3 21,3 16,17" style="fill:#ff7f00;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
<polygon points="13,1 19,1 16,17" style="fill:#ff0000;
stroke:#000000;stroke-width:0.1;stroke-linejoin:round"/>
</svg>@