Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

5
  • 1
    Tried this, it doesn't work, like many of the other answers already say. You can't apply styling to classes inside the SVG.
    – Frans
    Commented Aug 14, 2020 at 11:52
  • @Frans are you including a svg as a file or do you have your svg source like in the example above? Because I have in mind that this depends on how you use svg. Including by img wont work.
    – Dwza
    Commented Aug 14, 2020 at 12:25
  • Exactly, it only works if you inline the SVG in your HTML. But that is not what your example does. It uses an external (i.e. not inline) SVG. There seems to be no way to style an external SVG with CSS in your HTML.
    – Frans
    Commented Aug 15, 2020 at 14:28
  • 1
    sure you tried my example correct? i mean, included a css file from external ? <?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
    – Dwza
    Commented Aug 15, 2020 at 16:36
  • 1
    OK, now I see, you have an <?xml-stylesheet ... ?> declaration inside your SVG. I guess that would work. It's similar to other answers recommending a <link rel="stylesheet" ... > inside the SVG. It also has the same problems (you need to update every single SVG to point to the stylesheet, and any change in name or location of the stylesheet means having to change all the SVGs again).
    – Frans
    Commented Aug 16, 2020 at 17:28