How to load SVG file contents with AJAX?

Question

I am trying to access the contents of an SVG file using jQuery AJAX but keep getting the same error in Chrome.

JavaScript

$.get("my.svg", function(data){
  print(data)
})

Console Output

[Error] jquery.min.js:4 XMLHttpRequest cannot load file:'///Users/james.jensen/Desktop/helloworld/my.svg'. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I literally copied and pasted the code from here and changed it to fit my situation, so I am unsure why my code is malfunctioning in this way.

Thanks in advance

it has to be an http call. You cannot load files/data via ajax using file:// protocol. — abhishek khandait, Jul 11 '17 at 05:03
Possible duplicate of [jQuery appending to AJAX loaded SVG problem](https://stackoverflow.com/questions/6802283/jquery-appending-to-ajax-loaded-svg-problem) — Jack jdeoel, Jul 11 '17 at 05:26
@abhishekkhandait The HTML file that runs the above JavaScript is in the same folder as the `my.svg`, so as you can see I used `$.get("my.svg"...)`. I believe that acts as an HTTP call? — James Jensen, Jul 11 '17 at 07:08
@abhishekkhandait I already tried that. Chrome treats the URL as `file:///my.svg`. — James Jensen, Jul 12 '17 at 02:57

James Jensen · Accepted Answer · 2020-05-04T10:51:11.747

2

It turns out that this issue is, in fact, Chrome related. I ran the same code on Safari and it worked perfectly. I looked into solutions that would enable me to run the same code on Chrome and discovered that I would have to run a server locally.

edited May 04 '20 at 10:51

answered Jul 13 '17 at 08:50

James Jensen

518
6
19

score -1 · Answer 2 · edited Jul 11 '17 at 12:57

-1

$.get('/my.svg', function(svg) {
   console.log(svg);
}, 'text');

edited Jul 11 '17 at 12:57

xlm

6,854
14
53
55

answered Jul 11 '17 at 11:18

abhishek khandait

1,990
2
15
18

I'm still getting the same error, except using the URL `/my.svg` just produces the path `file:///my.svg`, which obviously is not the location of the file. – James Jensen Jul 12 '17 at 02:44
can you find the source file `my.svg` in google chromes Inspect sources? – abhishek khandait Jul 12 '17 at 09:31
Yes, It does appear in sources. – James Jensen Jul 12 '17 at 10:45

How to load SVG file contents with AJAX?

JavaScript

Console Output

2 Answers2