SVG not showing on iOS Chrome and Safari?

Question

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>

Have you checked this link http://tutorials.jenkov.com/svg/displaying-svg-in-web-browsers.html — Blisskarthik, Jul 09 '14 at 10:17
@Blisskarthik Yes I have, however another SVG in the header which uses the exact same tags etc is displaying fine :/ — Alsh, Jul 09 '14 at 10:50

Michael Mullany · Accepted Answer · 2016-06-01T04:39:33.357

1

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).

edited Jun 01 '16 at 04:39

answered Jul 09 '14 at 17:54

Michael Mullany

30,283
6
81
105

But this article from Chris Coyier states it's a useful technique for fallbacks http://css-tricks.com/svg-fallbacks/ I use the same technique on every SVG on the site, why would just this one throw a wobbler? - Thanks for taking your time to try and help :) – Alsh Jul 10 '14 at 08:34
Hmm...then that's clearly not it :) Can you post the source of your SVG image to see if there's something odd in the source? – Michael Mullany Jul 10 '14 at 16:22
The source is provided in the original question, unless you mean a live version in JSFiddle? :) – Alsh Jul 11 '14 at 16:17
I meant the source of footer.svg - it's possible there's something in the image content that's causing problems – Michael Mullany Jul 11 '14 at 22:25
Sorry, I should have been clearer. Not the HTML source of the footer. The SVG source of footer_logo.svg. – Michael Mullany Jul 14 '14 at 16:01
Oh my mistake! It's been a few days, I'll add it in now for you. – Alsh Jul 14 '14 at 16:10
Okay, here's a pastebin with the source, seems it's a png that has been saved out as an svg, could this be the problem? (I'm putting together a site designed in illustrator you see, made by a fellow colleague so I have had no idea what was truely a native SVG as I hadn't looked into the SVGs source code) - http://pastebin.com/LNp8BAPM – Alsh Jul 14 '14 at 16:13
Image displays fine for me on iOS Safari. I think you're going to have to reproduce this in a codepen or jsfiddle for debugging. It's not straightforward.. – Michael Mullany Jul 14 '14 at 20:24
Sorry for not getting back to this thread, I actually decided to just display it as a .PNG in the end, I see no reason why it wouldn't display as an SVG but anyway it's sorted now! Thank you for taking the time to try and help. – Alsh Jul 17 '14 at 15:17
3

Why did you mark Michael's answer as the solution & then state that it did not solve your problem? This still seems like an unresolved issue. – Crystal Miller Jun 04 '15 at 21:40

score 0 · Answer 2 · answered Mar 12 '15 at 11:21

0

The issue was that you had a PNG embedded/encoded within that SVG. The solution to fix would be to open it in a program like Adobe Illustrator and use the "Trace Image" feature which vectorizes it.

answered Mar 12 '15 at 11:21

Samuel

9
1

Hi, that wasn't the answer, it was missing a trailing at the end instead of just />. The .PNG is there as a fallback as demonstrated on CSS-Tricks https://css-tricks.com/svg-fallbacks/. Thanks for taking the time to try and help though! :) – Alsh Mar 13 '15 at 08:34
Oh I see. My bad, I had a similar issue and that was my solution. Good to know about the fallback. – Samuel Mar 13 '15 at 21:17

SVG not showing on iOS Chrome and Safari?

2 Answers2