WIll there be svg support for CTKImage?

[Aeiddius]

I'm currently using tksvg to use svg as image. And what's good with it is that I can change the fill of the svg string before it gets rendered so I can change any of its parts to whichever I want. Not sure if this is best or bad practice though.

The reason why I want to use svg is because I plan to add theme features to my app and I'm having difficulty changing the image colors using PIL but with svg it's straight forward.

The following is a sample code of what I'm currently using.

import customtkinter
import tksvg

def button_callback():
    print("button pressed")

app = customtkinter.CTk()
app.title("my app")
app.geometry("300x150")

color = "#7694b4"
d = f'''<svg width="0" height="0"><path d="M17.2 26.6l1.4 2.9 3.2.5-2.2 2.3.6 3.2-2.9-1.5-2.9 1.5.6-3.2-2.3-2.3 3.2-.5zM44.8 3.8l2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2L41 4.1l2-.3.9-1.8zM8.9 10l.9 1.8 2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2L6 12.1l2-.3zm37.6 17l.647 1.424 1.553.258-1.165 1.165.26 1.553-1.424-.776-1.295.647.26-1.553-1.165-1.165 1.553-.259zM29.191 1C24.481 2.216 21 6.512 21 11.626c0 6.058 4.887 10.97 10.915 10.97 3.79 0 7.128-1.941 9.085-4.888-.87.224-1.783.344-2.724.344-6.028 0-10.915-4.912-10.915-10.97 0-2.25.674-4.341 1.83-6.082z" fill="{color}" fill-rule="evenodd"></path></svg>'''
svg_image = tksvg.SvgImage( data = d, scaletoheight = 100 )

button = customtkinter.CTkButton(app, text="Fancy Button", command=button_callback, image=svg_image)
button.grid(row=0, column=0, padx=20, pady=20)

app.mainloop()

Expectedly, I am getting the warning Given image is not CTkImage but <class 'tksvg.SvgImage'>. Image can not be scaled on HighDPI displays, use CTkImage instead..

My question is if there will be a CTkImage support for SVG? (As far as I know, PIL doesn't support SVG). If there isn't, how can I disable the warning for now?

Or if you guys have an alternative way of doing this. Thank you very much.

[MatheusLPolidoro]

@Aeiddius, I'm in the same situation and would like to know if you were able to solve it.

[dipeshSam]

@MatheusLPolidoro and @Aeiddius

This warning appears because the provided image is not an instance of PIL.Image.Image class which is required for CTkImage. We can simply solve it by converting the SVGImage's image object to the PIL.Image.Image object. SVGImage class gives PhotoImage object of Tkinter native. We can convert this PhotoImage object using getimage() method of ImageTk module of the PIL library.

To streamline and simplify this process, I've created a custom class named "CTkSVGImage". This class simplifies the conversion of SVGImage objects to PIL.Image.Image objects, ensuring seamless integration with PIL-based image operations like CTkImage requires.

ctk_svg_image.py

from PIL import Image
from PIL import ImageTk
from customtkinter import CTkImage
from tksvg import SvgImage

class CTkSVGImage(CTkImage):
    """
    Exposes SVG graphics to the customtkinter's widgets as image. Works same as `CTkImage` does.

    Args:
        - svg_data (str) : String source of SVG code.
        - svg_file (str) : Path to svg souce file.
        - svg_scaletowidth (int) : Scales SVG width wise.
        - svg_scaletoheight (int) : Scales SVG height wise.
        - size (tuple(int, int)) : Sets size of rendered image.

    """
    def __init__(self,
        svg_data: str = None,
        svg_file: str = None,
        svg_scaletowidth: int = None,
        svg_scaletoheight: int = None,
        size: tuple[int, int] = None,
        ) -> None:

        kwargs: dict = {}
        self._size = size
        self._pil_img: Image.Image = None

        if svg_data:
            kwargs["data"] = svg_data

        if svg_file:
            kwargs["file"] = svg_file

        if svg_scaletoheight:
            kwargs["scaletoheight"] = svg_scaletoheight

        if svg_scaletowidth:
            kwargs["scaletowidth"] = svg_scaletowidth

            
        self._svg_image = SvgImage(**kwargs)
        self._set_pil_image()
        CTkImage.__init__(self, light_image=self._pil_img, size = self._size)

        
    def _set_pil_image(self):
        self._pil_img: Image.Image = ImageTk.getimage(self._svg_image)
        self._size = self._size if self._size else self._pil_img.size
        
        
    def configure(self, **kwargs):
        """Updates this object takes specified options."""

        redraw: bool = False
        if "svg_data" in kwargs:
            self._svg_image.configure(data = kwargs["svg_data"])
            redraw = True
            
        if "svg_file" in kwargs:
            self._svg_image.configure(file = kwargs["svg_file"])
            redraw = True
            
        if "svg_scaletowidth" in kwargs:
            self._svg_image.configure(scaletowidth = kwargs["svg_scaletowidth"])
            redraw = True
            
        if "svg_scaletoheight" in kwargs:
            self._svg_image.configure(scaletoheight = kwargs["svg_scaletoheight"])
            redraw = True

        if redraw:
            self._set_pil_image()
            super().configure(light_image = self._pil_img)

        if "size" in kwargs:
            super().configure(size = kwargs["size"])
        

sample_test.py

import customtkinter
from ctk_svg_image import CTkSVGImage



def button_callback():
    print("button pressed")

app = customtkinter.CTk()
app.title("my app")
app.geometry("300x150")

color = "#7694b4"
d = f'''<svg width="0" height="0"><path d="M17.2 26.6l1.4 2.9 3.2.5-2.2 2.3.6 3.2-2.9-1.5-2.9 1.5.6-3.2-2.3-2.3 3.2-.5zM44.8 3.8l2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2L41 4.1l2-.3.9-1.8zM8.9 10l.9 1.8 2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2L6 12.1l2-.3zm37.6 17l.647 1.424 1.553.258-1.165 1.165.26 1.553-1.424-.776-1.295.647.26-1.553-1.165-1.165 1.553-.259zM29.191 1C24.481 2.216 21 6.512 21 11.626c0 6.058 4.887 10.97 10.915 10.97 3.79 0 7.128-1.941 9.085-4.888-.87.224-1.783.344-2.724.344-6.028 0-10.915-4.912-10.915-10.97 0-2.25.674-4.341 1.83-6.082z" fill="{color}" fill-rule="evenodd"></path></svg>'''
svg_image = CTkSVGImage( svg_data = d, svg_scaletoheight = 100 )

button = customtkinter.CTkButton(app, text="Fancy Button", command=button_callback, image=svg_image)
button.grid(row=0, column=0, padx=20, pady=20)


app.mainloop()

Output:

Kindly specify any further expectations or additional insights you seek from the explanation provided.

Regards