Working with SVG files

I’m trying to use an SVG file to display a vector cat picture, but the image won’t appear? even when using a local host from node js ( which is tiresome to manually refresh it when I change the code). What do you guys think? is it because i should upload it to a server? - which my friend told me to , which i don’t quite understand either :joy:- or is there any other reasons?? thanks

how you try to load it, as image? or shape?

as an image, so i made a var , for example “var x " and use that as"x = loadImage(’_’)” and use the image tag “image(x,0,0);” in function draw

try convert to jpg,
for processing java sure must use
p5 can display .gif, .jpg and .png images

SVG is scalable Vector graphics, meaning that it can be (and is mainly used for) used to load 2D vector Information. And an Image is not the Same as Vector data (at least not in processing). You Need to use loadShape(„.svg“) to Load it. Else it‘s like saying give me the Image that is not an image… just doesn‘t work for processing. Try to convert it to an image file before loading it as Image, or try load it as PShape.

Edit: @neilcsmith Yeah, 2D :sweat_smile:

1 Like

I think you mean 2D vector information (but other than that, good point).


that is the point, has p5.js a loadShape ? i think it is still open point?

so back to tests: i try in

  • p5.js and in
  • processing / p5.js MODE
    and 2 different ways, and it works now with

so @juju11 do we have a version problem?

and the interesting thing is i print a svg converted picture OVER a picture
and as it is transparent it looks nice

from p5.js download and upload my bog server also works

1 Like

wow thanks for helping me… I tried to do the same with your code, my image is still not showing… maybe it is a version problem, I tried it also in the web editor, it’s just blank

Btw I also try to open your code in the web editor, the svg thing is also blank, but when I visited t this link , i can see all of them. This is how it looks like in the editor,

I’m not a p5.js expert, but I have a suggestion - try getting a normal image to render first! Or read any file! So that we can make sure that the problem is indeed related specifically to SVG files, and not to file reading as a whole.

yea I tried the code with jpg file also and it works ,
thanks for the reminder though :smile:

yes, very strange,
from here:
win7 / firefox 63 looks like

but google chrome 70 AND opera not show the SVGs
and IE9 shows a white page for the whole editor??

but you are right,
while chrome not show the SVG from
editor, from my blogserver it works?? spooky
( i did / file / download , my server ftp upload / unchanged )

with chrome browser // inspect // console // see

Access to image at ‘’ from origin ‘’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

but also it could be just a preload timeout??

so, we do have a browser problem, or better has a compatibility problem with chrome,
very interesting