I prefer SVGs as well now. You can style + animate them with CSS, it's easier to see what changed in your Git diffs and you can quickly edit them in an SVG editor if you need to.

Do you know any way to style them using CSS without using JS? (and while keeping them cacheable)

Unfortunately no but would love to be proved wrong. You can inline them server-side but then they're not cacheable. There's SVG filters but they're not widely supported yet. I'm curious of the reason why this is so difficult actually (security?). What's wrong with using JS?

I already use svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/

I block it by default, so that wouldn't work. I would love to make web pages that I myself could read/see if they were made by someone else.

Fair enough. There's so much JS only functionality now though that I can't see how you can avoid it when developing a complex website. You find you can do the majority of things you want online with JS disabled?

Not all websites are complex though. There should be little need to use scripts on a simple blog, for example, but I've seen way too many times that you'll end up with a blank screen without scripts, even though the text is already there in the DOM.

Consider a middle ground. Check out uMatrix, it allows you to block third-party js by default while allowing js from same site as well as making it simple to permanently allow selected domains for one or all others.

I already use uMatrix, but why should I trust 1st party scripts. I regularly visit less-trusted sites or sites that I never visited before, and I wouldn't want them to be able to just execute Turing-complete scripts with access to potentially a lot of information on me (only just the browsing history would be a lot) on my machine or that can trivially fingerprint me.

Plain CSS works doesn't it? [0]

[0] https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SV...

That works because the SVG element is inline with the document. It doesn't work if you use an external link to the SVG document. The standard workaround is to use JS or server-side processing to inline the SVG elements directly into your HTML document.

Okay, here's a better example. [0]

That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on.

    <?xml-stylesheet href="sp-styles.css" type="text/css"?>

However, still possible to use CSS, rather than JS, without inlining.

[0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...

So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.

> So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font).

That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that.

> To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one?

Not necessarily. CSS cascades, and SVG can embed SVG. (Edit: I'm not actually sure about the browser support here. Do nested SVGs get to inherit from each other? Is that the same for all browsers? It'd require a bit of experimentation.)

So potentially, you could have a wrapper document that sets an ID or class that corresponds to how you want to change it, and then your base image linked within the wrapper.

The base image would cache, as would the base CSS file, however you could still apply changes.

A bit clumsy, but still allows you to avoid JS or in-lining, if that is what you want.

Of course, the wrapper won't cache, but it should be a very, very small overhead.

If included via svg:use the style gets inherit and you won't need JS. The icons can still be bundled as symbols in one svg, which is cacheable.

You mean more than (stroke|fill)(Color|Opacity)?

Always trade offs, that said I favour the font approach since the download is still relatively tiny and font-face is better supported in the wild.

Webfonts use WOFF2 which use Brotli compression which is more efficient than SVG.

Shouldn't SVG be compressed in the same way as other text contents like HTML and JS? Woff opts out of this behavior, but it's standard with all web servers.