Question about vector gfx

[Ninjadoodle]

Hi @enpu

DO you think that it is viable to use vector graphics (svg) in Panda, in the future?

I've heard that vector is still to slow for html5, but maybe technology has changed since then.

Thank you!

[enpu]

@Ninjadoodle

I just added support for SVG files, you can use it just like you use any image files.

game.module(
    'game.main'
)
.body(function() {

game.addAsset('sample.svg');

game.createScene('Main', {
    backgroundColor: '#fff',
    
    init: function() {
        var sprite = new game.Sprite('sample.svg');
        sprite.x = game.width / 2;
        sprite.y = game.height / 2;
        sprite.anchorCenter();
        sprite.scale.set(2);
        sprite.addTo(this.stage);
    }
});

});

Did not find much info about performance. Need to do some testing at some point, but i would assume it's slower than drawing images.

[Ninjadoodle]

Hi @enpu

This is absolutely awesome! You're a legend ... seriously.

Couple of things - svg doesn't seem to work with hires (anything above standard size).

This means if you're mixing raster and vector art, things don't work properly.

Also, how would 'retina' work with svg? Right now it displays quite blurry on a 'retina' screen, so @2x  (hires: 2 + retina) would have to be enabled to get a crisp vector.

Thanks again for the amazing job!

[enpu]

Just pushed fix to Loader to not try to load hires versions of svg (which doesn't make sense).

Though you do need to scale the svg sprite yourself with game.scale

var sprite = new game.Sprite('sample.svg');
sprite.scale.set(2 * game.scale);
sprite.addTo(this.stage);

I don't see any reason why it would not work with retina. What retina setting just does, is doubles the canvas size and then scales it back down with CSS.

[Ninjadoodle]

@enpu - Awesome  I am doing something wrong tho, as it's only displaying the top corner of my sprite.

[Ninjadoodle]

@enpu - It's really strange, when I preview through the panda player (on iPhone), the vector shows up fine. On desktop (panda preview window), I only get the top corner.

A couple of other things I've noticed while testing - Tiling Sprite doesn't work properly with hires and WebGL.

When WebGL is enabled, the svg doesn't show up as sharp as when using canvas - instead it's quite pixelated (i'm using retina and hires 4).

Let me know if you need me to test anything.

PS - SVG support this is a really amazing feature.

[enpu]

@Ninjadoodle

There might be something wrong in the svg file. I noticed also that some are rendered correctly and some only small part of it. Can you send me your svg? How did you export it?

I suspect the svg needs to be in a certain format to work correctly..

[Ninjadoodle]

hmmm ... I just bough Affinity Designer to finally get rid of Adobe software

I just sent you the file I'm using to test.

[enpu]

Here is svg tag from your file:

<svg width="100%" height="100%" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

And here is from my sample svg that is working correctly:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="472px" height="392px" viewBox="0 0 472 392" enable-background="new 0 0 472 392" xml:space="preserve">

(You can open svg in any text editor)

As you can see in your svg the width and height are defined in percents, while in the other they are pixels. I suspect that is the problem. Try if there is any export settings that you can change when creating the svg file.

The working one was generated with Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0

[Ninjadoodle]

@enpu - Thanks for that, I'll have a look now to see if I can change it.

[Ninjadoodle]

@enpu - I've exported with different settings and I can now display the whole image, but I'm having trouble with the scaling (can't seem to get the right size relative to the game scale).

[enpu]

For me, this svg is scaling as expected:

sprite.scale.set(2 * game.scale);

 

sample.svg

[Ninjadoodle]

@enpu - just tried a different setting again and the sizing works properly now

WebGL is still ignoring the hires tho and the svg shows up very pixelated. In canvas it looks perfect. Also WebGL is not showing tilingSprite correctly with hires.

[Ninjadoodle]

Hi @enpu

Just wanted to bump this in case you missed the post ...

SVG displays low-res with WebGL

also, tiling sprite doesn't work correctly with with WebGL

[enpu]

@Ninjadoodle

Sorry for the delay, a bit busy at the moment (some nice things coming soon!)

Is the TilingSprite issue related to SVG or is that just another thing?

[Ninjadoodle]

@enpu - no problem  tiling sprite seems like it’s own issue.

[enpu]

@Ninjadoodle

Just updated Pixi plugin to 1.1.2. TilingSprite should now work with hires also

[Ninjadoodle]

@enpu - Awesome works  Thanks!