gomgom

Pixelated SVG drawing rendering

Recommended Posts

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:

image.png.f4a8a9c6a158daf4133b71d73f5c8719.png

The same inside my sprite:

image.png.6db46db077b547a8c5b2878a436047b6.png

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

image.png.235bb04a76d0df11108c15e612819149.png  (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!

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

  • Recently Browsing   0 members

    No registered users viewing this page.