0

I'm trying to set fill and stroke to an .svg file which I refer on my .html file through <img>.

I am able to change it the way I want with no problem as long as it is an inline <svg> but not an <img>.

I read here in a question that deleting the hardcoded fill/stroke should make my css take effect but it doesn't.

What can I do with css?

Here's a JSFiddle with all relevant code.

XanderTEM
  • 81
  • 10
  • 1
    Global CSS can't style IMG content – Danny '365CSI' Engelman Jun 27 '22 at 13:21
  • What are my options then? This is the logo, so I think it is better as an `` with `alt=` and all other properties and behaviors. – XanderTEM Jun 27 '22 at 13:35
  • @XanderTEM your only option is to include the `...` in your code -- why would you need an alt tag if the SVG is inline? It will never fail to load – Simp4Code Jun 27 '22 at 13:40
  • Unless you want to use CSS filters, then refer to this https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element – Simp4Code Jun 27 '22 at 13:42
  • 2
    Since your SVG files are external (because you load them in an IMG tag); load the SVG source using a native Web Component; and inline them; with the added bonus to _scope_ your CSS in a shadowDOM; [see this Dev.to blog post I wrote](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd) – Danny '365CSI' Engelman Jun 27 '22 at 14:37

0 Answers0