flet icon indicating copy to clipboard operation
flet copied to clipboard

[Feature request] Anti aliasing for svg images (or if possible, as a filter applicable to any control)

Open ItsCubeTime opened this issue 3 years ago • 3 comments

Anti aliasing is a post-rasterization process that blends neighboring pixels to hide pixels on the screen, being especially important for monitors with less pixels per inch

To demonstrate its importance, here are some images that compares 3 versions of the same set of icons rendered differently:

desc fig
a. Png with "fake" anti-aliasing with the help of blurring via image manipulation: image
b. Png, no anti-aliasing, same resolution as figure a: image
c. Svg, no anti-aliasing image

All figures were rendered with a height and width of 26px

Interesting resources: https://pub.dev/packages/blur https://api.flutter.dev/flutter/widgets/Image/isAntiAlias.html

ItsCubeTime avatar Oct 14 '22 01:10 ItsCubeTime

image An interesting find I just had is that the lack of anti aliasing only seem to be prevalent with the canvaskit renderer, setting web_renderer="html" fixes the issue when running in the browser

ItsCubeTime avatar Oct 14 '22 02:10 ItsCubeTime

Is that screenshot an SVG?

FeodorFitsner avatar Oct 14 '22 02:10 FeodorFitsner

Is that screenshot an SVG?

Screenshots of images (png & svg) displayed in the canvasKit renderer using flet.Image

ItsCubeTime avatar Oct 14 '22 03:10 ItsCubeTime