Frontend

So Safari doesn't support image-rendering pixelated on SVG <image> tags. You try to scale up a tiny pixelated image it becomes blurry. Works everywhere else. I figured out a workaround. Draw the tiny version to a canvas, then draw that canvas to a bigger canvas using ctx.imageSmoothingEnabled = false. Works!

Currently deploying. Unofficial head platypus of /lp 

Staff Eng at Iron Fish 🐟 • Building BlockSocks 🧦 • Denver, CO 📍

Well kind of. My use case was creating a dynamically generated character referencing a raster sprite sheet via svg use. Different layers made up different attributes. The sprite sheet is tiny so it can be stored on the blockchain. Usually you can scale up pixel art with the image rendering attribute, but not in Safari.

Wow, blurry vector images?! What the absolute hell.

It's so true. I've told people this exact thing.

CSS-in-SVG seems like a perfect topic for a future Interop test suite.

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

CSS-in-SVG seems like a perfect topic for a future Interop test suite.

https://webkit.org/blog/14955/the-web-just-gets-better-with-interop/