Sign in to follow this  
freddyInKorea

generate texture from svg content instead of svg path

Recommended Posts

Hello everybody,

First of all, thank you for providing such a great framework. here is my question: is it possible to generate a texture from the content of a SVG file instead of its path. I found an issue talking about it: 

https://github.com/pixijs/pixi.js/issues/2927

http://https://codepen.io/RanzQ/pen/RGPrxr

var texture = PIXI.Texture.fromImage('data:image/svg+xml;charset=utf8,' + serializedSvg)

but it seems that the given solution doesn't work anymore. I tried it in my project and it doesn't display anything.

thank you for your helps.

Share this post


Link to post
Share on other sites

I found out a solution from this website:

https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e

const blob = new Blob([svgObject], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
PIXI.Texture.fromImage(url,undefined,undefined,2);

 

Unfortunately, when I zoom in now the quality is quite low do you have any idea which may provoke that?

<svg version="1.0" id="blop_1" x="0px" y="0px" width="800px" height="800px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
  <circle cx="400" cy="400" r="400" stroke="black" stroke-width="3" fill="red" />
</svg>

 

quality.png

Thank you for your helps

EDIT:

FIREFOX : doesn't display

EDGE: no quality loss when zoom in

CHROME: quality loss when zoom in

it's quite strange

Share this post


Link to post
Share on other sites

Looks great but it seems this lib doesn't support a lot of SVG features.

It's ok, I think I will just create all svg files in my solution, however it would have been awesome to change svg properties during runtime. I made a SVG tank, and I wished to set tank's color by editing this SVG during runtime. Let's wait the next PIXI JS version to see if this feature will be available. 😋

back.png

Share this post


Link to post
Share on other sites

It wont be available because I remember people who needed this fixed and were saying same thing like you: i'll wait for next version. This part of PixiJS still waits for its hero.

I work on SWF support, its close to SVG, but I think it'll be another 6 or 12 months before i start work on SVG improvements.

Without extra input on the issue, demos about it, explanations why current version is wrong - nothing will be done.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.