最近設(shè)計(jì)側(cè)希望可以支持svg的切圖，因?yàn)閕OS切圖需要出至少兩個(gè)尺寸贱纠，@2x和@3x以適配不同的屏幕分辨率峻厚。加上圖案層面，不同的大小和顏色需求谆焊，設(shè)計(jì)側(cè)確實(shí)需要反復(fù)切圖惠桃。圖片資源雖然不占資源的大頭，但是減少圖片資源的數(shù)量辖试，也可以一定程度的減少應(yīng)用的體積辜王。

.svg 格式介紹

打開一個(gè).svg格式的文件，可以看到SVG文件其實(shí)是一個(gè)XML格式的文件罐孝，主要以路徑標(biāo)簽path來描述矢量圖片呐馆。

.svg格式

iOS支持SVG目前有兩種方式，一種是基于WebView莲兢，另一種則使用SVGKit導(dǎo)入汹来。

基于WebView加載

因?yàn)閟vg其實(shí)是一個(gè)xml的一個(gè)子集。所以我們可以通過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的內(nèi)容設(shè)置在UIScrollView的content中收班，在通過UIGraphic生成圖片UIWebview轉(zhuǎn)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. 安裝

官網(wǎng)介紹支持兩種安裝方式,可以使用.frameWork或者靜態(tài)庫(kù).a文件安裝。本文將使用官方推薦的.framework方式安裝谒兄。

????1.1 首先從官網(wǎng)下載SVGKit源碼

????1.2 打開"SVGkit-iOS.xcodeproj",選擇"SVGKitFramework"摔桦，command+B編譯完成后可以在相應(yīng)Finder路徑下找到SVGKit.framework。如果選擇"SVGkit-iOS"編譯承疲，則生成相應(yīng)的.a文件邻耕，讀者可以自行選擇。

????1.3 打開自己的項(xiàng)目纪隙，在Build Phases - Link Binary With Libraries 中添加SVGKit.framework.

????1.4 然后按需添加 CoreText CoreImage libxml2.dylib QuartzCore CoreGraphics UIKit赊豌，這里大多不需要添加，建議編譯報(bào)錯(cuò)了再按需添加绵咱。

2. 使用

????2.1 導(dǎo)入頭文件SVGImage.h、SVGKit.h

????2.2 使用 SVGKImage class 加載.svg文件

????2.3 再通過 +(UIImage*) exportAsUIImage:(SVGKImage *)image 輸出 UIImage

????2.4 這里要注意熙兔，文件不是放在Assets里悲伶，而是當(dāng)做bundle resource加載。建議在resource文件下新建一個(gè)文件夾住涉，以folder references導(dǎo)入麸锉。

3. 代碼解析

從前文我們知道.svg格式是一種特殊的xml文件，因此很好理解舆声，SVGKit要完成對(duì)DOM標(biāo)簽的解析花沉，其中包含<svg><path><linearGradient>等柳爽。將svg標(biāo)簽轉(zhuǎn)成CGPathRef等我們熟悉的OC編碼。

? ? ?3.1 代碼結(jié)構(gòu)

????????????SVGKit主要包含四塊主體邏輯碱屁，SVGKSource*磷脯，SVGK*Element，SVGParser*，SVGKExport*。從字面上理解捧搞，即是源文件讀取控轿，SVG Dom節(jié)點(diǎn)解析，和SVG導(dǎo)出喝峦。

代碼結(jié)構(gòu)

? ? 3.2 代碼類解析

SVGKit 工作流程

? ? ? ? 3.2.1 SVGKSource*

主要是對(duì)svg文件的讀取，官方支持了LocalFile和URL的方式讀取，輸出格式均為NSData诡蜓。

????????3.2.2 SVGK*Element

? ? ? ? ? ? ? a. 基礎(chǔ)標(biāo)簽支持，主要?jiǎng)?chuàng)建了Dom Node階段胰挑，對(duì)CSS style的解析和支持万牺。

? ? ? ? ? ? ? b. SVG標(biāo)簽支持，包含標(biāo)簽中的g洽腺，d等SVG特定標(biāo)簽

????3.2.3 pathElement

? ? ? ? ? NSSanner 掃描特定字符脚粟，作為類型判斷，目前有的特定字符有“MmLlCcVvHhAaSsQqTtZz”蘸朋。舉個(gè)例子核无，V字符代表Vertical Line Path。

首先掃描到特定字符“v”

讀取v字符后的數(shù)值藕坯，轉(zhuǎn)換熟悉的CGMutablePathRef

? ? 3.2.4 SVGParser

????????SVGParser分別對(duì)SVG標(biāo)簽团南，Gradients，CssStyle炼彪，Dom等逐層解析

? ? ? ? 轉(zhuǎn)換成SVGKImage

? ? ? 3.2.4. SVGExporter

? ? ? ? ? ?.svg文件的輸入成UIImage吐根，和我們上文對(duì)webview的處理類似，依然是使用UIGraphics渲染辐马。

結(jié)語(yǔ)

? ? .svg格式在app中可以更高質(zhì)量的保真拷橘，并且可以減少app的資源大小和減輕設(shè)計(jì)師的工作。后續(xù)可以嘗試使用svg來播放播放動(dòng)畫喜爷，和svg漸變色等功能冗疮。