3 ms·
If you want your site's CSS to influence anything inside the SVG (color, etc) you'd have to do it inline, but I'd always go for background-image first.
by karlshea 4y ago
If you want your site's CSS to influence anything inside the SVG (color, etc) you'd have to do it inline, but I'd always go for background-image first.
- DaiPlusPlus 4y agoIt can still be done with some JS trickery: set the SVG file as background-image as norms, this will be the fallback in CSS, then during page-load use JS to read that same then-loaded SVG file into an in-DOM (but hidden) SVG element so the var() properties get resolved, then re-serialise the SVG element with computed style properties and set that as the page background via a data: URI - or preferably: an ObjectURL - the downside to this approach is you’d have to re-run the code every time you want to update it, which won’t work well for pages that update var() properties at 60fps…
- karlshea 4y agoThat's hilarious, I guess if it works...
- crazygringo 4y agoI had no idea you could serialize an SVG with computed properties. Huh! Very clever. That is a lot of trickery involved indeed, I applaud your ingenuity!