SVG Triangle of Compromise

XSLT is an XML transformation language, but HTML is not XML. Does XSLT work on regular HTML?

> though they have no deferred fetch

Also, at least back when we excised the last bits of it from our old codebase, no useful caching of either stylesheets or included resources (other stylesheets), so if you tried to mix client-side processing with HTTPS you were in for quite some pain unless you had a fast, very low latency, uncongested, link.

One reason that this is slightly more complicated than it appears is that you have to decide what ignore when doing the inclusion. Including an image will not override anything specified in the "parent" HTML, but including HTML might result in conflicts. Who wins, who loses, etc. etc.

It had breadcrumbs back in 2004 (e.g. those neat "valid XHTML 1.1" badges from W3C back when badges on your website were cool, and e.g. W3 Schools actually put it above javascript[0]. XHTML was supposed to be the next big thing). These days it seems that browser vendors just don't like it for whatever reason (tinfoil hat on: because almost all of them benefit from javascript-based spyware, and so prefer a world where even static pages require javascript to be enabled to show anything), and so documentation acts like it is some legacy thing instead of what it is: a perfect fit for the 99% of websites that need some templates and don't have much dynamic interaction.

Other cool web tech that should have "won": XForms[1]. Imagine if HTML forms had things like declarative data-binding (with XPath expressions! Imagine jq built directly into the browser 20 years ago and usable by forms) and types/constraints/validation built right in. This would be 1000x more useful for your average web dev than something like USB or GPU support or Wasm. You'd be able to make complex interactive forms in much the same way that you do a spreadsheet.

[0] https://web.archive.org/web/20040727061732/http://www.w3scho...

[1] https://www.youtube.com/watch?v=2yYY7GJAbOo

A server side include wouldn't fix this problem because the SVG would be inlined everywhere. That defeats caching by duplicating the content.

You mean <img>. <img> is not stylable.

Huh. I'm the OP, and I do have a dark mode that respects `prefers-color-scheme: dark` -- or at least, it works for me (tm). Would you mind sharing details about your dark mode theme? Is it a third party extension or maybe a browser I haven't tested?

When my dark theme is enabled

Like it injects/modifies the styles of pages willy-nilly? The beauty of browsers is that you're fully able to do that, but seems like a great way to just have a broken browsing experience all the time...

The page is already pretty dark!

Darkreader does a really good job of preserving visibility in most cases, and is available on both mobile and desktop browsers. Definitely reconnect checking it out.

Without side projects to avoid deadlines on now-forgotten odious tasks, we’d all be living in grass huts.

Hey, I wrote a small blog post on <defs> and <use> and how to optimize icons using them: https://www.prudkohliad.com/articles/reuse-svg-icons-2023-08...

It's something like this (I just quickly took this from my project, not sure if it works in this form now). This one uses the defs/use trick to reuse a path, but you can also just put two different svgs next to each other and not use the defs/use at all.

The icon:

  <!--   the icon width is 2x wider, to accommodate both 26x26 variants  -->
  
  <svg xmlns="http://www.w3.org/2000/svg" width="52" height="26">
    <defs>
      <!-- here's the icon defined, you can basically put anything here and
           mark it with an id (you can even use another svg) -->
      <path id="icon" path="..."/>
    </defs>
  
    <!-- first variant with no fill -->
    <use stroke="#fff" href="#icon"/>
  
    <!-- second variant with fill, shifted by 26 (dimensions of the icon) -->
    <use x="26" fill="#00ACA0" stroke="#00ACA0" href="#a"/>
  </svg>
  

    <!-- make sure you use dimensions of the single variant -->
  <img src="icon.svg" width="26" height="26" class="hover-icon">
  

  .hover-icon {
    /* make sure that only first block of the image is visible */
    object-fit: cover;
    object-position: left;
  }
  .hover-icon:hover {
    object-position: right;
  }

Boxy SVG editor comes with built-in support for creation and editing of SVG icon sprites.

You can play with a sample SVG sprite on https://boxy-svg.com/#demo-symbols. Individual icons are shown under "Defs Panel -> Symbols". To edit an icon just double-click its thumbnail. To make part of an icon recolorable, select that part and then click "Fill Panel -> Paint -> Type -> Inherit".

You could then create separate symbols which contain a recolored instance of the original symbol. The underlying markup will look something like this:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <symbol id="blue" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
      </symbol>
      <symbol id="green" viewBox="0 0 100 100">
        <use width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
      </symbol>
    </defs>
  </svg>

   <img src="sprite.svg#green">

You might want to check out old tech articles, as sprites were a very common approach from roughly 2005-2012-ish. Lots of interesting little techniques.

Well, there's still a compromise to be fair. It's defintely more work to manage these sprites and it's especially annoying when there's more than one state. I think it's possible to write some tool to automate it, but I haven't found one.

> who would make 1e9 or 1e-9 wide viewBox in real world anyway?

Back in about 2008 I made an SVG diagram showing the height of various satellite orbits above earth, specifying the SVG at 1:1 scale - making the image 84,000 km wide.

Sadly a load of file viewers choked on it, so I had to settle for a downscaled version. It seems the 'scalable' in 'scalable vector graphics' only goes so far.

Also, browsers seem to render svg circular arcs using bezier curves. At high zoom levels there can be quite a discrepancy between the actual curve (drawn using lots of straight line segments, say) and what the browser renders for a circle.

(Missed edit:) I even asked about formalized precision SVG limits on SO: https://stackoverflow.com/q/78692079/540955

It can’t be that, because you can do that in any SVG document, regardless of technique.

I return to what I said in my comment.

For your first example:

If you’re talking about using the prefers-color-scheme media query, you can do this with any technique—<img> qualifies as well. That’s applying static styles.

If you’re talking about things like styling based on an <html class="…"> value, <iframe> doesn’t qualify: that’s inheriting styles from the parent document and you can’t do it.

For your second example: that’s about whether the SVG is interactive.

However I look at it, “stylable” is simply the wrong word.

Unless I'm missing something, svg is an xml-based vector image format, being sent by the server as text (xml) and rendered by the user's browser.

It requires javascript to instantiate the actual elements. Otherwise, none.