Design

Anyone understand why the SVG version of the arch logo breaks at small pixel sizes on web? It gets "ghost lines".

Anyone understand why the SVG version of the arch logo breaks at small pixel sizes on web? It gets "ghost lines".

https://www.figma.com/file/jvfG3WFpdCrNnAZaQg85Yt/Arch?type=design&node-id=0%3A1&mode=design&t=a2y77YW4g9bJ60Tm-1

It's because the SVG itself has a width and height, but that doesn't always correlate to the width and height of some of its elements

Solution here in the repo for the new(wip) Farcaster Kit docs:

It's because the SVG itself has a width and height, but that doesn't always correlate to the width and height of some of its elements

Solution here in the repo for the new(wip) Farcaster Kit docs:

https://github.com/dylsteck/farcasterkit-site/blob/main/components/logo/logo.tsx

^ the SVG in that logo.tsx file is the Farcaster logo, but set-up to resize properly when you pass the component the width and height as props