最近设计侧希望可以支持svg的切图，因为iOS切图需要出至少两个尺寸，@2x和@3x以适配不同的屏幕分辨率。加上图案层面，不同的大小和颜色需求，设计侧确实需要反复切图。图片资源虽然不占资源的大头，但是减少图片资源的数量，也可以一定程度的减少应用的体积。
.svg 格式介绍
打开一个.svg格式的文件，可以看到SVG文件其实是一个XML格式的文件，主要以路径标签path来描述矢量图片。
iOS支持SVG目前有两种方式，一种是基于WebView，另一种则使用SVGKit导入。
基于WebView加载
因为svg其实是一个xml的一个子集。所以我们可以通过webview的方式加以展示。
NSString *svgName = @"svg名称";
NSString *svgPath = [[NSBundle mainBundle] pathForResource:svgName ofType:nil];
NSData *svgData = [NSData dataWithContentsOfFile:svgPath];
NSString *reasourcePath = [[NSBundle mainBundle] resourcePath];
NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true];
UIWebView *webView = [[UIWebView alloc] init];
webView.frame = CGRectMake(0, 0, width, height);
[webView loadData:svgData MIMEType:@"image/svg+xml" textEncodingName:@"UTF-8" baseURL:baseUrl];
随后可以将webview的内容设置在UIScrollView的content中，在通过UIGraphic生成图片UIWebview转UIImage
SVGKit的使用
SVGKit is a collection of JavaScript libraries for painless client-side SVG manipulation: SVGKit provides browser-independent access, SVGCanvas implements Canvas API, and SVGPlot plots/graphs data and functions
1. 安装
官网介绍支持两种安装方式,可以使用.frameWork或者静态库.a文件安装。本文将使用官方推荐的.framework方式安装。
1.1 首先从官网下载SVGKit源码
1.2 打开"SVGkit-iOS.xcodeproj",选择"SVGKitFramework"，command+B编译完成后可以在相应Finder路径下找到SVGKit.framework。如果选择"SVGkit-iOS"编译，则生成相应的.a文件，读者可以自行选择。
1.3 打开自己的项目，在Build Phases - Link Binary With Libraries 中添加SVGKit.framework.
1.4 然后按需添加 CoreText CoreImage libxml2.dylib QuartzCore CoreGraphics UIKit，这里大多不需要添加，建议编译报错了再按需添加。
2. 使用
2.1 导入头文件SVGImage.h、SVGKit.h
2.2 使用 SVGKImage class 加载.svg文件
2.3 再通过 +(UIImage*) exportAsUIImage:(SVGKImage *)image 输出 UIImage
2.4 这里要注意，文件不是放在Assets里，而是当做bundle resource加载。建议在resource文件下新建一个文件夹，以folder references导入。
3. 代码解析
从前文我们知道.svg格式是一种特殊的xml文件，因此很好理解，SVGKit要完成对DOM标签的解析，其中包含<svg><path><linearGradient>等。将svg标签转成CGPathRef等我们熟悉的OC编码。
3.1 代码结构
SVGKit主要包含四块主体逻辑，SVGKSource*，SVGK*Element，SVGParser*，SVGKExport*。从字面上理解，即是源文件读取，SVG Dom节点解析，和SVG导出。
3.2 代码类解析
3.2.1 SVGKSource*
主要是对svg文件的读取，官方支持了LocalFile和URL的方式读取，输出格式均为NSData。
3.2.2 SVGK*Element
a. 基础标签支持，主要创建了Dom Node阶段，对CSS style的解析和支持。
b. SVG标签支持，包含标签中的g，d等SVG特定标签
3.2.3 pathElement
NSSanner 扫描特定字符，作为类型判断，目前有的特定字符有“MmLlCcVvHhAaSsQqTtZz”。举个例子，V字符代表Vertical Line Path。
首先扫描到特定字符“v”
读取v字符后的数值，转换熟悉的CGMutablePathRef
3.2.4 SVGParser
SVGParser分别对SVG标签，Gradients，CssStyle，Dom等逐层解析
转换成SVGKImage
3.2.4. SVGExporter
.svg文件的输入成UIImage，和我们上文对webview的处理类似，依然是使用UIGraphics渲染。
结语
.svg格式在app中可以更高质量的保真，并且可以减少app的资源大小和减轻设计师的工作。后续可以尝试使用svg来播放播放动画，和svg渐变色等功能。
