SVG Triangle of Compromise

Isn&#x27;t the fundamental issue here not so much anything to do with `&lt;svg&gt;`, but with the fact that you can&#x27;t easily include HTML snippets from other files in HTML? Like, the only reason not use the &lt;svg&gt; tag seems to be &quot;it&#x27;s not cached, and it contains a BUNCH of svg, and it has to be loaded with the main HTML page&quot;<p>Can&#x27;t you say that about anything in HTML? Like, imagine you had a huge `&lt;head&gt;` tag that contained a bunch of stuff, but it&#x27;s essentially the same (except for, like, the title) for all documents. Don&#x27;t you wanna do this?<p><pre><code> &lt;html&gt; &lt;head&gt; &lt;&lt;&lt; include head.html &gt;&gt;&gt; &lt;title&gt;Cool page!&lt;&#x2F;title&gt; &lt;&#x2F;head&gt; &lt;body&gt; &lt;svg&gt; &lt;&lt;&lt; include logo.svg &gt;&gt;&gt; &lt;&#x2F;svg&gt; &lt;&#x2F;body&gt; &lt;html&gt; </code></pre> Where the `&lt;&lt;&lt; include ... &gt;&gt;&gt;` is a pretend bit of HTML that makes the browser fetch that from somewhere else. A preprocessor, more or less.<p>I realize this is what templating languages are for, but if this happened on the HTML layer, the browser could do way better caching.

I like to use sprite files for conditional styling of icons, because using separate file for each state creates a visible delay on state changes, which doesn&#x27;t look great.<p>You can make them with &lt;defs&gt; and &lt;use&gt; tags pretty easily if you understand svg a bit. I usually bundle two-state icon into a single svg file, and then use `object-position: left&#x2F;right` property on the &lt;img&gt; tag to switch between the variants. You can also combine this with some simple css animations.

Another option would be to including SVG files from SVG elements, though the whole thing is a bit cursed. I&#x27;m not 100% sure how it plays with CSS and caching<p>Example: svg poster - includes svg diagrams - that include svg maps (maps are generated programmatically)<p><a href="https:&#x2F;&#x2F;kxygk.github.io&#x2F;imergination&#x2F;" rel="nofollow">https:&#x2F;&#x2F;kxygk.github.io&#x2F;imergination&#x2F;</a><p>Though.. if you open the SVG itself (in a separate window&#x2F;tab) most elements refuse to display for &quot;security&quot;<p><a href="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;wiki&#x2F;kxygk&#x2F;imergination&#x2F;agu2023-poster.svg" rel="nofollow">https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;wiki&#x2F;kxygk&#x2F;imergination&#x2F;ag...</a><p>It&#x27;s honestly an unreliable format for anything that&#x27;s mildly complex.. this poster will render differently in different browsers (and inkscape) and can&#x27;t be turned into a PDF consistently. It&#x27;s a mess

Actually, for interactivity you don&#x27;t <i>have</i> to use CSS but can also use SMIL animations to set SVG (or CSS) properties for things like clicking&#x2F;hovering, timed transitions, and even animation sequences. Never understood the CSS march of progress narrative when CSS just piecemeally incorporares concepts (paint servers, filters, etc) SVG had for 20 years now, and what&#x27;s so great about having those available in CSS&quot; wild unchecked syntax, especially when you&#x27;d need (or prefer) JS anyway. SVG at least can be targetted as a reasonable output format by vector drawing tools.

You can specify an svg file with the use tag like this: &lt;use xlink:href=&quot;&#x2F;your&#x2F;icons.svg#whatever&quot;&gt;<p>It pretty much solves the cache issue to me.

I’m not confident of what is meant by “stylable”, but I’m pretty sure it’s a misnomer.<p>If you mean applying static styles, you can do that with any form of SVG (that is, &lt;img&gt; qualifies as well).<p>If you mean <i>inheriting</i> styles from the parent document, you can only do that with inline SVG (that is, &lt;iframe&gt; <i>doesn’t</i> qualify).<p>But by the actual usage in the article (that it’s &lt;svg&gt; and &lt;iframe&gt; but not &lt;img&gt;), I think what is actually meant is <i>interactive</i>—that you can run scripts, have :hover styles, links, things like that.

Really interesting, am a big fan of the utility that SVG&#x27;s provide, an undersung hero of the web imo. One thing I&#x27;ve always particularly liked is you can wrap elements inside of an &lt;svg&gt; tag with an &lt;a&gt; tag, useful in the battle against a &quot;square&quot; web!

