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格式的图片并不会占有太多的优势,既然存在这种格式的图片,本着存在即合理的思维来探讨,那么SVG格式的图片到底有哪些优势呢?


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


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


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

 
posted @ 2019-11-12 16:01  ios_福  阅读(6460)  评论(0编辑  收藏  举报