undefined | Better HN

0 points_bxg16y ago0 comments

What I did for my SVGs was use CSS to actually change the internal fill/stroke colors directly. Unfortunately you can only do this if the SVG is inlined as markup (as opposed to shown in an <img> tag), but it's computationally much cheaper than using filters, because the latter operate on the image as a set of pixels rather than a set of shapes.

The logo design itself is really slick, though!

0 comments

wlesieutre6y ago

Ooh, that's an interesting idea that I hadn't considered! My page is pretty computationally lightweight to start with (no 3rd party javascript) but if I'm ever in the mood for some unnecessary optimization that sounds like a fun one to experiment with.

Trade-off is slightly more data to send with each page, since you have to inline the SVG rather than having it cached after the first load. But it's a whole 2kb and could probably be smaller if I wanted to look into SVG optimization.

_bxg1OP6y ago

I've had CSS filters alone cause noticeable lag on certain machines in the past; they can really pound the GPU. That was a few years ago though, and on a bigger image. Also, I think I was using a blur filter, which is much more intensive than a simple color filter. So probably still not worth worrying about :)

j / k navigate · click thread line to collapse

0 points_bxg16y ago0 comments

The logo design itself is really slick, though!

0 comments

wlesieutre6y ago

_bxg1OP6y ago

j / k navigate · click thread line to collapse