Pixelated SVG drawing rendering

[gomgom]

Hi all,

I'm currently working on a web project, where I need to display a vast amount of markers on a map. I am using a package called leaflet-pixi-overlay, which lets one add a PIXI overlay on top of a leaflet map. My markers are sprites which I build from a few svg images (I need to compose these markers, as I change the tint of the svg's). The result is quite pixelated. The issue being that, given the number of players involved (react / leaflet / react-leaflet / leaflet-pixi-overlay / pixijs), I have no clue which layer is not optimal!

One element which I believe to be interesting is that if I zoom the browser's display, reload my page, then zoom back to 100%, then my sprites look just fine. 

This is one of these svg's displayed elsewhere in the browser, as an svg:

The same inside my sprite:

And finally the same if I do the zoom in - refresh - zoom back trick:

  (these png captures are not as sharp as the actual display, the difference is much more noticeable on my display)

Mainly, the steps I follow to create these sprites are (simplified version):

• import the svg at a resolution higher than what I want (to be able to scale up and down these sprites)

texture = await PIXI.Texture.fromURL( url, { resourceOptions: { width: 200, }, }, );

• create a first sprite at 200px:

const markerSprite = new PIXI.Sprite(texture);

const renderTexture = PIXI.RenderTexture.create({ width: markerSprite.width, height: markerSprite.height, });

• render that sprite:

renderer.render(markerSprite, renderTexture, true);

• create a sprite at the desired size (45px in the capture example):

const displaySprite = new PIXI.sprite(renderTexture);

displaySprite.scale.set(/* scale based on desired size */);

 

Do you see anything wrong with what I'm doing here? My SVG's do not have backgrounds (I can't have one; as I need to change the different layers's tint), does it prevent ani-aliasing? Does the browser zoom / unzoom trick give any hint as to where the problem might be?

Thanks for reading!

[gomgom]

I had sprite.roundPixels set to true. Removing this improves my sprite rendering... I was expecting the exact opposite. Is this normal? Thanks.