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

Question

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

StephenQuan1 · Answer

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 } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