# How to make a loading icon with an svg file p5.js (Access to Image at '' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access

**URL:** <https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399>\
**Category:** Beginners\
**Created:** [August 6, 2018, 1:10am UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399 "2018-08-06T01:10:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pork](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pork/32/1034_2.png) [@Pork](https://discourse.processing.org/u/Pork)\
**Post date:** [August 6, 2018, 1:10am UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/1 "2018-08-06T01:10:55Z")

</div>

idk how to load the svg file. When i try i get a “Access to Image at ‘’ from origin ‘null’ has been blocked by CORS policy: Invalid response. Origin ‘null’ is therefore not allowed access.”  
If svg filetypes aren’t supported can someone at least tell me where I can convert the file into a gif or sequence of png’s (and use that to make a loading icon)?  
[Here](https://svgshare.com/i/7hE.svg) is the svg loader im trying to use.

```auto
var img;
var loadicon;
var loading = true;

function doneLoading(){
 loading = false;
}

function setup(){
 var cnv = createCanvas(windowWidth, windowHeight);
 cnv.style('display', 'block');
 cnv.class('cnv');
 noStroke();

 //have to use link to load image not a local file
 img = loadImage('https://raw.githubusercontent.com/petercpark/Mindless-Rubik-s-Cube-Solution/master/rubikscube.png', doneLoading);
 loadicon = loadImage('loading.svg');
}

function draw(){
 if(loading){
 image(loadicon, width/2, height/2);
 }

 else {
 //stuff that i run
 }
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 6, 2018, 1:17am UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/2 "2018-08-06T01:17:39Z")

</div>

How are you running this code? What url are you using to access your sketch?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 6, 2018, 1:38am UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/3 "2018-08-06T01:38:29Z")

</div>

1. [Forum.Processing.org/two/discussion/18851/load-an-svg-to-a-p5-sketch](http://Forum.Processing.org/two/discussion/18851/load-an-svg-to-a-p5-sketch)
2. [Forum.Processing.org/two/discussion/19708/load-svg-file](http://Forum.Processing.org/two/discussion/19708/load-svg-file)
3. [Forum.Processing.org/two/discussion/21747/p5-js-svg-image-array-loading-problem-please-help](http://Forum.Processing.org/two/discussion/21747/p5-js-svg-image-array-loading-problem-please-help)
4. [Forum.Processing.org/two/discussion/23839/access-shape-classes-of-svg-on-p5-canvas-with-css](http://Forum.Processing.org/two/discussion/23839/access-shape-classes-of-svg-on-p5-canvas-with-css)
5. [Forum.Processing.org/two/discussion/24698/change-the-colour-of-an-svg-and-draw-onto-canvas](http://Forum.Processing.org/two/discussion/24698/change-the-colour-of-an-svg-and-draw-onto-canvas)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 6, 2018, 1:47am UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/4 "2018-08-06T01:47:51Z")

</div>

Please fix your title. The title is to summarize your problem. You write a description in the body of your message.

Your loading logic is backwards. It should be false when init and set to true when `doneLoading()` is called.

Kf

---

<div class="post-metadata">

**Author:** ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)\
**Post date:** [August 6, 2018, 11:34pm UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/5 "2018-08-06T23:34:56Z")

</div>

If you are using chrome try using firefox.

---

<div class="post-metadata">

**Author:** ![Pork](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pork/32/1034_2.png) [@Pork](https://discourse.processing.org/u/Pork)\
**Post date:** [August 8, 2018, 11:07pm UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/6 "2018-08-08T23:07:10Z")

</div>

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <title>Mindless.</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <style> body {padding: 0; margin: 0;} </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>

  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)\
**Post date:** [August 21, 2018, 6:58pm UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/7 "2018-08-21T18:58:26Z")

</div>

does it work in firefox?

---

<div class="post-metadata">

**Author:** ![Pork](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pork/32/1034_2.png) [@Pork](https://discourse.processing.org/u/Pork)\
**Post date:** [August 21, 2018, 10:09pm UTC](https://discourse.processing.org/t/how-to-make-a-loading-icon-with-an-svg-file-p5-js-access-to-image-at-from-origin-null-has-been-blocked-by-cors-policy-invalid-response-origin-null-is-therefore-not-allowed-access/2399/8 "2018-08-21T22:09:44Z")

</div>

Yes it does but I wanted it to also run in Chrome so I changed the svg into a gif somehow and put it on a Github repository and used the link of the gif image from Github to host the image file and load it into my site.