CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-chromesvg
SparrwHawk
SparrwHawk

Reputation: 14153

SVG Symbols not loading with AJAX content in Chrome

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.

Upvotes: 1

Views: 1951

Answers (2)

Stewart Orr
Stewart Orr

Reputation: 1

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!

Upvotes: 0

SparrwHawk
SparrwHawk

Reputation: 14153

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.

Upvotes: 1

Related Questions