SVG import

  • Question
  • Updated 3 years ago
I am not able to open or insert a SVG file. It would be nice, so i could use OpenClipart.
Photo of Anker

Anker

  • 1 Post
  • 0 Reply Likes
  • slighty annoyed

Posted 5 years ago

  • 11
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
SVG import in Sketch is indeed still quite a bit limited. We hope to improve on that in a future update. :-)
Photo of briannhinton

briannhinton

  • 19 Posts
  • 1 Reply Like
I'm hoping for this as well. Heck. I'm buying a new system in part simply so I can use Sketch. Would also like to see good export as well. Not sure what Sketch is capable of right now.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
Every little update we've released so far has improved SVG import.
People have been kind enough to send me files that they couldn't open, and with every consequent update, the SVG import has been steadily improving.

I plan to go on like this, and if you encounter any particular problems with a file, please let me know and I'll get Sketch to open it correctly. :-)
Photo of wolf4jc

wolf4jc

  • 1 Post
  • 0 Reply Likes
Just testing Sketch and not very impressed with SVG import - text is illegible and graphic elements totally bypassed. Pieter, how can I send my file to you?
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
mail@bohemiancoding would be the best place to send the svg file. I'll do my very best to get this file imported correctly. :-)
Photo of Joakim Hertze

Joakim Hertze

  • 2 Posts
  • 0 Reply Likes
I have issues with SVG import as well. So far I haven't been able to import *any* SVG files generated by Illustrator. I find it very frustrating, since there really is no way to bring stuff *into* Sketch.
Photo of aly

aly

  • 1 Post
  • 0 Reply Likes
I would like to purchase the software but its unable to open my svg files that I worked on inkscape
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
An update has been submitted to Apple that improves SVG import, but if you can send me an example document to mail@bohemiancoding.com I'll can see if it works now. And if not, I'll try to improve the import algorithm so that it will work.
Photo of Mark Coleran

Mark Coleran

  • 6 Posts
  • 2 Reply Likes
If limited support is only available it would be good to know exactly what support is included and the parameters we should be using to even think we can get close to importing something.

I have it working generally with svg1.1 but it mangles the artwork badly with smaller objects. Something it seems in Sketch, not SVG.

Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
I think the inaccuracy of this SVG import is because the 'pen/vector precision' in the edit menu is set to 'full pixels'. I think if you change it full precision the shape should look better. If not, could you post the SVG file here?

Full precision means that Sketch will round off any points to the closest pixel bounds which on very small shapes can lead to these weird effects.

I hope that helps. :-)
Photo of Mark Coleran

Mark Coleran

  • 6 Posts
  • 2 Reply Likes
Slightly better but not a huge or good enough improvement.

You also can't post the SVG here.
Photo of Ciré Reinart

Ciré Reinart

  • 10 Posts
  • 0 Reply Likes
Hello,
in sketch 2,0,2 i have made an icon (icon A), i close sketch. open sketch for a new document (icon B) . So now i want to put the two icons on the same document. What should i do for mix the two drawing ? If i drag drop the first in second open document: it diseappear ! Perhaps for the moment it is not possible to mix two or more documents in the same file ? Thank for your work.
Photo of andreas

andreas

  • 78 Posts
  • 2 Reply Likes
The object doesn't disappear, it simply moves away on the infinite canvas. Scroll or zoom out, and you'll see that it's still there. To move an object from one document to another, simply select it and hit cmd+c (copy). Then open the other document and paste (cmd+v) into that.
Photo of Ciré Reinart

Ciré Reinart

  • 10 Posts
  • 0 Reply Likes
Thank Andreas it is work fine with this method.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
Indeed that's what I would suggest too. Sorry for not replying earlier but thanks to @andreas for doing so. :-)
Photo of ufuk

ufuk

  • 15 Posts
  • 1 Reply Like
i have 2.0.3. i try to open http://www.clker.com/clipart-1744.html this svg file. inkscape and eazydraw draw it well. sketch has problems.

which vector format can i use with sketch better?. i can try to convert it.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
Sketch does indeed not properly import this SVG. You already emailed us about it and we'll take a look at it next time I work on SVG import. Apologies for the inconvenience. SVG is the only vector format Sketch can read but it's a complex one and certain effects etc are not yet supported in all their variations.
Photo of Mark Coleran

