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.
It 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…
