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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。