SVG String to UIImage for iOS

Question

I try to make an iOS application and use Github API with SDWebImage. Here is the code to get "User Profile Image".

[manager GET:@"https://api.github.com/users/(here is your account name)/following?page=1&per_page=100"
  parameters:nil
     success:^(AFHTTPRequestOperation *operation, id responseObject) {

         NSArray *array = [NSJSONSerialization JSONObjectWithData:responseObject
                                                          options:NSJSONReadingAllowFragments
                                                            error:nil];
         for (NSDictionary *dic in array) {
             [profileImageArray addObject:[dic valueForKey:@"avatar_url"]];
         }

     }failure:^(AFHTTPRequestOperation *operation, NSError *error) {
         NSLog(@"Error: %@", error);
     }];

this works well.

However, when I try to get Contribution heatmap images, I can't get images of Contribution heatmaps, because contribution heat maps are "SVG String".

Contribution heatmap is Here.

https://qiita-image-store.s3.amazonaws.com/0/19462/43207385-f3e4-1c96-b288-78802beee357.png

Then, after researching, I tried "SVGKit", "PocketSVG", "SKUBezierPath+SVG", and so on. But such libraries not works well for SVG "String" but SVG "files".

I can get a contribution heatmap SVG by using this URL

https://github.com/users/(here is username)/contributions

Here is that result.

https://i.stack.imgur.com/ihzWt.png

I can't treat this response as UIImage. I also tried to change responseData to NSData and convert UIImage, but it also doesn't work well.

Could you teach me how to treat "github contribution heatmap's SVG" as UIImage?

Glenn Howes · Answer 1 · 2016-03-15T13:25:09.050

3

SVGgh contains an SVGRenderer class which has an init method—initWithString:(NSString*)anSVG—you can use a renderer created that way to tell an SVGDocumentView to render your SVG. I wrote SVGgh.

The SVGRenderer class now has a -(UIImage*)asImageWithSize:(CGSize)maximumSize andScale:(CGFloat)scale method which will directly create a UIImage.

In your case, it doesn't appear that you are getting a complete SVG document as it's missing its XML declaration. So you should probably take the block and add it to a basic XML prefix such as in Swift:

let xmlPrefix  = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"
\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">"

let documentString = xmlPrefix + serverImage

let renderer = SVGRenderer(string: documentString)
let image = renderer.asImageWithSize(CGSize(100, 100)), andScale:2.0)

Notice that I used the \ character to escape all the quotation hash marks. I have not compiled this snippet so the Swift might be a bit off.

edited Mar 15 '16 at 13:25

answered Apr 07 '15 at 15:10

Glenn Howes

5,447
2
25
29

Hi, what is the format of the string needed, I am trying to use your library. an example will be great. Thanks – shannoga Mar 15 '16 at 05:41
The format is an SVG document. So you want to take the string you get from your server and take the part that is inside blocks and give it an XML header. I'll edit my response a bit. – Glenn Howes Mar 15 '16 at 13:18
This is what I did but I get a black rectangle instead of the image (Testing on a browser works fine). I there a way I can present my code in a note ? Thanks – shannoga Mar 15 '16 at 13:20
OK I added a new question with my sample code and SVG string. It would be great if you could take a look. http://stackoverflow.com/questions/36014725/creating-a-uiimage-from-svg-string – shannoga Mar 15 '16 at 14:55

SVG String to UIImage for iOS

1 Answers1