pocketsvg/PocketSVG

Rendering Issue (Offset incorrectly)

MrDuncanM opened this issue · 1 comments

I think I am having issues with the viewbox attribute. When adding the file to the projects demo it renders at the bottom of the SVGImageView. When rendering it using the SVGLayer directly I get the same result.

The SVG in question has the attribute viewBox="271 652 587 400". I don't see this taken into account in the code.

Reproduction Steps:

  1. Load the SVG: https://s3.amazonaws.com/music-provider-logos/AmazonMusic.svg
  2. Set contentsGravity = kCAGravityResizeAspect.
  3. Render the SVGLayer or display the SVGImageView.
  4. The SVG is offset to the bottom of the context / view.

The basic gist of what I am trying follows:

SVGLayer *testLayer = [[SVGLayer alloc] initWithContentsOfURL:@"https://s3.amazonaws.com/music-provider-logos/AmazonMusic.svg"];
testLayer.contentsGravity = kCAGravityResizeAspect;
testLayer.frame = CGRectMake(0, 0, 300, 300);

UIGraphicsImageRendererFormat *format = [UIGraphicsImageRendererFormat defaultFormat];
format.scale = 1;
    
UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(300, 300) format:format];

UIImage *scaledImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
    // the SVG is white so a dark background is helpful.
    CGContextSetRGBFillColor(rendererContext.CGContext, 0, 0, 0, 1); 
    [rendererContext fillRect:CGRectMake(0, 0, 300, 300)];

    [testLayer renderInContext:rendererContext.CGContext];
};

At this point I grab a PNGRepresentation of the scaledImage but I don't think that is relevant since adding the SVG reference above to the demo also renders at the bottom of the screen not centered.

Notes:

  • If I check testLayer.preferredFrameSize it returns roughly CGSize(839, 1026)
  • Opening the SVG in GIMP defaults to the "correct" resolution of 587x400 as defined in the viewbox attribute.
  • The image I get out looks like this:
    AmazonMusic

Specifications

  • PocketSVG Version: Master
  • Xcode Version: 10.2.1
  • iOS Version: 12.2

viewbox is not taken into account. PocketSVG simply reads the paths as CGPaths or SVGBezierPaths. You'll have to process the svg to get rid of the offset.