Pyside change color or opacity of SVG in QIcon

Question

I've been reading around online and have not found a solution yet. What i want to do is either change the color of the icon per use, or change the opacity of it.

So if someone could help, how can i change the color of the SVG icon 'Vimeo' to be red or blue rather than creating multiple images?

Link to svg: https://www.dropbox.com/s/vshvosnuu5998wy/vimeo.svg?dl=0

# Modules
# ------------------------------------------------------------------------------
import sys
from PySide import QtGui, QtCore, QtSvg

# widget
# ------------------------------------------------------------------------------
class Example(QtGui.QWidget):

    def __init__(self,):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        # formatting
        self.setGeometry(300, 300, 600, 300)
        self.setWindowTitle("Example")

        # widgets
        self.itemList = QtGui.QTreeWidget()
        self.itemList.setItemsExpandable(True)
        self.itemList.setAnimated(True)
        self.itemList.setItemsExpandable(True)
        self.itemList.setColumnCount(2)
        self.itemList.setHeaderLabels(['', ''])

        # load some icons
        self._ico_01 = QtGui.QIcon('vimeo.svg')

        # add items
        item0 = QtGui.QTreeWidgetItem(self.itemList, ['testing', ''])
        item0.setIcon(1, self._ico_01)  # 1 - we set image for second colomn

        item1 = QtGui.QTreeWidgetItem(self.itemList, ['testing', ''])
        item1.setIcon(1, self._ico_01)  # 1 - we set image for second colomn

        # layout
        self.mainLayout = QtGui.QGridLayout(self)
        self.mainLayout.addWidget(self.itemList)
        self.show()

# Main
# ------------------------------------------------------------------------------
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

I'm afraid it is not possible. I wanted to solve this as well a few months ago, but didn't find a solution. — titusjan, Nov 05 '15 at 14:46

score 3 · Answer 1 · edited May 23 '17 at 12:30

Here is a working solution, but it require to rasterize the svg before modification. This is done at runtime (baked in 500px here) (thanks to This SO answer)

The svg is converted to a QImage and painted in choosen color at icon creation.

# Modules
# ------------------------------------------------------------------------------
import sys
from PySide import QtGui, QtCore, QtSvg
from random import randint

# widget
# ------------------------------------------------------------------------------
class Example(QtGui.QWidget):

    def __init__(self,):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        # formatting
        self.setGeometry(300, 300, 600, 300)
        self.setWindowTitle("Example")

        # widgets
        self.itemList = QtGui.QTreeWidget()
        self.itemList.setItemsExpandable(True)
        self.itemList.setAnimated(True)
        self.itemList.setItemsExpandable(True)
        self.itemList.setColumnCount(2)
        self.itemList.setHeaderLabels(['', ''])

        # Load the svg
        renderer = QtSvg.QSvgRenderer('D:/DEV/TMP/vimeo.svg')        
        # Prepare a QImage with desired characteritisc
        self.orig_svg = QtGui.QImage(500, 500, QtGui.QImage.Format_ARGB32);    
        # Get QPainter that paints to the image
        painter = QtGui.QPainter(self.orig_svg);
        renderer.render(painter);

        # add items
        color0 = QtGui.QColor( 255, 35, 35 )
        item0 = QtGui.QTreeWidgetItem(self.itemList, ['testing', ''])
        item0.setIcon(1, self.icon_colored( color0 ))  # 1 - we set image for second colomn

        color1 = QtGui.QColor( 32, 255, 35 )
        item1 = QtGui.QTreeWidgetItem(self.itemList, ['testing', ''])
        item1.setIcon(1, self.icon_colored( color1 ) )  # 1 - we set image for second colomn


        pixmap = QtGui.QPixmap.fromImage( self.orig_svg )
        self.lbl = QtGui.QLabel(self)
        self.lbl.setPixmap(pixmap)

        self.button = QtGui.QPushButton("rand color")

        self.button.clicked.connect( self.changeColor )

        # layout
        self.mainLayout = QtGui.QVBoxLayout(self)
        self.mainLayout.addWidget(self.button)
        self.mainLayout.addWidget(self.itemList)
        self.mainLayout.addWidget(self.lbl)
        self.show()

    @QtCore.Slot()
    def changeColor( self ):

        r = randint(0,255)
        g = randint(0,255)
        b = randint(0,255)

        # Copy the image
        new_image = self.orig_svg.copy()

        # We are going to paint a plain color over the alpha
        paint = QtGui.QPainter()
        paint.begin( new_image )
        paint.setCompositionMode( QtGui.QPainter.CompositionMode_SourceIn )
        paint.fillRect( new_image.rect(), QtGui.QColor( r, g, b ) )

        paint.end()

        self.lbl.setPixmap( QtGui.QPixmap.fromImage(new_image) )

    def icon_colored( self, color ):

        # Copy the image
        new_image = self.orig_svg.copy()

        # We are going to paint a plain color over the alpha
        paint = QtGui.QPainter()
        paint.begin( new_image )        
        paint.setCompositionMode( QtGui.QPainter.CompositionMode_SourceIn )       
        paint.fillRect( new_image.rect(), color )        
        paint.end()

        return QtGui.QIcon( QtGui.QPixmap.fromImage( new_image ) )


app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())

Pyside change color or opacity of SVG in QIcon

1 Answers1