在iOS中使用SVG格式的图片

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

在iOS中可以使用webView来加载和显示SVG格式的图片。代码如下：

NSString *svgName = @"fileName.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];

由于上述使用方式在iOS中是非常不方便的，现在一般大多采用SVGKit这个框架来处理和显示SVG格式的图片。[官方地址](https://github.com/SVGKit/SVGKit)

首先使用pod引入类库
pod 'SVGKit'
然后在代码中需要显示的图片的地方：
NSString  *svgName = @"jia";
SVGKImage *svgImage = [SVGKImage imageNamed:svgName];
SVGKLayeredImageView *svgView = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
svgView.backgroundColor = [UIColor clearColor];
[self.view addSubview:svgView];
svgView.frame = CGRectMake(100, 200, 44, 44);

SVG格式图片的大小对比，一般在iOS中现在都会保留2种分辨率的图片，俗称2倍图和3倍图。如果使用SVG格式图片的话，就只需要一张图了。下面是两种格式图片的大小对比。这次使用的就是一个十字图标为例。

这个图标，如果是SVG格式的图标的话，显示的大小是1042bit.如下图所示。

如果我们使用原图的话，那么2倍图和3倍图的大小分别是如下：

从以上的图片中可以看出，如果单纯从大小来对比的话，SVG格式的图片并不会占有太多的优势，既然存在这种格式的图片，本着存在即合理的思维来探讨，那么SVG格式的图片到底有哪些优势呢？

百度百科中给出来了几个SVG格式的特点，这里简单概述一下。我觉得显示效果和大图的体积优势可能还是比较明显的，对于小图而言，我们上面探讨的目前在体积方面并没有显示出来多小的体积。

格式优势：1、基于xml 2、采用文本来描述对象 3、具有交互性和动态性 4、完全支持dom

比较优势: 1、任意缩放 2、文本独立 3、较小文件（总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多） 4、超强显示效果（SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。） 5、超级颜色控制（SVG图像提供一个1 600万种颜色的调色板） 6、交互和智能化。