Alzor Alzor - 6 months ago 54
iOS Question

SVG not showing on iOS Chrome and Safari?

For some reason one of the SVGs I have in my webpage will not render on iOS Chrome or iOS Safari. Another SVG I use for the main logo renders absolutely fine and they use the exact same code bar the file names/paths. The element is there in inspector to the correct size and width but the image itself is non-existent. It also renders just fine in normal browsers, even when scaled down to a mobile like resolution.

Here's the code for the SVG

<div class="col-2 footer-logo">
<a href="#" title="foo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
<image xlink:href="img/footer_logo.svg" src="img/footer_logo.png" width="234" height="60"/>
</svg>
</a>
</div>


And the accompanying SCSS

.footer-logo{
padding-left: 8em;
a{
display: inline-block;
width: 235px;
height: 61px;
}
}

@media screen and (max-width: 1140px){
footer{

.footer-logo{
padding-left: 0;
margin-top: 2em;
}
}
}


EDIT: Footer code

<footer class="col-4">
<div class="container">
<nav class="col-4 inner-footer">
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
</nav>
<hr class="col-4">
<div class="col-2 copyright">
<p>foo.</p>
<p><a href="#">foo</p>
</div>
<div class="col-2 footer-logo">
<a href="#" title="foo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
<image xlink:href="img/footer_logo.svg" src="img/footer_logo.png" width="234" height="60"/>
</svg>
</a>
</div>
</div>
</footer>

Answer

The SVG image tag does not support "src" as an attribute and including this is probably triggering fall-back behavior in desktop browsers which are trying to render this as an HTML <img> tag.

Update: The OP had actually forgotten to close his <image> tag, but corrected the mistake in his posted code, so you can no longer see the original problem. This question and answer should be ignored as no longer valid for any purpose (except perhaps anthropological).

Comments