SVG not rendering in Safari

mr-skyaakash commented 4 years ago

When an svg is listed as a source in the images array, it is not being loaded into the canvas in Safari. Works on Chrome and Firefox perfectly. Tested on versions 2.7.0 and 3.1.0. PNG and JPG works alright. Also the same SVG when referenced from an img tag, renders perfectly. I assumed it would be because of the way svg was being served by webpack. Later, even after setting it's content-type to image/svg+xml, i still get the issue. Please help!

matteobruni commented 4 years ago

Hi @mr-skyaakash, can you share the image and the config to replicate the issue?

mr-skyaakash commented 4 years ago

Sharing the config, but am not allowed to share the screenshot due to certain policies!

matteobruni commented 4 years ago

@mr-skyaakash I didn't mean the screenshot, just the SVG images you are using, if it's possible.

I have samples with SVG that works in Safari, that's why I'm asking

mr-skyaakash commented 4 years ago

Any of the fontawesome svgs, or for better reference, the svg from this demo page : https://rpj.bembi.org/k8s.2d579d24.svg.

P.S : CORS has been taken care, so it loads just fine.

matteobruni commented 4 years ago

Ok those file are working to me. Safari version?

mr-skyaakash commented 4 years ago

Safari 13.0.5

matteobruni commented 4 years ago

I've created a pen on codepen with the image drawing method taken by v3.1.0.

https://codepen.io/matteobruni/pen/BaoRGZd

Does this pen work in your safari?

mr-skyaakash commented 4 years ago

Yes, this works fine! Can we have a codesandbox using just a Particle component with an svg image which works fine for you?

matteobruni commented 4 years ago

Checkout this, it's a tsParticles CodePen but it's the react-particles-js 3.x core.

https://codepen.io/matteobruni/pen/XWmRooM

Anyway I think I forgot a thing about 3.1.0 version, that seems to be the real issue.

Checkout this closed issue

https://github.com/Wufe/react-particles-js/issues/118#issuecomment-619385072

The issue is that 3.1.0 version still uses tsParticles 1.12.11 that has a bug about 'images' shape type.

You can try upgrade tsParticles to 1.13.3 installing after react-particles-js 3.1.0 or switch to 'image' shape type.


    particles: {
        number: {
            value: 30,
            density: {
                enable: true,
                value_area: 800
            }
        },
        line_linked: {
            enable: false
        },
        move: {
            speed: 1,
            out_mode: 'out'
        },
        shape: {
            type: ['image', 'circle'], // here image instead of images
            images: [ // here you can use image or images, it's the same
                {
                    src: '/public/assets/landing-page/someIcon1.svg',
                    height: 10,
                    width: 10,
                },
                {
                    src: '/public/assets/landing-page/someIcon2.svg',
                    height: 10,
                    width: 10
                }
            ]
        },
        size: {
            value: 15,
            random: false
        }
    },
    retina_detect: false,
    interactivity: {
        events: {
            onhover: {
                enable: true,
                mode: 'bubble'
            }
        },
        modes: {
            bubble: {
                size: 20,
                distance: 40,
            },
        },
    },
}} />```

matteobruni commented 4 years ago

Anyway if you need some FontAwesome icons you can checkout this sample too:

https://codepen.io/matteobruni/pen/QWbrLoK

Text particles can be configured in version 3.x

mr-skyaakash commented 4 years ago

Ah! it works now with the new config. Closing this issue! Request you to update all the docs! :) Ciao

matteobruni commented 4 years ago

@mr-skyaakash the 3.2.0 version with the shape type fix is available, if you want to keep the old config.

wufe / react-particles-js

SVG not rendering in Safari #119