CODEWITHSUNDEEP
jquerysvg
jewels
jewels

Reputation: 63

Load external SVG file into variable and append to html

I'm trying to replace an SVG image embedded in IMG tag with the content of this SVG and output it inline. In other words lo load the contents of SVG file of given IMG SRC attribute into a variable and inject it as inline SVG into HTML, like this:

...

else if (type && type === 'img-simple') {
    if (format === 'svg' ) {
         $.get(src, function(data) {
         var svg = $(data);
         $bg.append(svg);
    });

} else {

...

Where var type is image class and format is the image type: jpg, sag etc.

Which gives me the following error:

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (img01.svg, line 0)
[Error] XMLHttpRequest cannot load file:///Users/img01.svg. Origin null is not allowed by Access-Control-Allow-Origin. (index.html, line 0)

Apparently it's the get function problem?

Thanks in advance

Upvotes: 3

Views: 9072

Answers (1)

fr00t
fr00t

Reputation: 679

You cannot load data via ajax using the file:// protocol. You need to use http://

For example, move the svg file to the same folder as your javascript file and then do:

$.get('img01.svg', function(data) {
    $bg.append(data);
});

Upvotes: 3

Related Questions