Scaling down images quality

[saraOrkide]

I load a photo in zoom 3, but the image quality is very low. In zoom 1, it is good, but when I zoom in higher, the image is not sharp.
The code I use is like this, I am working with version 7 of pixi and it is the latest version from pixi-viewport
const texture = await Assets.load(url);
const image = Sprite.from(texture,
{
resolution: 1,
scaleMode: PIXI.SCALE_MODES.NEAREST,
resourceOptions: {
scale: viewport.scaled,
autoLoad: true,
MimeType: 'image/svg+xml'
}
}
);
viewport.addChild(image);

[bigtimebuddy]

The scaleMode needs to be set on the Texture not on the sprite. Try this:
https://jsfiddle.net/75raybcu/

[bigtimebuddy]

Wikipedia has CORS restrictions. Here's an example that works with SVG + scaleMode
https://jsfiddle.net/bigtimebuddy/e3dbsp12/

[saraOrkide]

It is not sharp
https://jsfiddle.net/bigtimebuddy/e3dbsp12/

[bigtimebuddy]

https://jsfiddle.net/bigtimebuddy/e3dbsp12/4/

You asked how to use scaleMode, not how to make it sharp.

[saraOrkide]

Yes, I apologize, I thought it would be sharp with scalemode, but I was wrong
In general, I want to show the svg in different zooms in sharp form

[bigtimebuddy]

scaleMode has two flavors: nearest and linear. When you scale the Sprite, this tells the GPU how to interpolate the pixels. Nearest looks pixelated and linear is smoother. Linear has limitations, especially if you are scaling down a lot the edges can look not that sharp.

You may want to use canvas rendering (i.e., drawImage) directly and render multiple size variants to multiple canvases. Pixi does this under-the-hood with a single canvas. 2D canvas rendering can give the best possible visual result, even at extreme sizes.

[saraOrkide]

My photo svg
with assets.load
I loaded it, I want the quality of the photo not to decrease with zoom in and zoom out and it is always shown sharp

[antonfire]

Did you resolve this?