Sprite texture from dynamically rendered SVG?

[d13]

Hi Everyone!

Just a quick (hopefully!) general question for someone who might have done something like this before. I'm working on a game with lots of speech bubbles. The bubbles can contain a variable amount of text, so they would need to dynamically scale based on how much text they contain. The text also needs to be screen-reader accessible, so it can't be purely embedded in a bitmap. I'm thinking of dynamically rendering the speech bubbles with text as SVG. My question is: can I use the dynamically rendered SVG as a Pixi sprite texture?

Thank you!

 

[ivan.popelyshev]

Yes, you can.

texture = Texture.from(canvas);

//each time you update canvas

canvas.clearRect();
canvas.drawImage(changedSvg);
texture.update(); 

Also you can embed it into your own SVGResource like that

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/SVGResource.js

https://pixijs.io/examples/#/textures/gradient-resource.js

[d13]

Thanks Ivan!

I need to use the SVG as a texture source for a sprite.. is that possible using those methods? 

[ivan.popelyshev]

 There's no escape. The only way is through canvas

[d13]

Thanks! So, I guess my next question... is it possible to render a dynamic created SVG onto a canvas?

[ivan.popelyshev]

pass an svg element in drawImage.

[d13]

Nice, I didn't know that!

[ivan.popelyshev]

Just for your knowledge - that's the only way using browser api to pass it to webgl.

Manual, "parse it with js" solutions like https://github.com/exponenta/pixi5-svg have serious limitations.

Edited October 24, 2019 by ivan.popelyshev

[d13]

This seems to be a simple example...

https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

[ivan.popelyshev]

Just now, d13 said:

This seems to be a simple example...

https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas

that's why we dont have any special API's for that in pixi, except SVGResource. Anyone can do that if they know how to upload canvas2d to webgl texture in pixi.