I don't think this is because it is SVG, it just because you scaled it. Scaling in WebGL is bicubic by default and linear in canvas. Which means it will be blurry. You should size the image appropriately then render it.

Pixi.js is a bitmap renderer, not a vector renderer, meaning that rendering SVG doesn't really give you any benefit over say png/jpg.

Hey guys,

@englercj is correct. Pixi rasterizes the SVG when you load it in. It has no real support for svg at the moment. This is something we plan on looking into further down the line should there be enough demand.

Thanks!

Reopening this since people obviously want it, but not putting it on a milestone yet.

If anyone wants to write a v3 plugin for this, I'd be happy to help out with it. We have some other awesome plugins we will be making first, so this may be a while unless the community takes it up to do it!

Change the scale to 1, as in spriteSVG.scale.set(1);. Edit the first tag in the SVG file...double the size of the viewport like the following:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200">

Perhaps someone can write a routine to do this and then make a texture from the result.

I would have posted a modified jsfiddle, but I am unable to get past the Cross-Origin Resource Sharing issue.

I've been working on an SVG to PIXI.Graphics conversion thingy for the past couple of hours and it works pretty well:

https://github.com/saschagehlich/pixi-svg-graphics

You can see a demo here:
http://filshmedia.net/lab/pixi-svg/
(The PIXI.Container is scaled up to 10x (original SVG is like 80x80), and it's still crispy)

It's not fully implemented yet, but I tried it with a couple of SVG files and I think this is a good start. Unfortunately complex geometry does not work right now, but I'll look into that within the next couple of days.

If anyone wants to help out - feel free to contribute. :)

+1

loads of assets in games don't really fit then notion of everything is a raster

My PIXI-SVG-Graphics project now supports complex paths, making it useable. Also, I published it as a module on npm: https://www.npmjs.com/package/pixi-svg-graphics

I would prefer a solution that leverages the browsers SVG render engine instead of implementing a new render engine.

My idea would be to create a subclass of Sprite (and/or BaseTexture) "SVGSprite". If the webGL renderer is used, the svg must be rendered to a texture in the displayed size so it does not get blurry.

The idea:

• create a 2d canvas in the exact size that is needed for the webgl renderer
• use .drawImage(svg_file,0, 0); on the 2d canvas
• use the 2d canvas as texture for the webGL renderer

The size must be determined using the global transformation matrix so the scale is correct computed even when the SVGSprite is insied a scaled container. The SVGSprite must have an update function so the calculation and source canvas is redone.

This way all SVG features the browser supports work in pixi and the result is non-blurry.

@FlorianLudwig so something like https://gist.github.com/biovisualize/8187844 used with PIXI.Texture.fromCanvas with some way of of updating the canvas version of the image if an attribute of the SVG changed like mySVG.setAttribute("transform", "scale(50 50)");?

@saschagehlich

My PIXI-SVG-Graphics project now supports complex paths, making it useable.

it looks like basic things are still missing?

This kind of code

    var canvas = document.createElement ('canvas');
    canvas.width = ...; canvas.height = ...;
    canvas.getContext ('2d').drawImage (svgImage, 0, 0, canvas.width, canvas.height);

    var sprite = new PIXI.Sprite (new PIXI.Texture (new PIXI.BaseTexture (canvas)));

allows to create the sprite with required resolution without altering svg (except if you want to stretch it, then you must add preserveAspectRatio="none" to svg tag).

If you wish to "+1" this issue, please use GitHub Reactions to +1 the original post. I will delete any "+1" messages in this thread as it is just noise and makes it impossible to read conversation here.

I modified the Texture code to support this, the 4th parameter takes a scale for the svg, like this:

new PIXI.Texture.fromImage('bunny.svg', undefined, undefined, 2.0);

I forked the bunnymark and you can play with the scale by changing line 66 from JS here:
http://codepen.io/anon/pen/pyXMzR.

@englercj, I can create a PR if this looks ok: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

This way one can scale and re-rasterize the textures on window resize so the scene will be responsive and still have the high performance that pixi provides.

PR: https://github.com/pixijs/pixi.js/pull/2614

PR merged, closing this!

That works good in Chrome und FF, but doesn't work in IE11. I got SecurityError with this line of code

let tiger = new Sprite(new PIXI.Texture.fromImage('images/tiger.svg', true, PIXI.SCALE_MODES.LINEAR, 8.0)); 

How to fix this?

Ah the good ol' SecurityError. That's a bug in IE11 that has been fixed in Edge, but not in IE11:

https://github.com/pixijs/pixi.js/issues/2928

There's nothing you can do, except converting your SVG to PNG

Good to know. Thanks for hint.

Am 14.12.2017 08:10 schrieb "Sascha Gehlich" notifications@github.com:

Ah the good ol' SecurityError. That's a bug in IE11 that has been fixed in
Edge, but not in IE11:

2928 https://github.com/pixijs/pixi.js/issues/2928

There's nothing you can do, except converting your SVG to PNG

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

I'm trying to use PIXI.Texture.fromImage to display a SVG image like you explained above, but on a smartphone the SVG seems blurry.

Here a sample code https://codepen.io/anon/pen/QaxqvP
On desktop browser it seems ok, but when I try this on my smartphone or android emulator the SVG renders like this:
https://imgur.com/VbXlypP (image on the left is PIXI-SVG; right, is an html img tag).

Maybe It is something with devicePixelRatio, it seems that the browser "Zooms-in" to fit the screen - since on desktop if I zoom-in I can emulate the same behavior.
How is the correct way to show/scale SVG on a device with pixel ratio bigger than 1?

Doesn’t look blurry to me. Screenshot is from an iPhone X.

Zoom in your screenshot, you will see it. Your is less blurry than mine but it is blurry.

I'm trying the example above, but for some reason,

let texture = new PIXI.Texture.fromImage('../assets/heart.svg', false, undefined, 2);

throws

ERROR Error: The SVG image must have width and height defined (in pixels), canvas API needs them.

If I load the image first with

PIXI.loader.add("../assets/heart.svg").load(...)

The error isn't thrown, but the rendered sprite that contains the texture from new PIXI.Texture.fromImage is all pixelated, which makes me believe the SVG isn't rendered correctly. Furthermore, changing the sourceScale seems to have no effect.

EDIT 1

So I just saw that sourceScale has no effect when a texture is loaded with the loader (https://github.com/pixijs/pixi.js/issues/4543). I will continue my research on why an error is thrown.

EDIT 2

The width and height of my svg was defined as follows: <svg width="38.148697mm" height="32.77169mm" ...>. Turns out that PIXI throws an error when the dimensions are specified in "mm". Removed the "mm" and everything works fine.

@maximedupre due to browser limitations, only px values work. That's why the error is thrown so that you know you need to modify your svgs.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.