Jump to content

Question about vector gfx


Recommended Posts


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


.body(function() {


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


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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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);

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...