What could be the reason for not drawing svg images?

Question

css

Insert svg (jade-pug)

li.mobile-categories__item
    span.mobile-categories__icon
            include ../img/categories/man.svg
    span.mobile-categories__text Волосы – Мужской зал

Some svgs are not fully rendered, which could be the reason. svg code not rendering

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.91 16.71"><defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}.cls-2{fill:#231f20;}</style></defs><title>manРесурс 1man</title><g id="Слой_2" data-name="Слой 2"><g id="Layer_1" data-name="Layer 1"><ellipse class="cls-1" cx="6.02" cy="10.69" rx="5.5" ry="5.54" transform="translate(-5.8 7.39) rotate(-45)"/><rect class="cls-2" x="8.73" y="3.43" width="8" height="1" transform="translate(0.95 10.15) rotate(-45)"/><path class="cls-2" d="M11.94,0V1h.13a1.82,1.82,0,0,1,.35,0h3.49V5h1V0Z"/></g></g></svg>

Answer 1

Are you sure the icon doesn't have overflow:hidden set?

Answer 2

Remove extra tags from code. Folders and more. And it is not advisable to use svg with transforms (transform="translate(-5.8 7.39)rotate(-45)"). They don't work everywhere.
This is how it should work:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.9 16.7"><style>  .cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;}.cls-2{fill:#231f20;}</style><ellipse class="cls-1" cx="6" cy="10.7" rx="5.5" ry="5.5" transform="translate(-5.8 7.39)rotate(-45)"/><rect class="cls-2" x="8.7" y="3.4" width="8" height="1" transform="translate(0.95 10.15)rotate(-45)"/><path class="cls-2" d="M11.9 0V1h0.1a1.8 1.8 0 0 1 0.4 0h3.5V5h1V0Z"/></svg>