# Working with SVG files
**URL:** https://discourse.processing.org/t/working-with-svg-files/5377
**Category:** p5.js
**Created:** [November 9, 2018, 1:09pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377 "2018-11-09T13:09:59Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@juju11](https://discourse.processing.org/u/juju11)
#### Post date: [November 9, 2018, 1:09pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/1 "2018-11-09T13:09:59Z")
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 😂- or is there any other reasons?? thanks
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2018, 1:12pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/2 "2018-11-09T13:12:24Z")
how you try to load it, as image? or shape?
---
### Author:  [@juju11](https://discourse.processing.org/u/juju11)
#### Post date: [November 9, 2018, 1:15pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/3 "2018-11-09T13:15:37Z")
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
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2018, 1:21pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/4 "2018-11-09T13:21:12Z")
try convert to jpg,
for processing java sure must use
[https://processing.org/reference/loadShape\_.html](https://processing.org/reference/loadShape_.html)
[https://p5js.org/reference/#/p5.Image](https://p5js.org/reference/#/p5.Image)
p5 can display .gif, .jpg and .png images
---
### Author:  [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 9, 2018, 3:58pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/5 "2018-11-09T15:58:24Z")
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 😅
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [November 9, 2018, 4:41pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/6 "2018-11-09T16:41:27Z")
> [@Lexyth](#):
>
> SVG is scalable Vector graphics, meaning that it can be (and is mainly used for) used to load 3D vector Information.
I think you mean **2D** vector information (but other than that, good point).
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2018, 4:55pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/7 "2018-11-09T16:55:50Z")
> [@Lexyth](#):
>
> try load it as PShape
that is the point, has p5.js a loadShape ? i think it is still open point?
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2018, 11:56pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/8 "2018-11-09T23:56:01Z")
so back to tests: i try in
- p5.js and in
- processing / p5.js MODE
and 2 different ways, and it works now with
```auto
loadImage
```
so @juju11 do we have a version problem?
> [p5.js Web Editor](https://editor.p5js.org/kll/sketches/ryt19576X)
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/](http://kll.engineering-news.org/tests/SVG_SHOW/)
---
### Author:  [@juju11](https://discourse.processing.org/u/juju11)
#### Post date: [November 10, 2018, 9:59pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/9 "2018-11-10T21:59:30Z")
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
---
### Author:  [@juju11](https://discourse.processing.org/u/juju11)
#### Post date: [November 10, 2018, 10:10pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/10 "2018-11-10T22:10:35Z")
Btw I also try to open your code in the web editor, the svg thing is also blank, but when I visited t[http://kll.engineering-news.org/tests/SVG\_SHOW/](http://kll.engineering-news.org/tests/SVG_SHOW/) this link , i can see all of them. This is how it looks like in the editor,
---
### Author:  [@Architector\_4](https://discourse.processing.org/u/Architector_4)
#### Post date: [November 10, 2018, 10:23pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/11 "2018-11-10T22:23:05Z")
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.
---
### Author:  [@juju11](https://discourse.processing.org/u/juju11)
#### Post date: [November 10, 2018, 10:48pm UTC](https://discourse.processing.org/t/working-with-svg-files/5377/12 "2018-11-10T22:48:30Z")
yea I tried the code with jpg file also and it works ,
thanks for the reminder though 😄
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 11, 2018, 12:40am UTC](https://discourse.processing.org/t/working-with-svg-files/5377/13 "2018-11-11T00:40:17Z")
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 [editor.p5js.org](http://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](https://assets.editor.p5js.org/5baede4d19d228001fb830db/1b501de0-f5bc-46bf-8f24-d2e49c26bae4.svg)’ from origin ‘[https://editor.p5js.org](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](http://p5js.org) has a compatibility problem with chrome,
very interesting