Injecting inline svg with ajax and reloading browser issue

help
1

I’m using the following script to inject a svg in my html body:

Meteor.startup(function() {
    $('body').prepend('<div id="svg"></div>');
    $('#svg').load('images/svg/sprite/sprite.svg');
});

This works as intended but things go wrong when I manually reload the page in my browser. But only when there’s a parameter in my route. When there’s no paramater in my route I can refresh all I want without any problems.

Router.route('/test') // all OK!
Router.route('/test/:_id') // current template gets rendered multiple times and app finally crashes

I can’t seem to wrap my head around this. Why is this happening? And how to fix this?

2

Answering my own question:

The load path needs to be absolute.

$('#svg').load('/images/svg/sprite/sprite.svg');

I feel really stupid now :slight_smile:

3

BTW you can inline the svg instead of loading externally.

Just copy and paste the contents of the svg file in a template tag an include that template anywhere you want.

I’m using svg very extensively and I’ve never loaded them externally.

4

The svg is a sprite and gets generated by gulp and updates automatically every time I add or remove a svg from a folder. I don’t want to copy and paste the contents of the svg sprite by hand so inlining it from an external source is my best option here I guess.