Working with SVG files

p5.js
1

hi!
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

2

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

3

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

4

try convert to jpg,
for processing java sure must use
https://processing.org/reference/loadShape_.html

https://p5js.org/reference/#/p5.Image
p5 can display .gif, .jpg and .png images

5

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
6

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

2 Likes
7

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

8

so back to tests: i try in

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

so @juju11 do we have a version problem?

p5.js Web Editor

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

http://kll.engineering-news.org/tests/SVG_SHOW/

1 Like
9

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

10

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,

ask1
ask1.PNG1222×603 45.5 KB

11

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.

12

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

PNG
ask2.PNG.jpg1314×569 125 KB

13

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

snap-079
snap-079931×633 87.9 KB

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,
very interesting