.svg Files distorted


I tried to import a .svg (screenshot for reference):

This was the result:

In retrospect, I may have created it too large, but I don’t know why all the proportions were thrown off.

I checked; the svg is 86.4 x 297.1 pt (259.2 x 891.3 px)



Ah, it looks like there’s a bug in the SVG importer :confused:

I’m pushing a small update later this weekend that should fix this problem~



Great! Glad to hear it! :+1:



Hopefully it is ok to revive old topics, if the issue is concerning the same stuff.

The new editor does not seem to be able to import .svg (but maybe I am missing something obvious?).
The old editor has problems importing some .svg files:



No, I don’t think you can import .svg files in the new editor yet.

The infinity symbol one’s lag could be from its large set of gradient stops and/or nodes…

1 Like


Yeah, I think the gradients are to blame here. It doesn’t have that many points. I think gradient display needs optimization, because the browser should be able to handle it without much issue.

That’s a deal breaker for me :( I like the ability to make some of my stuff in a more robust editor (illustrator). I will stick to the legacy editor for time being…



It seems the old editor is also not ding so hot on importing .svg files:

Looks OK in the editor:

Not so much once it is run :(

Here’s the file (made with legacy editor) if anyone wants to check it:
New Project-Jun12-2019-11.41PM.wick (4.4 KB)

It seems I will need to either wait for better .svg support, or few more tools added to the editor before I can start making stuff :frowning:



Oof I’ve been putting off SVG import in the alpha editor for too long >.>

Will try to get it ported in + fixed tomorrow morning~

1 Like


Thanks :slight_smile: No rush tho, I was just excited as I just (re)discovered Wick and wanted to make some polished stuff, instead of working within the limitations.

Nevertheless, having SVG import would be nice, but I don’t want to rush you guys, you already have an awesome tool here :)

1 Like


Hey again,

SVG import is now implemented in a separate branch on the repo: https://github.com/wicklets/wick-editor

It’s currently very buggy. There are some weirder features in some SVGs that Wick doesn’t support yet (stuff like masks, SVG groups, viewports, etc) that cause a lot of rendering problems on the canvas :disappointed_relieved:

For basic SVGs, it works very well. It even works with gradients (even though you can’t edit them in Wick yet). I’m just not sure if it’s quite robust enough to be pushed yet.

Will keep you updated though!



Awesome. Will clone and try to run it locally later tonight to do some testing.

I am ok with having basic .svg import only. I plan to export stuff to svg from illustrator, so it shouldn’t have any of the fancy features. Never worked with pure svg so I do don’t think that any of those features would show up in my workflow.

I think you can push it with a failsafe. If you can identify those problematic features when accessing the file, you can always make it so that Wick will just give an error along the lines: $feature is not supported in .svg import.

So instead of going straight to importing, let wick read the file first, do it’s compatibility check and either import or give error message.

1 Like


That sounds like the way to go!

I can actually just try to filter out unsupported parts of the SVG and show some warning popups for those. In this way, some pieces of the SVG may be missing, but the various visual bugs should never happen and most SVGs will still import successfully (albeit incomplete).



@zrispo I cloned the repo and run it offline, but I can’t seem to import svgs (tried the add from asset library, and drag’n’drop).

…and, I just noticed it is on a separate branch… which branch should I use?

Edit: It seems to be on the master branch based on history, so how do I import svg?
I see something about parameters in the new svg code, but I am not really a note.js programmer (or anything from a newbie gamedev), so I have no idea where to put the parameter :stuck_out_tongue: