最近设计侧希望可以支持svg的切图，因为iOS切图需要出至少两个尺寸，@2x和@3x以适配不同的屏幕分辨率。加上图案层面，不同的大小和颜色需求，设计侧确实需要反复切图。图片资源虽然不占资源的大头，但是减少图片资源的数量，也可以一定程度的减少应用的体积。

.svg 格式介绍

打开一个.svg格式的文件，可以看到SVG文件其实是一个XML格式的文件，主要以路径标签path来描述矢量图片。

.svg格式

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 代码类解析

SVGKit 工作流程

        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渐变色等功能。