# Importing SVG to p5.js sketch

**URL:** <https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072>\
**Category:** Beginners\
**Created:** [September 23, 2020, 7:37am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072 "2020-09-23T07:37:06Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 23, 2020, 7:37am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/1 "2020-09-23T07:37:06Z")

</div>

Hi, everyone !

Is there any way to load an SVG(this SVG’s background is transparent, I need to import with transparency) to my p5 sketch ?

I appreciate every help, thanks !

YK.

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 23, 2020, 7:56am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/2 "2020-09-23T07:56:27Z")

</div>

Hello @yhlaskerimov,

Yes, [loadImage()](https://p5js.org/reference/#/p5/loadImage) accepts SVG images.

```auto
let img;

function preload() {
  img = loadImage('example.svg');
}

function setup() {
  image(img, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 23, 2020, 8:39am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/3 "2020-09-23T08:39:14Z")

</div>

Thanks, for your reply !  
This method can’t load a transparent image.  
How can I import transparent images ?

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 23, 2020, 1:21pm UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/4 "2020-09-23T13:21:09Z")

</div>

I just loaded an SVG without a background and a circle with an opacity set. It worked fine. Can you share an isolated example (code + SVG) that does not work for you?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 24, 2020, 5:09am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/5 "2020-09-24T05:09:40Z")

</div>

[Here](https://editor.p5js.org/yhlaskerimov02/sketches/l6PmVDy5e) is my code and transparent svg is there too.  
My problem is, when i play with their Z axis, it is not transparent. Look 👇

 ![Screenshot (170)_LI](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5789828c693498fedd7fcc902fbc595e086e3281.jpeg)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 24, 2020, 6:21am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/6 "2020-09-24T06:21:07Z")

</div>

I’m not too well-versed in WebGL, but a little searching brought up [this issue](https://github.com/processing/p5.js/issues/3736) that gave a hint of a possible workaround. What happens if you add this line to the end of the `setup()` function?

```auto
drawingContext.disable(drawingContext.DEPTH_TEST);

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 24, 2020, 7:21am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/7 "2020-09-24T07:21:52Z")

</div>

Thank u man, it is a good result.  
But there is one more problem… I need to get this effect 👇

 ![Screen Shot 2020-09-16 at 11.05.21](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8b75ceafb6124053c6b32afff675982628ec43da.jpeg)

Thanks !

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 26, 2020, 6:37am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/8 "2020-09-26T06:37:06Z")

</div>

@Sven Hey, can u help me with this ?

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 26, 2020, 7:38am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/9 "2020-09-26T07:38:37Z")

</div>

Help you with what? 😊 There’s no question in your last reply. May I propose that you read the excellent [Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147) and, after that, form a question around the problem.

Preferably in a new thread, as the original question in this one is resolved. I will try my best to help out and answer your question in that new thread.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 26, 2020, 9:52am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/10 "2020-09-26T09:52:23Z")

</div>

Oh sorry, you are right !

After pasting this `drawingContext.disable(drawingContext.DEPTH_TEST);` stroke of code to my `setup` function, I can’t control Z axis. I want to say that I can’t move my red and yellow polygons to back that image.

Is it possible to move them behind of that image ?

Thank you !

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [September 26, 2020, 2:54pm UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/11 "2020-09-26T14:54:44Z")

</div>

As I wrote before, WebGL isn’t really my thing. Someone more knowledgeable in the subject should take a swing at this. But maybe there’s a different way to attack the problem? Keep the depth test enabled, replace the SVG with a photo of your choice and add it as texture to a circle (not a rectangle). Doing the above, I got this result:

 ![A circular photograph and other shapes in 3D space.](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2d5f899a73ef79ea97471e2fc33c12b3b23e2b74.png)

By making the following changes to your code.

```auto
function preload() {
  //img = loadImage('Artboard 1.svg');
  img = loadImage('https://picsum.photos/800/800');
  img2 = loadImage('Dana_2.png');
  img3 = loadImage('Dana_3.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  // rectMode(CENTER);
  imageMode(CENTER);
  noStroke();
  img.resize(400, 0);

  //drawingContext.disable(drawingContext.DEPTH_TEST);
}

function draw() {
  // [...] code not shown for brevity.

  texture(img);

  //rect(0, 0, 400, 400);
  circle(200, 200, 400, 400);
  
  // [...] rest of function hidden for brevity.
} 

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 26, 2020, 6:43pm UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/12 "2020-09-26T18:43:12Z")

</div>

Did you try to solve it whit my suggestion [here](https://discourse.processing.org/t/p5-transparent-image-problem/23891/6)?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 27, 2020, 8:38am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/13 "2020-09-27T08:38:30Z")

</div>

Yes, I tried. But it is not what I want…  
Anyway, thanks !

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 27, 2020, 8:39am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/14 "2020-09-27T08:39:38Z")

</div>

Thank you Sven, for trying !

I will wait for someone more knowledgeable.

---

<div class="post-metadata">

**Author:** ![KartikSoneji](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@KartikSoneji](https://discourse.processing.org/u/KartikSoneji)\
**Post date:** [September 28, 2020, 7:27am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/15 "2020-09-28T07:27:18Z")

</div>

Hi @yhlaskerimov !

This might be an issue with the SVG itself.

Can you please post the file here?

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [September 28, 2020, 7:34am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/16 "2020-09-28T07:34:05Z")

</div>

Hi @KartikSoneji ! Thank you for your reply !

[Here](https://editor.p5js.org/yhlaskerimov02/sketches/I-wEzsVG-) is my code.

---

<div class="post-metadata">

**Author:** ![KartikSoneji](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@KartikSoneji](https://discourse.processing.org/u/KartikSoneji)\
**Post date:** [September 28, 2020, 8:00am UTC](https://discourse.processing.org/t/importing-svg-to-p5-js-sketch/24072/17 "2020-09-28T08:00:39Z")

</div>

Thanks for the code.

Can you try again after removing `enable-background: new 0 0 1080 1080;` from the SVG?

Some background:  
SVG stands for Scalable Vector Graphics, which is a fancy way of saying that the image can be scaled to any size without loss of quality.

This is possible because an SVG is a set of instructions to draw geometric primitives (circles, lines, arcs). If you open an SVG in a text editor (like VSCode), you will be able to see those commands. Those commands are very similar to HTML.

`enable-background: new 0 0 1080 1080;` is drawing a white background at `(0, 0)` with a width and height of `1080`.

I would suggest you go through the MDN page:

> **[SVG: Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG)**
>
> Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. XML