Mark Coleran

  • 6 Posts
  • 2 Reply Likes
My apologies for my tone in the following but it is kind of getting down to the problem here.

No where do you actually tell anyone what damn features in SVG are supported.

What are the best save options and best practice.

What should be avoided in artwork.

What should be done to artwork.

Scales, lines, grads.

You keep popping up with little nuggets about not being fully supported.

Perhaps try telling us what is!

Seriously trying to give Sketch a chance but you are not an island and irrespective of resources and commitments, making it play with the rest of people's workflow will make or break it.

It has enormous potential and a beatiful app but right now, the lack of any mechanism to move between apps is killing it.
Photo of Peter Bradshaw

Peter Bradshaw

  • 8 Posts
  • 1 Reply Like
Sorry to say I agree with Mark - unable get stuff (and we have loads of resources in fireworks png/ai/svg/eps/psd and in Omnigraffle, even Keynote) into Sketch2.

Tips on formats and workflows would be appreciated. I was unable to even successfully import a simple button svg and i tried lots of ways including Inkscape.

Sketch has so many great features but workarounds are slowing us down when it comes to importing resources that can then be modified (rather than bitmap).
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
I'm sorry to disappoint all of you here. I can say that embedded image data is not supported, but apart from that the problem is that there is so much stuff in SVG, so many variations, optional things all over the place. You can mix and match SVG with private stuff, mix and match with SVG etc. I'm trying a different route now on SVG import but I have no idea yet whether that will work.

It's not as simple as "this is supported", and "this is not". Again, it's a ridiculously complex standard.
Photo of Peter Bradshaw

Peter Bradshaw

  • 8 Posts
  • 1 Reply Like
You know what...many of us here are designers or coders and I for one think you are doing a great job and this is one hell of a great product! The image/vector import must be a nightmare and as we use Sketch2 more and more our resources will be generated natively within the environment. So many thanks for the responses (that counts for a lot), keep up the great work and good luck. If you find any workarounds or have any general tips please let us know. Cheers from sunny England!
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
@Peter thanks for understanding.
The next update of Sketch will have some nice improvements to SVG import. It fixes some bugs in the path interpreter and improves gradient and text support.

If any of you want to help improve SVG support: Email us (or link here) a particular SVG that Sketch doesn't display correctly.

I do take a look at them and extend the importer to properly parse them and your help here is much appreciated. :-)
Photo of andreas

andreas

  • 78 Posts
  • 2 Reply Likes
Here's a great resource for easy access .svg's: http://thenounproject.com/
The majority works fine, but here's a few that doesn't work properly:

Skewed: http://thenounproject.com/noun/camera...

Assymmetrical: http://thenounproject.com/noun/airpla...

Wrong spacing on left trigger: http://thenounproject.com/noun/camera...

The white circles looks like they've melted: http://thenounproject.com/noun/camera...
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
Thank you very much for the samples. I'm happy to say that all four of them will open perfectly in the next update.
Photo of Peter Bradshaw

Peter Bradshaw

  • 8 Posts
  • 1 Reply Like
Thanks Andreas.
Photo of Mark Coleran

Mark Coleran

  • 6 Posts
  • 2 Reply Likes
Thanks for the reply and as a few folks have said above, we do get it and appreciate the issues.

Your answer though, is something of an excuse.

Is SVG messy, yes. Do people implement badly, yes. Is it hard, of course.

But...

A few people, Adobe included have taken some effort to give you a choice. I want the most basic component. The linework. Supported in the most basic versions of SVG and you have the option to decide which ones you will use.

Instead of second guessing and rolling your own solution (which to be honest has the capacity to make the situation you describe worse, not better) just make a decision and use a single specced format. Any of them, even if it is just SVG1 with no special features. Happy to redo my shades, grads etc as long as the integrity of line and basic fill is preserved.

Even now, despite the very clear request, you have simply not answered the single most important question everyone keeps asking you here.

You have included (a form) of SVG support. WHAT THE HELL IS IT?
What can we do to actually conform to what you have implemented so far and make our stuff work with Sketch?

Bitching about the format is fine, but doesn't help anyone here.

BTW

The vector parity issue of losing line integrity, answered in the above (vaguely) is also huge problem. Related perhaps.

