Proper Anti-aliasing for imported SVG images

[agillis]

Describe the problem you have/What new integration you would like

Currently if you import an SVG files using image: the resulting image is jagged (not anti-aliasing). Every other type of vector graphics import in ESPhome is Anti-aliased. This appears to be because every other type of file is imported using the Pillow library and this does anti-aliasing by default. SVG in ESPhome are imported using cairosvg which does not have the capability to anti-alias. Probably the easiest way to resolve this would be to first convert the SVG to PNG using cairosvg then resize the image using Pillow.

And ever better option would be to use ImageMagick to convert SVG to PNG. This does very high quality conversions that look much better then the ones from cairosvg. This would be a one line change to the ESPhome code.

Please describe your use case for this integration and alternatives you've tried:

Additional context

[nagyrobi]

This would be a one line change to the ESPhome code.

Please submit a proposal as PR.

[agillis]

I seem to have found another issue that may be more of a problem. I have been testing a lot of different iteration to see which one looks the best and there seem to be an issue with the use_transparency: command. This seems to remove the anti-aliasing from the image.

This is my code

image:
  - file: https://esphome.io/_static/logo-text-on-light.svg
    id: boot_logo
    type: RGB565
    resize: 470x95
    use_transparency: true

If I use this

  - file: logo-text-on-light.png
    id: boot_logo
    type: RGB565
    resize: 470x95

Where logo-text-on-light.png is https://esphome.io/_static/logo-text-on-light.svg converted to a PNG with a white background it works fine. So it seems that all fine detail on the edge of the letters is being remove when the image files is loaded and put on top of a white background by ESPhome.

Should I just submit a bug report on this?

[nagyrobi]

Yes.

[agillis]

Done

https://github.com/esphome/issues/issues/6047