SVG not rendering with other graphics

[jpetitte]

Expected Behavior

svg icon should display to the left of the text

Current Behavior

text and other graphics appear, but the SVG does not

Possible Solution

honestly I don't know. It's possible I've made a mistake and this isn't a bug. SVGs render normally when I'm not converting them to a texture.

Steps to Reproduce

running in the playground: https://www.pixiplayground.com/#/edit/fRNuBBozMAjOIqTYgnRbj

Environment

Windows 10, edge Version 88.0.705.56 (Official build) (64-bit)

• pixi.js version: 5.3.7
• Running Example: https://www.pixiplayground.com/#/edit/fRNuBBozMAjOIqTYgnRbj

[bigtimebuddy]

Seems like a CORS issue:

Access to image at 'https://www.flaticon.com/svg/vstatic/svg/646/646094.svg?token=exp=1612295261~hmac=d6eaca3a254426e47d49742e935f17a3' from origin 'https://www.pixiplayground.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[jpetitte]

@bigtimebuddy that's really odd. It worked approximately 1hr before when I was using the icon for preliminary tests in the playground. I'll double check that.

[jpetitte]

@bigtimebuddy I've configured it to access 3 different svgs from different urls. One of which is in an S3 bucket I created that should be public. I'm able to access the bucket from incognito.

For the "mail-6" svg network requests (one to the source, and one to where I placed it in the S3 bucket), I'm not seeing a header specifying the request method.

This is the line (134) that should be making the request to create the texture:

var svgtexture = PIXI.Texture.from(config.icon);

where config.icon is the url. I tried PIXI.Texture.fromURL as well, but that failed too.

[jpetitte]

To help troubleshoot this, is there an svg on the pixijs domain that could be tried? It just seems weird that the svg from the public s3 bucket failed too.

[bigtimebuddy]

Try this: https://dl.dropbox.com/s/gmq0h9dik2w45o6/pixijs-logo.svg

[jpetitte]

excellent, i'll take a look

[jpetitte]

No errors in the network request to the dropbox based svg, but I'm not seeing the SVG rendered. I'm still investigating as well, but wanted to give you a heads up.

[jpetitte]

@bigtimebuddy I updated the playground (https://www.pixiplayground.com/#/edit/fRNuBBozMAjOIqTYgnRbj) with as little code as required to replicate the issue.

I have included 2 lines (40 and 41) to switch that demonstrate the proper render vs the failure:

    app.stage.addChild(menuItemDefault);
    // app.stage.addChild(menuContainer);

It appears that the issue appears when the svg is run through BaseRenderTexture and RenderTexture. Does this have to do with a loading time for the SVG?

[bigtimebuddy]

Yes, loading any assets is an asynchronous process and the image is not available when you create the RenderTexture. I would suggest that you use app.loader to preload your SVG images. Or you can use Texture.fromURL, which returns a Promise when the asset is ready, and you can wait until that's done.

[jpetitte]

bingo, thanks @bigtimebuddy