4 ms·

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

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.

parasti 2y ago
It's talking about styling properties of SVG elements (e.g. path, circle) via CSS. Not about styling the svg element itself.
- chrismorgan 2y ago
  It can’t be that, because you can do that in any SVG document, regardless of technique.
  - deleted 2y ago
    [deleted]
  - Lvl999Noob 2y 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.
    - chrismorgan 2y 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.
      - asimpletune 2y 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?
        chrismorgan 2y 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.
        asimpletune 2y ago
        So, I think that's what everybody else has been saying as well.
rhdunn 2y 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.
- chrismorgan 2y 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.
  - rhdunn 2y 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.
    - chrismorgan 2y 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.

parasti 2y ago

It's talking about styling properties of SVG elements (e.g. path, circle) via CSS. Not about styling the svg element itself.

chrismorgan 2y ago
It can’t be that, because you can do that in any SVG document, regardless of technique.
- deleted 2y ago
  [deleted]
- Lvl999Noob 2y 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.
  - chrismorgan 2y 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.
    - asimpletune 2y 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?
      - chrismorgan 2y 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.
        asimpletune 2y ago
        So, I think that's what everybody else has been saying as well.

rhdunn 2y 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.

chrismorgan 2y 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.
- rhdunn 2y 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.
  - chrismorgan 2y 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.