img src SVG changing the styles with CSS

Question

html

css

.logo-img path {
           


        

Answer 1

The main problem in your case is that you are importing the svg from an tag which will hide the SVG structure.

You need to use the tag in conjunction with the to get the desired effect. To make it work, you need to give an id to the path you want to use in the SVG file to then be able to retrieve them from the tag. Try the snipped below.

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

Note that you can put any URL before the fragment # if you want to load the SVG from an external source (and not embed it into your HTML). Also, usually you do not specify the fill into the CSS. It's better to consider using fill:"currentColor" within the SVG itself. The corresponding element's CSS color value will then be used in place.