4 ms·

I only do some web stuff very casually, so I’m definitely not the target demographic. Having said that, the most glaring WebKit omission for me is lack of SVG f

I only do some web stuff very casually, so I’m definitely not the target demographic. Having said that, the most glaring WebKit omission for me is lack of SVG favicon support. Really baffling. All those Apple-specific icons with the different dimensions- really a pain for a casual web dev like me.

efields 3y ago
SVGs don't scale the way you want them to. You can't make a (for example) 256px square image, even a vector, look good at 24px just by vector transforms.
- moron4hire 3y ago
  That really depends on the style of the artwork
  - andybak 3y ago
    Less than you think.
- TheCoreh 3y ago
  With HiDPI/Retina displays, that 24px is actually 48px or 72px, so the need for pixel hinting is much less commonplace than it was 10 or 15 years ago. Also, nothing's really stopping most developers from just scaling it naively to those tiny sizes, in fact it's what commonly happens. I agree we should keep support for custom icons for each size, and it's probably a best practice, but shouldn't be a _requirement_ anymore.
  - globular-toast 3y ago
    How many people have HiDPI displays? It seems to me apart from phones people mostly don't.
    - drcongo 3y ago
      Everyone with a Mac?
      - globular-toast 3y ago
        So ~10% of users?
        drcongo 3y ago
        Plus anyone with a not-cheap-ass Windows / Linux laptop, and anyone who's bought a desktop monitor in the last several years. I can't remember the last time I had to use a screen that wasn't.
        globular-toast 3y ago
        What's "not-cheap-ass"? The standard "developer spec" type laptops from Dell etc. seem to still come with 1080p screens despite costing upwards of 1k credits. If you search for 27" monitor on Amazon you'll find 1080p models coming up, maybe some QHD ones. I can't imagine many offices kitting out with 4K monitors unless they actually need them.
- runarberg 3y ago
  SVGs support media queries. I haven’t tested this, but shouldn’t you be able to alter (or optimize) the image based on the size of the viewport?
- DaiPlusPlus 3y ago
  That's a valid reason for non-Apple browsers to prefer or even require raster (non-SVG) image files, such as a 16x16 favicon for a 96dpi display device like a typical office desktop or low-end laptop. Whereas Safari only runs on macOS + iOS, which in-turn only runs on Apple hardware, and all Apple hardware today is going to run at ~140dpi or above - so pixel-perfect art just isn't required - and if someone plugs a (relatively) low-res TV into a Mac then the OS is going to downsample everything down anyway, and (most) users don't seem to care about that.
- move-on-by 3y ago
  I suppose that makes sense for a professional web dev- but it still feels like an arbitrary feature gap and is the first ‘speed bump’ in standing up a simple website for safari. Just because your pixel-perfect corp might rather have specific image renders for all screen sizes doesn’t really explain why I can’t put a SVG in there and call it a day. I can’t imagine my svg-to-png converter does a much better job of it. It’s all just a hassle. Again, happy to recognize I’m not a front end expert and not the target demographic.
- paulddraper 3y ago
  Disagree. Pixeling editing is a <4% improvement.
- nox101 3y ago
  Aren't Apple's emoji made from vectors? They seem to scale well. Is SVG missing the features to do as well?
  - JimDabell 3y ago
    They scale well in the sense that they display the same thing at different sizes without loss of quality. But that’s not the only thing that matters. The primary goal of an icon is legibility. A large text editor icon might have a pad with a pencil, squiggles on the page, rings binding the pages at the top, etc. But if you scale that down, it might lose legibility. For good icon design, you don’t want the same thing but smaller, you want fewer, simpler elements. So you might drop the rings at the top, then as you get smaller you might drop the squiggles on the page, and if you go small enough, you might want to change to just having the pencil. Most people don’t bother with this. They just shrink things down. If that’s what you do, then SVG solves that problem. But that’s not great icon design. Great icon design needs to adapt to smaller sizes, not just grow and shrink.
    - psYchotic 3y ago
      Not to detract from your argument (which I agree with), but SVG _can_ technically solve that problem using CSS. Here's a link that demonstrates this: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ https://tympanus.net/codrops/2014/08/19/making-svgs-responsi...
      - JimDabell 3y ago
        Another article here specifically about favicons: https://web.dev/articles/building/an-adaptive-favicon https://web.dev/articles/building/an-adaptive-favicon Unfortunately, I tried the demo and even though it’s supposed to work in Chrome, it didn’t for me. Nor with Safari. Have you gotten it working with favicons anywhere?
