Is there a way to change SVG colors without changing the svg file or adding an overlay?

1190
1
03-18-2020 04:25 PM
TysonLander
New Contributor

I'm working with AppStudio. Is there a way to change SVG colors without changing the svg file or adding an overlay?

0 Kudos
1 Reply
StephenQuan1
Esri Contributor

Yes, but, it depends on the QML component you use.

Some QML components implement an `icon` which can be used to scale (with resampling) and recolor SVGs, e.g.

    property url bikingSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/biking-32.svg"
    ItemDelegate {
        icon.source: bikingSvg
        icon.color: "blue"
        icon.width: 32
        icon.height: 32
        text: qsTr( "ItemDelegate" )
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You may find it useful to use the icon property in common components such as Button, ToolButton, MenuItem, e.g.

    Button {
        icon.source: bikingSvg
        icon.color: "blue"
        icon.width: 32
        icon.height: 32
        text: qsTr( "Button" )
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, if you use Image, and you will need to take care of resampling and coloring yourself. Resampling is needed with the sourceSize property and coloring needs to be done by the ColorOverlay property. Using the Image object in this way allows you to do layering with different colors for different layers

    property url bikingSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/biking-32.svg"
    property url disallowSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/circle-disallowed-32.svg"

    Item {
        width: 32
        height: 32
        Image {
            id: bikingImage
            anchors.fill: parent
            source: bikingSvg
            sourceSize: Qt.size( width, height )
        }
        ColorOverlay {
            color: "blue"
            anchors.fill: bikingImage
            source: bikingImage
        }
        Image {
            id: disallowImage
            anchors.fill: parent
            source: disallowSvg
            sourceSize: Qt.size( width, height )
        }
        ColorOverlay {
            color: "red"
            anchors.fill: disallowImage
            source: disallowImage
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos