SVGs are downloaded twice when injected

[Joe-Palmer]

I have an SVG in an image tag like this which gets injected fine:

<img class="inject-me" src="assets/images/logo.svg" />

However, when I look at the network traffic (in Chrome Network tab), I can see that the browser downloads it (svg+xml) and then svg-injector.js downloads it again (xhr).

How can I stop each of the SVGs getting downloaded twice? Is there a way of injecting the SVGs without using tags as this seems to be cause of the first unnecessary download.

Many thanks

[protodave]

If you use the data-src attribute instead of src, the SVG will only be loaded once, via the injector's xhr call.

Also, even though it appears to be loading the SVG twice when using the src tag, the second request should be served from the browser cache (304) and shouldn't have much network traffic performance impact. (if the server is setup properly to add the appropriate caching response headers for your SVGs, of course)

[Joe-Palmer]

That works great, many thanks.