在iOS中使用SVG格式的图片

作者: shaneZhang 分类: ios技术 发布时间: 2019-04-11 16:48

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、交互和智能化。

如果觉得我的文章对您有用,请随意打赏。如果有其他问题请联系博主QQ(909491009)或者下方留言!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注