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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM