Hacker News Reader

Comment by hunter2_ | Hacker News Reader

Can an SVG (or similar) change design at different scales? It seems like at least a good portion of the challenges described in this article would be solved if so.

And it seems like a solution to excessive aliasing (in the sense of a dark thin line rendering as a not-so-dark double-wide line) could be to round the desired size down to the nearest known-good size and pad the edges with negative space.

View on HN

CSS in SVG supports media queries[0] so it's entirely possible to change the display of elements depending on the size of rendered image. You could have fills, stroke widths, or whole elements change properties at particular size break points[1]. At small sizes you can use thin strokes and solid fills and larger sizes thicker/varied stroke widths and gradient/pattern fills.

[0] https://www.sitepoint.com/using-svg-with-media-queries/

[1] https://css-tricks.com/svg-properties-and-css/

Although this may seem like the right way to handle lower resolutions it suffers from the fact that, in practice, you will be turning a whole bunch of css levers and knobs to get to get a small number of pixels to turn the right colour. It’s a complicated and roundabout way of doing things. It would be better just to have an svg for 64px and above and a set hand drawn png images for the smaller icons. No fancy new image format, maybe just a decent naming convention or zip file per image set. Should only be 64px.svg 32px.png 24px.png and 16px.png. You may even be able to skip the 24px version.

Using media queries in SVG isn't just about getting a few pixel colors correct. In terms of total expenses effort, an SVG that looks right at small sizes with media queries isn't much more effort than making raster versions of the graphics.

A single good SVG can obviate your small raster images and the 2x and 3x versions you might need for HiDPI screens. You can also get automatic handling of dark mode with no changes to your page's CSS.

There's work involved but the flexibility is pretty awesome.

That’s a good point you made about theming.

SVGs can respond to their size, yes -- essentially the same way websites can -- see https://codepen.io/pjwdev/pen/dypVLgg

In addition, vector-effect="non-scaling-stroke" allows you do declare that a line is [eg] 1px thick, regardless of the image size.

Snapping to sizes would be possible, but not straightforward, until CSS supports calc(round()) https://www.w3.org/TR/css-values-4/#round-func

Reply on news.ycombinator.com