For the particular purpose mentioned in the article another solution is to use CSS&#x27; `mask-image`&#x2F;`-webkit-mask-image` and fragment identifiers in a single SVG that get swapped between hover&#x2F;regular states. Avoids any inline markup and as a bonus the element color is stylable via the parent page&#x27;s CSS, albeit one isn&#x27;t manipulating the inner SVG (though in the OP&#x27;s case it&#x27;s a static shape).

&gt; but might waste bandwidth if used for SVGs used often, like a logo or icon.<p>You can put SVGs into a &lt;TEMPLATE&gt;. I&#x27;ve used this for &quot;site and social icons&quot; to great effect.

Doesn&#x27;t the &lt;use&#x2F;&gt; tag tick all three boxes?<p>(the OP does mention the &lt;use&#x2F;&gt; tag in the final notes but only for in-document fragment references, not for remote URLs)

Actually there is very important 4th point about implementation (browser)<p>A few years ago a made a Monopoly-Deal-Clone game using mostly SVG + CSS + Svelte.<p>I was intrigued by the promise of SVG:<p><pre><code> - Loss-Less Scaling - Looks the same (or somewhat) the same on all browsers - Text would also scale and be readable up and down. </code></pre> Build playing cards on the fly with SVG elements dynamically (base-card-svg + text + icon&#x2F;image&#x2F;glyph)<p>All of these were never true-enough even for even a card-based game.<p>The SVG text never looked good-enough or readable at all sizes used. Depending on scaling the text&#x2F;icons and lines got blurred worse.<p>The &quot;fix&quot; for many of these were endless and browser version-dependent <i>magic-css</i> properties and values.<p>TL;DR I wouldn&#x27;t use SVG for more than 50% of your game or professional product that uses images&#x2F;visual-elements. Its not worth the pain and effort !

I like using external svg files for icons because they are tiny and cacheable. I get around the colorization problem by creating different icon files for each color. In practice, I only have a small number of colors to worry about. So:<p><pre><code> &#x2F;images&#x2F;icons&#x2F;9bac00&#x2F;door.svg &#x2F;images&#x2F;icons&#x2F;ffffff&#x2F;door.svg</code></pre>

Seeing that svg is text, enabling gzip compression on server will certainly help with reducing size; especially if using lots of inlined repeating svg elements (like icons, glyphs, etc). I also imagine SPA that compile to one index.js file can massively benefit from inlining svg + server compression (also, very cacheable!)

Something like this &lt;html-include&gt; element should be able to hit all three requirements, if you allow for JavaScript: <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;html-include-element" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;html-include-element</a>

All 3: Javascript.<p>Just load a .svg and put it into a &lt;SVG&gt;.

I can add:<p>In CSS: hold it as a background-image with the SVG in a data URL (requires some encoding).<p>Works for me.

Still waiting for HTML imports. And that work was discontinued...

In case the author reads this:<p>I would suggest editing your Venn diagram a bit so that it makes more sense. Something <i>like</i> this<p><pre><code> &lt;circle class=&quot;property stylable&quot; cx=&quot;190&quot; cy=&quot;145&quot; r=&quot;70&quot;&gt;&lt;&#x2F;circle&gt; &lt;text class=&quot;stylable&quot; x=&quot;150&quot; y=&quot;140&quot; fill=&quot;black&quot;&gt;stylable&lt;&#x2F;text&gt; &lt;circle class=&quot;property cacheable&quot; cx=&quot;310&quot; cy=&quot;145&quot; r=&quot;70&quot;&gt;&lt;&#x2F;circle&gt; &lt;text class=&quot;cacheable&quot; x=&quot;300&quot; y=&quot;140&quot; fill=&quot;black&quot;&gt;cacheable&lt;&#x2F;text&gt; &lt;circle class=&quot;property dimensional&quot; cx=&quot;250&quot; cy=&quot;260&quot; r=&quot;70&quot;&gt;&lt;&#x2F;circle&gt; &lt;text class=&quot;dimensional&quot; x=&quot;210&quot; y=&quot;280&quot; fill=&quot;black&quot;&gt;dimensional&lt;&#x2F;text&gt; </code></pre> This way, the region where your three circles overlap actually disappears, signifying that you can&#x27;t indeed get all three at the same time.

Or just use any modern DOM-manipulating JavaScript framework like React - in effect putting an `&lt;svg&gt;` tag in very cacheable JavaScript. &lt;div style={...}&gt;&lt;p className=&quot;...&quot;&gt;...&lt;&#x2F;p&gt;&lt;svg viewBox=&quot;...&quot;&gt;&lt;g fill=&quot;...&quot;&gt;...&lt;&#x2F;g&gt;&lt;&#x2F;svg&gt;&lt;&#x2F;div&gt;, whichever.<p>It&#x27;s a first class citizen, put it in a React Component, anything goes. Cacheable, stylable, and dimensional.