If I scale a Sketch element, it is fine. Scale something brought in (if it comes in) can actually destroy the linework. As 'smart' as the pixel/half pixel thing is supposed to be, if it damages work then it is actually a dumb feature.

A few small things deeply wrong that are really making it hard to move this way. Awesome for those in such limited environments they can be exclusive, not so much in mixed where we need to mix tools and workflows.

The ultimate irony here is that I am actually succeeding in finding new ways to use Illustrator CS6 and it's appearance panel that are proving to be somewhat more flexible, if clunky, but are rapidly removing reasons to go to sketch as much as I would wish too.

I think it has awesome potential but at a baseline level it needs to work and it is not doing in a fundamental way right now. All my resources and previous work are one of my greatest assets and no mater how good you say, think or even the reality of Sketch is (and I to think it is good), losing that resource, is a deal killer.

It is a closeout and sandbox, at a time when we seriously need to opening this shit up to be more flexible and work better, no matter what out workflows.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
I suppose I could take a year (or more) off all other work and implement the full SVG 1.1 spec (the features that Sketch supports at least) but I don't think that's the best use of my time.

Since you asked, the spec I've been working off has been SVG1.1 but as you know, not every feature of this spec is supported. Also; line integrity will be greatly improved in the next update. :-)

I have no choice but to roll my own importer. Of course I am going by the spec but I still have to write all the code. I am not Adobe, and am just one guy working on two apps. One of which is Sketch, of which one feature is SVG import which needs improving. I know it needs work, and I'm working on it, but I cannot perform miracles. And I am not bitching on the format, I'm just trying to point out it's not as trivial as some make it sound to be. :-)
Photo of Mark Coleran

Mark Coleran

  • 6 Posts
  • 2 Reply Likes
I appreciate such things Peter and am hopefully not making this comment from a position of ignorance. I have worked in software for a few years now and understand the tensions of time and cost.

It is hard, many things are.

You are right saying you are not Adobe, but then you might be surprised at how small the teams are that do those apps. Of course they have also been rolling them for 20 years. A little bit of a head start.

There are two choices with these kind of apps. A single sovereign application that works as a replacement. A huge undertaking but admirable aim. Takes a long time and a tough road especially when expectations and the landscape requires a hell of a lot. Takes a lot to get into peoples workflows as a replacement.

The second is something that is perhaps limited but a great adjunct to current systems. Finds a place and as it grows, takes over more and more of the work. Can get massively mroe adoption and awareness early.

But once again, I ask the question that keeps not getting answered here...

What do we actually have to do, to make this work, right now?
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
To answer your question; I believe Illustrator's SVG export has a "maximise compatibility" setting that should work a lot better for Sketch.
Also; wait for the next update of Sketch as that as some great improvements.
If you then still have files that don't open correctly; please send them to us and we'll make them work.

I hope that helps :-)
Photo of Peter Bradshaw

Peter Bradshaw

  • 8 Posts
  • 1 Reply Like
Well said Pieter - keep going, I am using Sketch everyday now! This new online shop (www.yayretro.co.uk) was designed in Sketch (just ironing out a couple of code glitches tonight but otherwise done). The simple shapes/vectors were done in Sketch as well as each page layout.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
Thanks for understanding, and glad to hear you're really using the app. :-)
Photo of ufuk

ufuk

  • 15 Posts
  • 1 Reply Like
what about svg export? i could not check. does it work well? soon i will need its svg export feature.
Photo of Pieter Omvlee

Pieter Omvlee, Official Rep

  • 2584 Posts
  • 189 Reply Likes
SVG Export at the moment is very very basic. Basically, only shapes get exported properly
Photo of ufuk

ufuk

  • 15 Posts
  • 1 Reply Like
when will you release new version that has better support for both import and export svg?
Photo of Jonne Omvlee

Jonne Omvlee, Employee

  • 25 Posts
  • 0 Reply Likes
The next update will significantly improve SVG import. We hope to release this update very soon.
Photo of ufuk

ufuk

  • 15 Posts
  • 1 Reply Like
please also improve svg export. sketch is an vector editor and svg is an important vector format.
Photo of Thales Fernando

Thales Fernando

  • 2 Posts
  • 0 Reply Likes
Really.. when...?