How to style SVG with CSS?

Question

css

Hello.
The question is the following. For example, there is a square in the form of SVG. It is white, located in a specific block:

<div>
   <div class="square"></div>
</div>

and loaded as a background via CSS:

.square {
    background:url('square.svg'); /* квадрат белого цвета */
    }

How to make it so that if the parent block has a certain class, then square.svg changes color:

<div class="black">
   <div class="square"></div>
</div>

.square {
    background:url('square.svg'); /* квадрат должен стать черного цвета */
    }

Type entry:

.black > .fil { /* .fil — это класс присвоенный в самом файле svg (<path class="fil" />) */
    fill:black;
    }

Does not help.

Answer 1

To style an SVG with CSS, the SVG must be inserted as an HTML element in that document. In your case:

<div>
   <svg class="square black">
       ...
   </svg>
</div>