Pixi.js: Blurry SVG loaded from URL (without any sprite scaling)

[joakin]

Expected Behavior

Loading an SVG sprite and rendering it should be crisp on HiDPI displays (window.devicePixelRatio == 2)

Current Behavior

The SVG renders fuzzy:

Example: https://codepen.io/joakin/pen/YzKdqJK?editors=0010

Possible Solution

I'm not sure why it isn't rasterizing the image appropriate to devicePixelRatio so that it isn't blurry.

I've searched around and tried adding scale and overriding width and height on the loader options but they seem to have no effect. I've also tried to mess with resolution on PIXI.settings and many other things, but nothing had any effect.

It is possible I'm doing something wrong or I've missed something but I've been reading API docs and examples from the official site and couldn't figure it out.

Steps to Reproduce

• See example here: https://codepen.io/joakin/pen/YzKdqJK?editors=0010

Environment

• pixi.js version: PixiJS 5.1.3 - ✰ WebGL 2 ✰
• Browser & Version: Chrome 76
• OS & Version: OSX 10.14.6
• Running Example: https://codepen.io/joakin/pen/YzKdqJK?editors=0010
• Expected example, plain Canvas 2d: https://codepen.io/joakin/pen/OJLrNdR?editors=0010

[ivanpopelyshev]

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

here you can see where exactly drawImage is being called.

need to somehow set that scale options, but I dont see that loader actually passes options to texture resource:

https://github.com/pixijs/pixi.js/blob/dev/packages/loaders/src/TextureLoader.js#L23

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/Texture.js#L401

Now you have two alternatives:

1. Wait for one of our SVG guys to tell how they deal with that stuff in v5, or wait when someone adds an option to pass options to loader.
2. Try something yourself based on the info i gave you. Maybe ditch the loader and use Texture.from(myUrl, { scale : 2});

In any case you'll have to debug it. Devtools are your best friend.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[joakin]

Still a bug, don’t close it bot

On Sat, 21 Dec 2019 at 13:12, stale[bot] [e-mail] wrote:

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/pixijs/pixi.js/issues/6113?email_source=notifications&email_token=AAFATLZYIFODNFZBA4GKSMDQZYB3NA5CNFSM4IY6FZMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHO27WY#issuecomment-568176603,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAFATL3QW6E6RCDIWAVZV53QZYB3NANCNFSM4IY6FZMA
.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aaclayton]

This is still not working well. Please reopen.

[Levix]

I had the same problem.