Pixi.js: Scaling SVG before rasterizing, sourceScale in PIXI.BaseTexture isn't there any more?

[jazzyjeff5]

I'm trying to load SVGs in, and scale them before rasterizing so they look sharp at the size I need them.

The docs for 4.5.6 and other resources I've found seem to say you can do this by using the sourceScale option when loading in the texture. The 5.2.0 docs have no mention of this, and I can't figure out how to do it.

Is it not possible in 5.2.0?

[ivanpopelyshev]

its possible to pass scale to SVGResource constructor, unfortunately its not passed through Texture.fromLoader

I mentioned it so many times and no one wants to make PR. I'm too lazy to do one right now. Wait till weekend or try workaround that passed options to SVGResource constructor.

[ivanpopelyshev]

ACtually, according to https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/SVGResource.js
and
https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/Texture.js#L330

this should work:

PIXI.Texture.from('my.svg', {scale: 2} );

just don't add my.svg to pixi loader.

[jazzyjeff5]

Thank you so much for the fast assistance! Unfortunately passing in {scale: 2} to PIXI.Texture.from seems to make no difference. This is my code:

var tex = PIXI.Texture.from("r001.svg", {scale:2});
var sprite = new PIXI.Sprite(tex);
stage.addChild(sprite);

Changing the value of scale makes no difference to what's drawn on screen. Unless I'm being an idiot and I need to enlarge the sprite as well? However, if I add

sprite.scale.x = sprite.scale.y = 2;

The sprite doubles in size but it's blurry, so I don't think the SVG has been enlarged before being rasterized.

I'll look into the SVGResource workaround and reply back with my results.

[jazzyjeff5]

Ok this works!

var svgRes = new PIXI.resources.SVGResource("r001.svg", {scale:2});
var tex = PIXI.Texture.from(svgRes);
var sprite = new PIXI.Sprite(tex);
stage.addChild(sprite);

[bigtimebuddy]

Alternatively this should work the same, per documentation. The second argument is the BaseTexture constructor options which has a resourceOptions optional field.

var tex = PIXI.Texture.from("r001.svg", {resourceOptions: {scale:2}});
var sprite = new PIXI.Sprite(tex);
stage.addChild(sprite);

[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.

[Tymski]

None of the code snippets provided here work. The image is cut off.

resourceOptions: { scale: 1 }

resourceOptions: { scale: 2 }

Looks like the width and height properties are scaled correctly, but there is something wrong with the texture anchors.

Code used:
javascript let tex = PIXI.Texture.from("robot-grab.svg", { resourceOptions: { scale: 2 } }); let robotHand = new PIXI.Sprite(tex); app.stage.addChild(robotHand);

[bigtimebuddy]

@Tymski please file a new issue with an example that runs and demonstrates the bug you're seeing.

[madki]

@jazzyjeff5 and @bigtimebuddy answers seem to differ in how texture caching is working.

I wasn't able to get svg in 2 different scales unsing @bigtimebuddy's answer as Texture.fromImage() was caching only one of the scales. Using SVGResource fixed that. Hoping caching still works though.