title: Lining Up Bezier curves taken from SVG files
body: <p>So I am currently working on a subclass of UIView which uses <a href="https://github.com/71squared/TBXML/" rel="nofollow">TBXML</a> to parse a SVG XML files and strip the 'g' path instructions out. Then it passes these sets of instructions to <a href="http://ponderwell.net/2011/05/converting-svg-paths-to-objective-c-paths/" rel="nofollow">SvgToBezier</a> - a simple parser that takes the path instructions as input and returns a UIBezierPath object. Then it draws them in the drawRect method.</p>
  
  <p>The paths render fine, but the problem is they don't line up with each other the way they're supposed to (they way they show up in google chrome, adobe illustrator, etc)</p>
  
  <p>I know the SVGKit library allows parsing of complex svg files, however I want to write this myself so I can expand my understanding of the concepts involved.</p>
  
  <p>First I'll show you my drawRect method, followed by an example SVG file, it's expected output, and it's actual output drawn on the iPhone in a 300x300 rect.</p>
  
  <pre><code>- (void)drawRect:(CGRect)rect
  {
  
  
  //getting the XML from set property
  TBXMLElement *root = self.svgRoot.rootXMLElement;
  
  //getting the rect tag, which is the background
  TBXMLElement *rectColor = [TBXML childElementNamed:@"rect" parentElement:root];
  
  //getting the first g tag
  TBXMLElement *g1 = [TBXML childElementNamed:@"g" parentElement:root];
  
  //and it's child path tag
  TBXMLElement *path1 = [TBXML childElementNamed:@"path" parentElement:g1];
  
  //getting the sibbling g tag
  TBXMLElement *g2 = g1-&gt;nextSibling;
  
  //and it's child path tag
  TBXMLElement *path2 = [TBXML childElementNamed:@"path" parentElement:g2];
  
  //create a context reference
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  
  //flip the context so the origin points jive
  CGContextTranslateCTM(ctx, 0, rect.size.height);
  CGContextScaleCTM(ctx, 1.0, -1.0);
  
  //get fill color for first path
  const char *str1 = [[TBXML valueOfAttributeNamed:@"fill" forElement:g1] cStringUsingEncoding:NSASCIIStringEncoding];
  long x1 = strtol(str1+1, NULL, 16);
  
  UIColor *rgb1 = UIColorFromRGB(x1);
  
  //get fill color for second path
  const char *str2 = [[TBXML valueOfAttributeNamed:@"fill" forElement:g2] cStringUsingEncoding:NSASCIIStringEncoding];
  long x2 = strtol(str2+1, NULL, 16);
  
  UIColor *rgb2 = UIColorFromRGB(x2);
  
  //get fill color for rect background
  const char *str3 = [[TBXML valueOfAttributeNamed:@"fill" forElement:rectColor] cStringUsingEncoding:NSASCIIStringEncoding];
  long x3 = strtol(str3+1, NULL, 16);
  
  UIColor *rgb3 = UIColorFromRGB(x3);
  
  //turn them into CGColors
  CGColorRef color1 = rgb1.CGColor;
  CGColorRef color2 = rgb2.CGColor;
  CGColorRef color3 = rgb3.CGColor;
  
  //draw the rect background and fill it
  CGContextSetFillColorWithColor(ctx, color3);
  CGContextFillRect(ctx, CGRectMake(0, 0, rect.size.width, rect.size.height));
  
  
  //make a bezier path from the first path tag using SvgToBezier
  SvgToBezier *bezier1 = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:[TBXML valueOfAttributeNamed:@"d" forElement:path1] rect:rect];
  
  //make second bezier path
  SvgToBezier *bezier2 = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:[TBXML valueOfAttributeNamed:@"d" forElement:path2] rect:rect];
  
  
  //set fill color for first bezier
  CGContextSetFillColorWithColor(ctx, color1);
  
  //draw it
  UIBezierPath *bezierPath1 = bezier1.bezier;
  
  CGContextAddPath(ctx, bezierPath1.CGPath);
  CGContextDrawPath(ctx, kCGPathEOFill);
  
  
  //second bezier
  CGContextSetFillColorWithColor(ctx, color2);
  
  UIBezierPath *bezierPath2 = bezier2.bezier;
  
  CGContextAddPath(ctx, bezierPath2.CGPath);
  CGContextDrawPath(ctx, kCGPathEOFill);
  
  
  }
  </code></pre>
  
  <p>Here's the <a href="http://picsilk.com/svgraw.php" rel="nofollow">Raw SVG</a></p>
  
  <p>Here's the <a href="http://picsilk.com/svgrender.php" rel="nofollow">Expected Drawing Result</a></p>
  
  <p>And here's the <a href="http://picsilk.com/svgiphone.png" rel="nofollow">Actual iPhone Output (screenshot from iOS Simulator)</a></p>
  
  <p>I've been experimenting with all kinds of calculations and CGAffineTransforms.. left all that  out of the code because it will just confuse things imo.</p>
  
  <p>Thanks for any and all help!</p>
  
  <p>Cheers</p>
  
  <p>EDIT:
  Including another case, just to illustrate the inconsistency (consistency?) of the problem.</p>
  
  <p><a href="http://picsilk.com/svgraw2.php" rel="nofollow">Raw</a></p>
  
  <p><a href="http://picsilk.com/svgrender2.php" rel="nofollow">Expected</a></p>
  
  <p><a href="http://picsilk.com/svgiphone2.png" rel="nofollow">Actual</a></p>