SVG file is not showing up in the mobile devices, but it is displayed under google chrome browser

Question

SVG file is not showing up in the mobile devices, but it is displayed under google chrome browser.

  <li>
    <svg class="listnew" xmlns="content/assest/airplane-mode-on.svg"    
    xlink="content/assest/airplane-mode-on.svg" width="100%" height="1000px"
    viewBox="0 0 219.5 66">
   <g>
   <img src="content/assest/fully-wi-fi-connected.svg"  width="40%"   
    height="100px;" />
    <p class="text-content">4 Active Apps</p>
   </g>

   </svg>

    </li>

Answer 1

There are a bunch of things wrong with your sample.

1. <img> is not a valid SVG element. SVGs use the <image> element.

2. <p> is not a valid SVG element. It is HTML only. If you want to put text in your SVG, you need to use the <text> element.

3. In <image> elements you reference the external file with the xlink:href attribute. src is an HTML thing.

4. You have an invalid height attribute in your image. Remove the semicolon.

   <image xlink:href="content/assest/fully-wi-fi-connected.svg" width="40%" height="100px" />
   

5. Lastly your xmlns and xlink declarations in your <svg> tag are wrong. You can't choose what to put for those. They are hardwired to a specific value. Although it looks like a URL it is actually not. It is a string constant. They have to be:

   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"