Hacker News new | ask | show | jobs
by chrismorgan 695 days ago
I’m not confident of what is meant by “stylable”, but I’m pretty sure it’s a misnomer.

If you mean applying static styles, you can do that with any form of SVG (that is, <img> qualifies as well).

If you mean inheriting styles from the parent document, you can only do that with inline SVG (that is, <iframe> doesn’t qualify).

But by the actual usage in the article (that it’s <svg> and <iframe> but not <img>), I think what is actually meant is interactive—that you can run scripts, have :hover styles, links, things like that.
2 comments
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.

link
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
parasti 695 days ago
It's talking about styling properties of SVG elements (e.g. path, circle) via CSS. Not about styling the svg element itself.
link
chrismorgan 695 days ago
It can’t be that, because you can do that in any SVG document, regardless of technique.
link
Lvl999Noob 695 days ago
It is actually that. If you are including an svg using <img> then you can no longer, say, change the stroke color. It also does not inherit your css from the rest of your site even on first load. Your svg is treated like any other regular png or such.
link
chrismorgan 695 days ago
Please review my earlier comment. “Styling properties of SVG elements via CSS” is, on reflection, slightly ambiguous, but largely refers to static styling, which you can do anywhere. If you’re talking about changing things, at runtime, you’re talking about the SVG being interactive, not stylable. And heritability is, as I remarked, another different thing, which doesn’t work for <iframe>, so that can’t be what it’s talking about.
link
asimpletune 695 days ago
Very interesting, so dynamic styling are things that are set with a script or with user initiated actions, like :hover.

Can you give an example of statically styling an element of an SVG image, that’s linked in an html document via the img tag?

link
chrismorgan 695 days ago
I’m not sure if I understand your request.

What you can do is just the totally basic style element or attribute:

  <svg …>
    <style>path { fill: red }</style>
    <path d="…" style="stroke: green" />
  </svg>
But I’m not saying you can apply styles to the inside of an image from outside; that, as I have remarked, is a different matter, about heritability—you can’t do that with any technique but inline SVG. Not <img>, not <iframe>, because it’s not cross-document.
link