search

VincentGarreau / particles.js

A lightweight JavaScript library for creating particles
https://vincentgarreau.com/particles.js/
MIT License
28.9k stars 4.82k forks source link

SVGs not working ? #281

Open MarzSbaih opened 6 years ago

MarzSbaih commented 6 years ago

I tried to use SVGs, and I only see black background! BTW, PNGs work good but I need to use svg instead !

Any Idea ?

Thanks

mafudelaptu commented 6 years ago

+1 same behavior

ibrokemycomputer commented 6 years ago

+1 same here

ibrokemycomputer commented 6 years ago

I was able to get them to work by using the 'image' type in the configs, and a data:image encoded string as the image source. E.g. 'data:image/svg+xml;utf8,<svg ...> ... </svg>'. Just make sure to check your quotes!

jcat4 commented 5 years ago

I was able to get them to work by using the 'image' type in the configs, and a data:image encoded string as the image source. E.g. 'data:image/svg+xml;utf8,<svg ...> ... </svg>'. Just make sure to check your quotes!

Wait, are you saying you essentially put the contents of the SVG in the config as a string?

ibrokemycomputer commented 5 years ago

@jcat4 Yes, essentially just paste the SVG code (single line in single quotes for ES5 support) between 'data:image/svg+xml;utf8, and ' That is what worked as a patch for a client website, though I haven't done any testing into performance. It was able to solve our issue in time for site delivery and did not create a noticeable lag :smiley:

joelscreative commented 5 years ago

@jcat4 Yes, essentially just paste the SVG code (single line in single quotes for ES5 support) between 'data:image/svg+xml;utf8, and ' That is what worked as a patch for a client website, though I haven't done any testing into performance. It was able to solve our issue in time for site delivery and did not create a noticeable lag 😃

Do you have a pen for this? I can't Seem to get it working.

ibrokemycomputer commented 5 years ago

@joelscreative Sorry for the delay, here ya go! https://codepen.io/anon/pen/vbVJLW?editors=0010

I copied my JSON into the code generated from the Codepen link on the demo site, I set mine up a little differently but the SVG still works. If you're still having trouble, make sure you have the viewbox attribute on your SVG. I saw I'm using viewbox and width/height (this was from a project about a year ago), so you may need test if both are necessary. I hope that helps!

jcat4 commented 5 years ago

@joelscreative Sorry for the delay, here ya go! https://codepen.io/anon/pen/vbVJLW?editors=0010

I copied my JSON into the code generated from the Codepen link on the demo site, I set mine up a little differently but the SVG still works. If you're still having trouble, make sure you have the viewbox attribute on your SVG. I saw I'm using viewbox and width/height (this was from a project about a year ago), so you may need test if both are necessary. I hope that helps!

BTW, this doesn't work for me in Chrome. Working in Safari. I don't have any other browsers on my system to test with. Just curious, what browser are you using?

davidandrew commented 5 years ago

Resolution I found was under the 'Pull requests' tab. Look for 'Fixed SVG loading issue in Safari and Chrome' > Files changed > particles.js > view files

Seems to work at the moment.

airplanenoise commented 5 years ago

thanks @davidandrew that was what i needed! +1

airplanenoise commented 5 years ago

dang still issues on IE 11... anybody else?