Xcode项目中使用矢量图(pdf,svg)

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/