clementmas 3y ago
That's a good point. We shouldn't have to generate all these icons. I also wish we could style <select> lists. Like adding flags to <option> elements. No mention of CSS page transitions or scroll-driven animations which can also remove some boilerplate JS.
- madeofpalk 3y ago
  There is this "Open UI" W3C effort which is supposed to be moving forward styling Select elements. Improved <select> is flagged in Chrome at the moment - it'll be great if this (and the other stuff in Open UI) actually get ratified into standards and ship. https://open-ui.org/components/selectlist/ https://open-ui.org/components/selectlist/
CharlesW 3y ago
FWIW, Safari supports 1-color SVG favicon using this format: <link rel="mask-icon" href="/favicon.svg" color="#990000"> If you use something like Vite, you can also auto-generate all favicon/homes screen icon creation from a single source image.
- move-on-by 3y ago
  Haha! Yes, I actually was aware of this specific case where an SVG favicon works. I suppose it was disingenuous of me to say it’s not supported altogether, but I’ve yet to have an opportunity to use it due to the 1-color restriction.
MatthiasPortzel 3y ago
Semi-related, but Chrome won't use an SVG favicon if an ico favicon is present. (https://bugs.chromium.org/p/chromium/issues/detail?id=1450857 https://bugs.chromium.org/p/chromium/issues/detail?id=145085...) I ship a PNG favicon and an SVG favicon.
alwillis 3y ago
> All those Apple-specific icons with the different dimensions- really a pain for a casual web dev like me. You'll be glad to know you it's not like that anymore; you just need one Apple-specific icon now [1]: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> [1]: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs https://evilmartians.com/chronicles/how-to-favicon-in-2021-s...

efields 3y ago

SVGs don't scale the way you want them to. You can't make a (for example) 256px square image, even a vector, look good at 24px just by vector transforms.

moron4hire 3y ago
That really depends on the style of the artwork
- andybak 3y ago
  Less than you think.
TheCoreh 3y ago
With HiDPI/Retina displays, that 24px is actually 48px or 72px, so the need for pixel hinting is much less commonplace than it was 10 or 15 years ago. Also, nothing's really stopping most developers from just scaling it naively to those tiny sizes, in fact it's what commonly happens. I agree we should keep support for custom icons for each size, and it's probably a best practice, but shouldn't be a _requirement_ anymore.
- globular-toast 3y ago
  How many people have HiDPI displays? It seems to me apart from phones people mostly don't.
  - drcongo 3y ago
    Everyone with a Mac?
    - globular-toast 3y ago
      So ~10% of users?
      - drcongo 3y ago
        Plus anyone with a not-cheap-ass Windows / Linux laptop, and anyone who's bought a desktop monitor in the last several years. I can't remember the last time I had to use a screen that wasn't.
        globular-toast 3y ago
        What's "not-cheap-ass"? The standard "developer spec" type laptops from Dell etc. seem to still come with 1080p screens despite costing upwards of 1k credits. If you search for 27" monitor on Amazon you'll find 1080p models coming up, maybe some QHD ones. I can't imagine many offices kitting out with 4K monitors unless they actually need them.
