Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skip favicon resize if it is a SVG containing a CSS media query #1987

Merged
merged 2 commits into from
Feb 1, 2025

Conversation

capi1O
Copy link
Contributor

@capi1O capi1O commented Feb 1, 2025

Custom favicons can be passed as a panel icon and they can be SVGs containing dynamic CSS media queries in order to match device light mode (light or dark) for instance.

Sidebery by default redraws the favicon as a PNG, this fix skips this operation if it is a SVG containing a media query.

fixes #1937

Note: in addition to the fix I also renamed favicon variables names in order to emphasis the fact that they are base64 images because it was not clear in the code.

 SVG containing CSS media queries are not resized and converted to PNG

(resolves mbnuqw#1937)
@mbnuqw
Copy link
Owner

mbnuqw commented Feb 1, 2025

Thank you

@mbnuqw mbnuqw merged commit aa2120a into mbnuqw:v5 Feb 1, 2025
@capi1O
Copy link
Contributor Author

capi1O commented Feb 1, 2025

Thank you for the merge!

I have one question though, just out of curiosity. It's something I did not understand about the function resizeFavicon

Clearly seeing the code below this function handles SVG favicons:

     const base64svgWithSize = Utils.setSvgImageSize(base64fav, ds, ds)
      if (!base64svgWithSize) return base64fav
      await Utils.setImageSrc(favRescaleImg, base64svgWithSize)
      sw = favRescaleImg.naturalWidth
      sh = favRescaleImg.naturalHeight

But what is the purpose of resizing the favicon if it is a SVG?

@mbnuqw
Copy link
Owner

mbnuqw commented Feb 1, 2025

In tests, it appeared that resized PNGs are smaller than SVGs (on average, based on real data). Plus, svg favicons can contain relatively large raster images (in base64).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS media query (prefers-color-scheme) in custom SVG icons are not preserved
2 participants