Xcode 6以后支持矢量圖,原生支持pdf格式,貌似可以通過第三方框架支持svg格式
pdf格式矢量圖
Xcode使用矢量圖的原理:Xcode在構建項目時會基于Asset Catalog中的PDF矢量圖形自動創建@1x、@2x和@3x三種規格的PNG文件.
-
注意:
- 矢量圖形的支持只是階段性的 - 在構建階段,Xcode會基于PDF生成PNG圖片并輸出到界面當中。
- 一旦完成矢量圖形的設置,你就無法為其指定新的輸出尺寸了。如果需要更大的規格,則需要創建新的PDF圖形,否則在使用AutoLayout時原來的圖片會失真。
- 正如前面所說的,iOS 8只能支持基于PDF生成的PNG文件;但OS X卻可以真正完整的支持矢量圖形,你可以直接通過Auto Layout或代碼來縮放矢量圖形,不會產生任何失真。
- 這種方式無法兼容iOS 7之前的系統,因為相關的圖形資源都是通過Asset Catalog管理的。
- 如果你已經使用了類似的腳本或工具來自動生成多種規格的圖形資源,那么這種方式不會給你帶來太多用處。不過,如果你的應用同時擁有OS X和iOS兩種版本,并且會用到一些相同的圖形,那么這種方法將會是事半功倍的。
使用步驟:
0.首先需要有一張大小滿足需求的pdf圖片(下例中圖片尺寸為100x100px,即畫布大小為100x100px,注意px是像素,pt是點),使用AI另存pdf格式注意不要勾選第一項
使用AI另存pdf格式
1.創建Asset Catalog,如果有則不用創建
創建Asset Catalog
2.將pdf矢量圖拖入Asset Catalog中,并設置其Scale factors屬性為single vector
設置pdf矢量圖
3.將圖片拖到位置上
拖圖片入坑
最終效果
svg格式矢量圖
-
下面這段話是網上有關Xcode不支持svg格式原因的描述
Why PDF instead of SVG or other formats
For SVG and other formats, the vector image has no actual size info, while PDF has size info. I think what Xcode 6 does is using the size info in PDF as actual display size, then generate 2x 3x files from the vector image.
通過第三方框架支持svg參考以下鏈接:
http://red-glasses.com/index.php/iphone/loading-svg-files-on-iphoneipad-svgkit-not-the-javascript-one/
- SVGKit地址:
https://github.com/SVGKit/SVGKit/