Hacker News new | ask | show | jobs
by rhdunn 695 days ago
Stylable here means applying styling from the HTML files CSS file to change the colour, etc. For example:

1. changing the foreground and background of the SVG based on the web page theme or light/dark mode;

2. using the SVG in a link or button and styling the image according to the hover, pressed, etc. state, e.g. when providing custom checkbox/radio/toggle buttons.
1 comments
chrismorgan 695 days ago
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.

link
rhdunn 694 days ago
CSS stands for Cascading Style Sheets. Therefore, stylable is a suitable word for this -- i.e. having the SVG pick up the HTML document's styles.

Interactivity is different -- i.e. the SVG using JavaScript to be interacted with.

For the second example, it's just applying CSS styling:

    input:checked > svg { color: red; }
    button:hover > svg { color: teal; }
No need/use of JavaScript.
link
chrismorgan 694 days ago
Yet again I direct your attention to the ticks and crosses. In the article, <iframe> has been marked as stylable. But if you’re talking about controlling the styles of the SVG from the parent document, you can’t do that. So the original article cannot be using the term in the way you are.

What CSS stands for is quite immaterial in the definition of “stylable”. Especially the C. Cascading says nothing about cross-document application.

And when I speak of interactivity, I believe I’m using a term that has been employed in some of the specs and implementations to control most or all of the distinctions I’m talking about, though I have a vague feeling there was some other magic term too that I just can’t remember. I can’t trivially find the relevant definition in the SVG spec, and the HTML Standard these days says that <img src> refers to a “non-interactive, optionally animated, image resource that is neither paged nor scripted”, admittedly separating interactivity and scripting. Interactivity includes things like links and hover states.

link
rhdunn 694 days ago
The iframe section states:

> To solve this, we could create an HTML file that contains only the <svg> tag, and reference it on the site via an <iframe>

Therefore you can attach the stylesheet containing the styles for the button/checkbox/etc. in the head of that document.

I don't know exactly how you would do this (w.r.t. propagating hover, etc. state) as I've used the embedded SVG element approach when I need styling.

link