How to render SVG with PixiJS?

javascript svg webgl pixi.js
Dakun Skye picture Dakun Skye · Jul 29, 2015 · Viewed 9k times · Source

I'm trying to make a game using SVG images for scalability and for procedurally making physical objects from them (see matter.js for how).

The problem I'm having is if I load 2 different SVG textures and then render them, the second has the first layered underneath it.

This doesn't happen with raster images and doesn't happen with the canvas options, only with WebGL.

Is there a way to stop this or am I doing the SVGs wrong?

Answer

andrevenancio picture andrevenancio · Nov 9, 2018

So I think you're mixing concepts a bit.

SVG is one thing and WebGL is another. SVG's are rendered by the browser and you can scale them up or down without losing quality/resolution or whatever you want to call it.

This characteristic however is not possible in WebGL because WebGL rasterises images. A bit like taking a screenshot and putting it in a layer on Photoshop. You can manipulate that image, but u can't scale it without starting to see the pixels.

So short answer is, you can't use SVG's in a WebGL hoping to make your graphics "scale".

In regards to your example above, the result is the expected.

You are loading 2 png textures and overlaying them.

Related questions

Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More