I was quite happy to find this project and gave it a try recently.
However, in my short trial, I could not draw a simple, pixel-aligned rectangle, with a 1px border. I think this should be quite a crucial feature for a UI designer tool. Even looking at the UI of this forum, there are 1px borders everywhere, which I could not reproduce in Penpot. I don’t mean the snap-to-pixel feature, which is useful, but the rendering.
All my tries looked somewhat blurry, like this:
This is at 100% Penpot canvas, 100% browser scaling, 100% desktop scaling, 1px border, position and size rounded to integers. I also tried offsetting by half a pixel, which didn’t help.
Hi! I’m also new with Penpot. If it’s of any help I just did a button with a 1px border, solid, center; the layer normal and the border color set to 100%
This is a PNG export from Penpot:
When exported it as SVG it ends up crisp as one would expect! too bad I couldn’t insert it here.
Well, yes, the export is fine. But it’s blurry while you are working on it, so you never know if you actually messed up something, or it’s just the preview. It’s also blurry in the interactive preview.
Hello. I’m not sure I fully understand the problem. When the layers are rendered on screen, and also when exported to PNG, some level of antialiasing is applied, to smooth borders and avoid pixelation. If the component is very small, perhaps the antialias effect is more noticeable.
This depends mainly of your browser rendering the svg component (for exporting we use a headless Chromium browser in the server).
For small components, you can reduce the blur effect by zooming in, or by selecting a big scale (e.g. 9x) when exporting. Do you see an improvement if you do this?
It seems that when I scroll or zoom the canvas, Penpot recomputes the svg viewBox and does not round it to integers. This results in the entire design not being pixel-aligned and 1px lines become anti-aliased to 2px-wide, blurry lines.
If I round the viewBox coordinates, the design becomes sharp again.
Thank you. A pixel accurate rendering at 100% would already be a big improvement in my opinion. You might also do it for multiples, like 200% or 400%. But it’s clear that something like 66% or 150% will not align with the pixel grid.
On that note, I just noticed that I cannot actually set an exact scale of e.g. 200% or 400%. But this is less of an issue for me personally.
too bad I couldn’t insert it here.