 Playbit uses a resolution independent UI and we are thinking about how to represent UI graphics (think: icons) for the computer. A key challenge with truly resolution-independent graphics is how to maintain sharpness (pixel alignment) where necessary (like a border or ruler) while at the same time keep the general shape & identity of a graphic. Is there a vector image format out there that fits the bill? Ideally we would use an existing format rather than inventing our own. Any ideas? 14 comments
@triple It's a potential solution. Ideally we can use the same render pipeline for both text and icons. Since icons can have arbitrary colors, gradients, stroke etc. we'd need to support color. Maybe via COLR https://learn.microsoft.com/en-us/typography/opentype/spec/colr @rsms yeah, font rendering is basically the only place this exists. Font hinting can be applied to nearly arbitrary graphics, but it does work best on "text-like" stuff. TTF hinting would be able to express the constraints on your example logo shape pretty well - it can do things like ensure that the whitespace gaps are an integer number of pixels, and that both gaps are the same width, align the tops and bottom of lines to pixels while constraining the width of line, etc. @evanw didn't you think about a format kind of like this a few years ago? Did those explorations lead to anything interesting? @evanw Interesting! Thank you Evan. Yeah, we likely need masking as well. We might just end up with something internal like VectorDrawable or Skia's wire format and support some form of SVG metadata. Would be neat to use the same pipeline for both fonts & icons. Apple has done some (proprietary) work on something similar: https://developer.apple.com/sf-symbols/  @rsms My immediate thought regarding the last bullet point about "no pre-processing needed for GPU rendering" is that this seems like a strong constraint compared to existing formats. Pre-tesselation would go against the resolution independence but you could consider constraining the shape components, e.g. generalized trapezoidal components meaning that each shape component is bounded by a specified left path segment and a right path segment? @rsms That should make the shape rendering simpler and faster without a need for pre-processing. You can render directly on the GPU from raw paths too but it would be some combination of more complex and more expensive, I expect. For people who don't want to do their own shape rendering, it also seems like a relevant concern is how easy it would be to feed the format directly to existing path renderers like Skia without having to any work on the user's end. @pervognsen Interesting ideas! Thank you. We have very similar challenges with text rendering and we are planning (not implemented) to take an approach like this with "coverage masks." This implies a pre-processing step of calculating the coverage mask from some vector information, giving rasterization some leeway for positioning  IMO you can't have both true resolution independence and pixel perfection. You have to pick one or the other. The closest you can get is by drawing your icons on the smallest grid possible, and then making sure you only scale them at integer factors. You can try somehow nudging outlines into the grid automatically upon rendering, but I'm 200% sure this will produce nasty results in about a zillion edge cases. |
Gregory's Server
For example, imagine a company logotype being scaled to some arbitrary size. It needs to still look like the logotype but key elements like fine stroke need to be sharp.
Fonts is another example of this problem, where there are several solutions. The most significant "solution" to make sure text is legible is to align the baseline (the relative zero point) to pixels. This works for text but does not work so well for arbitrary graphics.