[SOLVED] Rendering SVG Images



  • 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?



  • 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">
    <!-- Copyright (C) 2011 Mark Constable (mark@renta.net) License:AGPLv3 -->
    <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>@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.