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 - 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
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
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 thttp://kll.engineering-news.org/tests/SVG_SHOW/ 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.
yes, very strange,
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 editor.p5js.org / file / download , my server ftp upload / unchanged )
with chrome browser // inspect // console // see
Access to image at ‘https://assets.editor.p5js.org/5baede4d19d228001fb830db/1b501de0-f5bc-46bf-8f24-d2e49c26bae4.svg’ from origin ‘https://editor.p5js.org’ 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 p5js.org has a compatibility problem with chrome,