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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.