svg not showing in Chrome browser

Question:

I want to add svg on the site, for this I wrote

<img src="images/use_maximum.svg" alt="" class="img-responsive"/>

The problem is that in Firefox and IE this construction works, but not in Chrome. In the browser, the place of the picture is empty, although there is an element in the DOM. Tell me how to fix it.

Answer:

If you want to really get help in solving your problem, then you need to give the maximum possible amount of information. First of all you need the code for your SVG image.

  • For now, we can only guess, since you have shown one of the many ways to add svg to HTML. And this method works in all browsers including IE11 , when finding the svg image, both locally and remotely.

Example of loading external svg

<img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/WikiProject_Zoo_Logo.svg" alt="" class="img-responsive"/>
  • If your local svg file is normally displayed in browsers, but is not visible in your HTML page, then maybe you should look for errors in the layout?

Below is an example of a responsive svg

div .img-responsive{
width:100%;
height:100%;
}
<div class="img-responsive">
<svg viewBox="0 0 852 438">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/WikiProject_Zoo_Logo.svg" alt="" class="img-responsive"/>
</svg>
</div>  
Scroll to Top