Hacker News new | ask | show | jobs
by chrismorgan 695 days ago
It can’t be that, because you can do that in any SVG document, regardless of technique.
1 comments

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.
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.
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?

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.
So, I think that's what everybody else has been saying as well.