runarberg 3y ago
SVGs support media queries. I haven’t tested this, but shouldn’t you be able to alter (or optimize) the image based on the size of the viewport?
DaiPlusPlus 3y ago
That's a valid reason for non-Apple browsers to prefer or even require raster (non-SVG) image files, such as a 16x16 favicon for a 96dpi display device like a typical office desktop or low-end laptop. Whereas Safari only runs on macOS + iOS, which in-turn only runs on Apple hardware, and all Apple hardware today is going to run at ~140dpi or above - so pixel-perfect art just isn't required - and if someone plugs a (relatively) low-res TV into a Mac then the OS is going to downsample everything down anyway, and (most) users don't seem to care about that.
move-on-by 3y ago
I suppose that makes sense for a professional web dev- but it still feels like an arbitrary feature gap and is the first ‘speed bump’ in standing up a simple website for safari. Just because your pixel-perfect corp might rather have specific image renders for all screen sizes doesn’t really explain why I can’t put a SVG in there and call it a day. I can’t imagine my svg-to-png converter does a much better job of it. It’s all just a hassle. Again, happy to recognize I’m not a front end expert and not the target demographic.
paulddraper 3y ago
Disagree. Pixeling editing is a <4% improvement.
nox101 3y ago
Aren't Apple's emoji made from vectors? They seem to scale well. Is SVG missing the features to do as well?
- JimDabell 3y ago
  They scale well in the sense that they display the same thing at different sizes without loss of quality. But that’s not the only thing that matters. The primary goal of an icon is legibility. A large text editor icon might have a pad with a pencil, squiggles on the page, rings binding the pages at the top, etc. But if you scale that down, it might lose legibility. For good icon design, you don’t want the same thing but smaller, you want fewer, simpler elements. So you might drop the rings at the top, then as you get smaller you might drop the squiggles on the page, and if you go small enough, you might want to change to just having the pencil. Most people don’t bother with this. They just shrink things down. If that’s what you do, then SVG solves that problem. But that’s not great icon design. Great icon design needs to adapt to smaller sizes, not just grow and shrink.
  - psYchotic 3y ago
    Not to detract from your argument (which I agree with), but SVG _can_ technically solve that problem using CSS. Here's a link that demonstrates this: https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ https://tympanus.net/codrops/2014/08/19/making-svgs-responsi...
    - JimDabell 3y ago
      Another article here specifically about favicons: https://web.dev/articles/building/an-adaptive-favicon https://web.dev/articles/building/an-adaptive-favicon Unfortunately, I tried the demo and even though it’s supposed to work in Chrome, it didn’t for me. Nor with Safari. Have you gotten it working with favicons anywhere?

clementmas 3y ago

That's a good point. We shouldn't have to generate all these icons. I also wish we could style <select> lists. Like adding flags to <option> elements. No mention of CSS page transitions or scroll-driven animations which can also remove some boilerplate JS.

madeofpalk 3y ago
There is this "Open UI" W3C effort which is supposed to be moving forward styling Select elements. Improved <select> is flagged in Chrome at the moment - it'll be great if this (and the other stuff in Open UI) actually get ratified into standards and ship. https://open-ui.org/components/selectlist/ https://open-ui.org/components/selectlist/

CharlesW 3y ago

FWIW, Safari supports 1-color SVG favicon using this format: <link rel="mask-icon" href="/favicon.svg" color="#990000"> If you use something like Vite, you can also auto-generate all favicon/homes screen icon creation from a single source image.

move-on-by 3y ago
Haha! Yes, I actually was aware of this specific case where an SVG favicon works. I suppose it was disingenuous of me to say it’s not supported altogether, but I’ve yet to have an opportunity to use it due to the 1-color restriction.

MatthiasPortzel 3y ago

Semi-related, but Chrome won't use an SVG favicon if an ico favicon is present. (https://bugs.chromium.org/p/chromium/issues/detail?id=1450857 https://bugs.chromium.org/p/chromium/issues/detail?id=145085...) I ship a PNG favicon and an SVG favicon.

alwillis 3y ago

> All those Apple-specific icons with the different dimensions- really a pain for a casual web dev like me. You'll be glad to know you it's not like that anymore; you just need one Apple-specific icon now [1]: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> [1]: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs https://evilmartians.com/chronicles/how-to-favicon-in-2021-s...