1

I can get SVGs to load fine… but when content is loaded via AJAX they load blank.

This is specifically happening for me in Chrome (tested on macOS). Firefox and Safari work fine (tested on macOS).

I think this might have something to do with file references, although I've used root for SVG file references ("/").

How can I fix this so SVGs that are loaded via AJAX work in Chrome?

Here is a test case:

https://jaygeorge.co.uk/sandbox/infinite-scroll-with-ajax-and-icons/

When you land on the page please scroll to trigger Infinite Scroll, where more items are loaded. You'll see that the icons are not loading correctly.

P.s. I'd have liked to include a code snippet here or on CodePen, etc. but the content of another file needs to be fetched, so I couldn't get it to work through those systems.

SparrwHawk
  • 13,581
  • 22
  • 61
  • 91
  • Please create a [MCVE]. If you end up fixing your external site, this question will no longer be useful for future visitors. – Paul LeBeau May 29 '17 at 14:56
  • follow this answer, from user user87312: https://stackoverflow.com/a/30947301/4102927 – Meléndez May 29 '17 at 15:34
  • That's a bug... **Ugly** *--workaround--* (which allows me to tell that it's a bug) : `document.querySelectorAll('use').forEach(u=>u.replaceWith(u.cloneNode()))` (needs to be done at each scrolled-apparation). If you could share the code you use to generate these SVGs, it might be possible to isolate more clearly where is the bug, and find a better workaround. – Kaiido May 29 '17 at 15:46
  • Thanks for the suggestion @Melendez but that didn't work for me. I'm not using an image tag but rather an svg tag so maybe that's why it didn't help. – SparrwHawk May 29 '17 at 17:42
  • Thanks @Kaiido, I'm working on isolating the code and will update when I have done that. The SVG is generated through [Icomoon](https://icomoon.io/app "") by the way. – SparrwHawk May 29 '17 at 17:43
  • I meant how is the node in the document generated. And btw, if these are made with icomoon why don't you use a font? – Kaiido May 29 '17 at 21:49
  • @Kaiido I think the days of icon fonts are over https://css-tricks.com/icon-fonts-vs-svg/ – SparrwHawk May 30 '17 at 09:56
  • Yes svg fonts are being deprecated, but icomoon allows you to generate truetype fonts from svgs. Use this. – Kaiido May 30 '17 at 09:59
  • I'm not quite sure what you mean, I use the Icomoon SVG options straight up, so it gets served as a file of SVG symbols – SparrwHawk May 30 '17 at 10:05
  • Bottom right you've got an *Generate Font* button. – Kaiido May 30 '17 at 10:09
  • @Kaiido the way those fonts generated are the same kind of fonts referred to in the CSS Tricks article, with the same disadvantages. I can see how this may solve my problem but I want to get the issue solved rather than use an older technology :-). I'll add a sandbox here in 2 hours which may help troubleshoot – SparrwHawk May 30 '17 at 10:19
  • But what this article doesn't say is that inline svgs must be *inlined* to get this browser support they claim it has. Otherwise, you'll fall in a lot of implementations divergences which are not gonna stop with the ongoing integration of svg2. And even with svg1.1, there are a lot of differences between UAs behaviors (notably the positioning part which anyone who would have tried it from IE would find completely off) . Coloring works **only** on inline (in the html markup) svgs. Without saying that inlining svgs says goodbye to multi-page cross-page http caching and/or unreadable CSS. – Kaiido May 30 '17 at 11:09
  • And finally, if you do your icons fine (keep the *align-on-pixel-grid* option on), you shouldn't have any rendering issue, since truetype fonts are vectors too. – Kaiido May 30 '17 at 11:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145450/discussion-between-sparrwhawk-and-kaiido). – SparrwHawk May 30 '17 at 11:51
  • I've updated my question to include an MVC example. – SparrwHawk May 30 '17 at 14:03
  • Workaround of @Kaiido works – doublemax Feb 23 '19 at 19:45
  • Maybe fixed in Chrome 85 – doublemax Sep 05 '20 at 15:47

2 Answers2

1

I fixed the issue by adding an xlink definition to symbol-devs.svg.

The symbol-defs.svg file was generated by https://icomoon.io so I've asked the creator to update the app with the fix.

This is the original… <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">

This is the fixed version… <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

Update: Icomoon has now been updated so this issue should not happen in the app anymore.

SparrwHawk
  • 13,581
  • 22
  • 61
  • 91
0

Something that worked for me in Chrome was to update this to use the absolute URL instead of a relative one:

<svg><use xlink:href="/images/icons.svg#home"></use></svg>

Becomes

<svg><use xlink:href="https://www.example.com/images/icons.svg#home"></use></svg>

Hope this helps!

Stewart Orr
  • 1
  • 1