21

I am trying to import paths from a vector drawing program into the ios environment. I would like to get them into CGpaths or UIbezierpaths. I am most interested in importing paths from adobe illustrator. The best way seems to save as an svg and then import.

I have found some resources for parsing exported SVG files that describe the paths. However, everything I have found only deals with absolute paths and not relative paths. The path below has capital C's and lowercase C's. I know how to parse the capital C (absolute paths) but I have no idea how to parse the lowercase c's (relative paths)

I am looking for help with writing a parser for importing svg files into ios/cocoa. I think there is a big need for this judging by searching the internet for weeks.

Here, is an example of a path I would like to import into my iphone app. I am not looking to import the image, I want the path itself. So, I can manipulate it. Any help would be much appreciated.

x="0px" y="0px" width="320px" height="436px" viewBox="-1.4 -0.5 320 436"

 d="M294.1,116C290.6,1.4,170.9,0.4,159.6,0.5
C148.3,0.4,28.7,1.4,25.2,116c-3.7,120.3-49.6,141.4-5.9,233.9c41.3,87.4,130.7,87,140.4,86.7c9.7,0.3,99.1,0.8,140.4-86.7
C343.7,257.4,297.8,236.3,294.1,116z

If this was all absolute paths I would be able to solve this now. It is the relative (i.e. lowecase (c) paths) that are really confusing me.

Matt
  • 1,167
  • 1
  • 15
  • 26

7 Answers7

12

Alright folks, if you're willing to pay for it. This tool will solve all your issues. You can import svg or psd and will produce the code for you. I've used it and it is amazing!

http://www.paintcodeapp.com/

Matt
  • 1,167
  • 1
  • 15
  • 26
3

There's an open-source SVG library in ObjectiveC, specifically for iOS (and OS X, although the OS X build is a bit behind):

https://github.com/SVGKit/SVGKit/

(I've been using this on iOS projects since the start of this year, it works well)

2018 update: OSX support is now in, and SVGKit renders most SVG's fast + accurately. On the downside, advanced text features aren't all supported (e.g. yes to gradient-fill, but no to complex text-layout).

As of early 2012, it's not a 100% implementation of the SVG spec, but there's a lot of people working on getting it there.

Adam
  • 32,900
  • 16
  • 126
  • 153
2

Sketch 3 on Mac App Store is good at editing (can be better than PaintCode) and then exporting as SVG to PaintCode.

To get from PaintCode back to Sketch save as PDF and imports ok

https://itunes.apple.com/gb/app/sketch-3/id852320343?mt=12

Make sure canvas size in both is set to the same and in your views bounds else youll need to scale the context.

brian.clear
  • 5,277
  • 2
  • 41
  • 62
2

If you're willing to do some translation from JS to ObjC, then you might find this project helpful:

https://github.com/thelonious/svg-2d

Particularly, the path.js file which includes a parseData method, taking care of relative and absolute path commands.

https://github.com/thelonious/svg-2d/blob/master/shapes/path/Path.js

I should mention that I wrote this code years ago, but I have translated it to Java and C# and have used in professional products (can't share that code, unfortunately) and it seemed to work well in those environments as well.

HTH Kevin

thelonious
  • 261
  • 1
  • 6
0

SVGgh contains a class, SVGPathGenerator, which will convert an SVG path to a CGPathRef: 

+(CGPathRef) newCGPathFromSVGPath:(NSString*)anSVGPath whileApplyingTransform:(CGAffineTransform)aTransform;

You can use it to do exactly what you request.

[Swift 3 Update] If you want a pure Swift solution. My (in progress) Scalar2D library has an extension on CGPath that creates a CGPath from an SVG path.

Glenn Howes
  • 5,447
  • 2
  • 25
  • 29
0

Oneliner that adds an SVG to an NSView:

addSubView(SVGParser.svg(FileParser.xml(~/Desktop/test.svg)))

SVGLib for swift: https://github.com/eonist/swift-utils

Sentry.co
  • 5,355
  • 43
  • 38
0

This solution is a straight conversion of an SVG path string to UIBezierPath. It worked great for my app where I had to draw the united states as a UIView.

https://github.com/ap4y/UIBezierPath-SVG

Robert Bentley
  • 605
  • 7
  • 15