iOS 展示SVG(SVGKit的使用)

https://www.jianshu.com/p/6b82beae0379

 

近期公司的移动端项目的icon都在使用svg(矢量图).svg在放大或者缩小的情况下,图像的图形质量不会有所损失.所以与大家分享一下两种iOS展示svg的方法.

一:svg就是XML,可以使用UIWebView/WKWebView进行加载.

UIWebView

NSString *svgPath = [[NSBundle mainBundle] pathForResource:@"svg名称" ofType:@"svg"]; NSData *svgData = [NSData dataWithContentsOfFile:svgPath]; NSString *reasourcePath = [[NSBundle mainBundle] resourcePath]; NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true]; UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [webView loadData:svgData MIMEType:@"image/svg+xml" textEncodingName:@"UTF-8" baseURL:baseUrl]; 

WKWebView

NSString *svgPath = [[NSBundle mainBundle] pathForResource:@"svg名称" ofType:@"svg"]; NSData *svgData = [NSData dataWithContentsOfFile:svgPath]; NSString *reasourcePath = [[NSBundle mainBundle] resourcePath]; NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true]; WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds]; [webView loadData:svgData MIMEType:@"image/svg+xml" characterEncodingName:@"UTF-8" baseURL:baseUrl]; 

二:使用SVGKit

首先说道SVGKit项目的集成.

①使用CocoaPods集成, 此方法支持模拟器运行.

pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'
因为SVGKit本身集成了一个另外的一个第三方,所以也要集成一下.
pod 'CocoaLumberjack'

②直接使用framework.(此方法会分离模拟器架构, 不支持模拟器运行.想了解分离模拟器架构的可以看下.)

1.从github上下载之后,打开文件夹的SVGKit-iOS.然后xcode选项,Product->Scheme->Edit Scheme

 

选择编译类型.png

如上图根据情况选择.然后command+b进行编译.

 

打开编译文件.png

编译成功后,打开Products,Show in Finder.

 

debug/release.png

 

.a文件与user文件夹.png

随后选择你编译后相应的的文件夹,将libSVGKit-iOS.2.0.0.a和user文件夹一起拖入项目.

2.SVGKit还使用了一个第三方.CocoaLumberjack,有兴趣的小伙伴可以自行了解一下.
在此,我们需要将CocoaLumberjack.framework处理后放到我们的项目中.

 

CocoaLumberjack.framework.png

同样是在SVGKit-iOS中,找到需要开发的那个CocoaLumberjack.framework.

此处有一个坑,就是SVGKit中的CocoaLumberjack.framework是包含模拟器的cpu架构的,会导你上传打包不成功.(可以统一使用pod集成,喜欢用真机测试的伙伴,也可以继续使用这种方法)

接下来对他进行处理.
使用终端依次执行以下操作.将模拟器的cpu架构分离出来,保留并合并真机cpu架构.

//检测支持哪种框架 lipo -info ./CocoaLumberjack.framework/CocoaLumberjack 

//分别将armv7和arm64分离出来 mkdir armv7 mkdir arm64 lipo ./CocoaLumberjack.framework/CocoaLumberjack -thin arm64 -output ./arm64/CocoaLumberjack lipo ./CocoaLumberjack.framework/CocoaLumberjack -thin armv7 -output ./armv7/CocoaLumberjack 

lipo -info ./arm64/CocoaLumberjack
lipo -info ./armv7/CocoaLumberjack

//将分离出来的进行合并,并覆盖原文件 lipo -create ./armv7/CocoaLumberjack ./arm64/CocoaLumberjack -output ./CocoaLumberjack.framework/CocoaLumberjack 

//删除之前分离的产物 rm -rf ./arm64 rm -rf ./armv7 

//再次进行检测支持的框架 lipo -info ./CocoaLumberjack.framework/CocoaLumberjack 

将处理后的CocoaLumberjack.framework拖入项目.

最后添加一下需要的框架

CoreText
CoreImage
libxml2.dylib
QuartzCore
CoreGraphics
UIKit

到此,SVGKit在你的项目集成成功了.

③.SVGKit的使用.

SVGKit的使用和UIImage的使用很像.
可以简单封装一个分类.UIImage+SVGManager
.h

#import <UIKit/UIKit.h> @interface UIImage (SVGManager) /** show svg image @param name svg name @param size image size @return svg image */ + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size; @end 

.m

#import "UIImage+SVGManager.h" #import "SVGKImage.h" @implementation UIImage (SVGManager) + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size { SVGKImage *svgImage = [SVGKImage imageNamed:name]; svgImage.size = size; return svgImage.UIImage; } @end 

然后你再使用svg图片的时候,使用它就可以进行展示.

好了,以上就是这次的分享内容了.有不足之处还请各位大佬指出.欢迎交流~

更新

对展示SVG的方法进行优化,增加修改颜色功能.
.h

/** show svg image @param name svg name @param size image size @param tintColor image color @return svg image */ + (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size tintColor:(UIColor *)tintColor; 

.m

+ (UIImage *)svgImageNamed:(NSString *)name size:(CGSize)size tintColor:(UIColor *)tintColor { SVGKImage *svgImage = [SVGKImage imageNamed:name]; svgImage.size = size; CGRect rect = CGRectMake(0, 0, svgImage.size.width, svgImage.size.height); CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(svgImage.UIImage.CGImage); BOOL opaque = alphaInfo == kCGImageAlphaNoneSkipLast || alphaInfo == kCGImageAlphaNoneSkipFirst || alphaInfo == kCGImageAlphaNone; UIGraphicsBeginImageContextWithOptions(svgImage.size, opaque, svgImage.scale); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextTranslateCTM(context, 0, svgImage.size.height); CGContextScaleCTM(context, 1.0, -1.0); CGContextSetBlendMode(context, kCGBlendModeNormal); CGContextClipToMask(context, rect, svgImage.UIImage.CGImage); CGContextSetFillColorWithColor(context, tintColor.CGColor); CGContextFillRect(context, rect); UIImage *imageOut = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return imageOut; }

作者：像风一样的孩子丶
链接：https://www.jianshu.com/p/6b82beae0379
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。