3 ms·

"Fonts" appears frequently in this piece, without noting that the design actually changes at different scales. This is more than hinting. When I walk into a ha

"Fonts" appears frequently in this piece, without noting that the design actually changes at different scales. This is more than hinting. When I walk into a hardware store planning to appropriate some part for a different purpose than intended, my first question is "who has this problem?" I've been exploring mind-mapping software. It's astonishing how primitive the namespace handling can be. Shades of the flat file system from a 1984 Macintosh (mine had an early serial number). Same question: Who understands this issue? Programming language designers. Everyone else is just guessing. Fonts change design at different scales.

hunter2_ 6y ago
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.
- giantrobot 6y ago
  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/ https://www.sitepoint.com/using-svg-with-media-queries/ [1] https://css-tricks.com/svg-properties-and-css/ https://css-tricks.com/svg-properties-and-css/
  - davidhyde 6y ago
    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.
    - giantrobot 6y ago
      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.
      - davidhyde 6y ago
        That’s a good point you made about theming.
- systoll 6y ago
  SVGs can respond to their size, yes -- essentially the same way websites can -- see https://codepen.io/pjwdev/pen/dypVLgg 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 https://www.w3.org/TR/css-values-4/#round-func

hunter2_ 6y ago

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.

giantrobot 6y ago
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/ https://www.sitepoint.com/using-svg-with-media-queries/ [1] https://css-tricks.com/svg-properties-and-css/ https://css-tricks.com/svg-properties-and-css/
- davidhyde 6y ago
  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.
  - giantrobot 6y ago
    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.
    - davidhyde 6y ago
      That’s a good point you made about theming.
systoll 6y ago
SVGs can respond to their size, yes -- essentially the same way websites can -- see https://codepen.io/pjwdev/pen/dypVLgg 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 https://www.w3.org/TR/css-values-4/#round-func