iOS SVGKit使用与代码简析

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

.svg 格式介绍

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

iOS SVGKit使用与代码简析_第1张图片
.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文件,读者可以自行选择。


iOS SVGKit使用与代码简析_第2张图片
iOS SVGKit使用与代码简析_第3张图片

    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导入。

iOS SVGKit使用与代码简析_第4张图片

3. 代码解析

从前文我们知道.svg格式是一种特殊的xml文件,因此很好理解,SVGKit要完成对DOM标签的解析,其中包含等。将svg标签转成CGPathRef等我们熟悉的OC编码。

     3.1 代码结构

            SVGKit主要包含四块主体逻辑,SVGKSource*,SVGK*Element,SVGParser*,SVGKExport*。从字面上理解,即是源文件读取,SVG Dom节点解析,和SVG导出。

iOS SVGKit使用与代码简析_第5张图片
代码结构

    3.2 代码类解析

iOS SVGKit使用与代码简析_第6张图片
SVGKit 工作流程

        3.2.1 SVGKSource*

主要是对svg文件的读取,官方支持了LocalFile和URL的方式读取,输出格式均为NSData。

        3.2.2 SVGK*Element

              a. 基础标签支持,主要创建了Dom Node阶段,对CSS style的解析和支持。

              b. SVG标签支持,包含标签中的g,d等SVG特定标签

iOS SVGKit使用与代码简析_第7张图片

    3.2.3 pathElement

          NSSanner 扫描特定字符,作为类型判断,目前有的特定字符有“MmLlCcVvHhAaSsQqTtZz”。举个例子,V字符代表Vertical Line Path。

iOS SVGKit使用与代码简析_第8张图片

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

iOS SVGKit使用与代码简析_第9张图片

读取v字符后的数值,转换熟悉的CGMutablePathRef

    3.2.4 SVGParser

        SVGParser分别对SVG标签,Gradients,CssStyle,Dom等逐层解析

iOS SVGKit使用与代码简析_第10张图片

        转换成SVGKImage

iOS SVGKit使用与代码简析_第11张图片

      3.2.4. SVGExporter

           .svg文件的输入成UIImage,和我们上文对webview的处理类似,依然是使用UIGraphics渲染。

iOS SVGKit使用与代码简析_第12张图片

结语

    .svg格式在app中可以更高质量的保真,并且可以减少app的资源大小和减轻设计师的工作。后续可以尝试使用svg来播放播放动画,和svg渐变色等功能。

你可能感兴趣的:(iOS SVGKit使用与代码简析)