5 ms·

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?

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?