Importing SVG to p5.js sketch

[yhlaskerimov]

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.

[Sven]

Hello @yhlaskerimov,

Yes, loadImage() accepts SVG images.

let img;

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

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

[yhlaskerimov]

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

[Sven]

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?

[yhlaskerimov]

Here is my code and transparent svg is there too.
My problem is, when i play with their Z axis, it is not transparent. Look

[Sven]

I’m not too well-versed in WebGL, but a little searching brought up this issue that gave a hint of a possible workaround. What happens if you add this line to the end of the setup() function?

drawingContext.disable(drawingContext.DEPTH_TEST);

[yhlaskerimov]

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

Thanks !

[yhlaskerimov]

@Sven Hey, can u help me with this ?

[Sven]

Help you with what? There’s no question in your last reply. May I propose that you read the excellent Guidelines—Asking Questions 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.

[yhlaskerimov]

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 !

[Sven]

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:

By making the following changes to your code.

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.
} 

[noel]

Did you try to solve it whit my suggestion here?

[yhlaskerimov]

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

[yhlaskerimov]

Thank you Sven, for trying !

I will wait for someone more knowledgeable.

[KartikSoneji]

Hi @yhlaskerimov !

This might be an issue with the SVG itself.

Can you please post the file here?

[yhlaskerimov]

Hi @KartikSoneji ! Thank you for your reply !

Here is my code.

[KartikSoneji]

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