Xcode 6允许VECTOR图像资产…如何使用它们?


72

当我发现一些非常有趣的东西时,我在摆弄Xcode 6 vs images资产:现在我们可以在其中指定矢量图像(在选择Images.xcassets后在“实用工具”窗格中查看)。

我尝试了一个带有.SVG图像的小应用程序(包含一个大的UIImageView)(没有用),然后是一个.EPS(也没有用),最后我尝试了一个.PDF。好吧,尽管我看到了图像,但它看起来是像素化的,而不是矢量化的。

因此,看来苹果公司正在为矢量图标/图像做准备。没有更多的应用程序图标版本,没有更多的“ @ 2x”图像。但是任何人都可以解锁该功能吗?


这里有一个关于此主题的博客:ericasadun.com/2014/06/09/…但是,他们只使用一张图像并没有任何运气,而是每个图像尺寸必须使用1个PDF。在这一点上,我认为该功能尚未完成。
vcsjones 2014年

@vcsjones我不同意。在我看来,工作很棒。
马特2014年

@Jean Le Moignan能否请您分享阅读链接?
开发人员

@Developer我希望可以,但我的问题完全基于Xcode中的反复试验,而不是任何书面材料。
Jean Le Moignan 2014年

我注意到,如果创建基于选项卡的iOS应用,则默认选项卡按钮图标pdf位于资产目录中。不确定pdfs的要求是什么(还没来得及说-Adobe Illustrator中打开它们)。
Nicolas Miari

Answers:


58

在对矢量资产进行一些实验之后,这是我的一些想法:

1.编译时间支持

经过几次试验,我相信这只是一个编译时支持。Xcode在编译时生成所有1x,2x和3x图像。这意味着它可以与旧版iOS一起使用。同时,这意味着在最终版本中,它仍为PNG格式,并且您无法从矢量文件中获得更大的无损图像。

2.为什么用PDF而不是SVG或其他格式

对于SVG和其他格式,矢量图像没有实际的尺寸信息,而PDF具有尺寸信息。我认为Xcode 6所做的是使用PDF中的尺寸信息作为实际显示尺寸,然后从矢量图像生成2x 3x文件。

Size info in PDF

3. PDF的文件大小无关紧要

一开始,我们担心的是PDF会比PNG大得多。我们尝试了http://smallpdf.com/对其进行压缩,并且效果很好。但是,如果原始的PDF文件没有像我之前所说的那样包含在构建中,那么PDF的文件大小就没有关系。

如果我发现其他任何问题,将继续编辑该帖子。

编辑14-09-25

@mredig提到,对于iOS,它在编译时生成位图,但对于OSX,它包括可缩放形式的矢量图像。

通过:http : //martiancraft.com/blog/2014/09/vector-images-xcode6/


1
我也相信这也是这样的……在运行时实际上并没有获得可伸缩资产,但是Xcode在构建时会为您创建位图资产,因此您不必导出多个PNG。检查(反编译?)已编译资产目录(.car)会很有趣,但是我还没有找到一种方法。
hagi 2014年

1
我找到了这篇文章:martiancraft.com/blog/2014/09/vector-images-xcode6它解释说,对于iOS,它在编译时生成位图,但对于OSX,它包括可缩放形式的矢量图像。
mredig

iPad资源呢?
Eugen Martynov 2014年

如何不包括原始PDF?我在Xcode中找不到任何设置可以做到这一点。
8suhas 2015年

对于更新版本的xcode,此链接可能会有所帮助:icons8.com/articles/how-to-use-vectors-in-xcode-7
Milad Faridnia,2017年

25

这是在Xcode 6中的资产目录中尝试矢量图像的方法:

  1. 制作一个新的图像集。

  2. 在图像集中选择一个空白图像插槽,然后将属性检查器中的弹出窗口切换为“向量”。您现在有了一个通用映像插槽。

  3. 将矢量PDF拖到该插槽中。

现在,无论在何处使用该图像,都将其大小调整到其上下文(例如,固定大小的图像视图)而无需光栅化,如以下屏幕快照所示:

在此处输入图片说明

编辑尽管这个答案,较大的PDF图纸进行栅格化。但是现在,请参阅https://stackoverflow.com/a/45623000/341994:在Xcode 9中,矢量PDF可以正确缩放,而无需光栅化。

编辑在Xcode 11中,此公式有效:在资产目录中,必须将“比例”弹出菜单设置为“单个比例”,然后将基于矢量的图像放入1x插槽。检查保留向量数据。做完了


1
我不认为此功能适用于应用程序图标;仅适用于应用内部艺术品。
马特2014年

1
我的问题是,当使用自动布局时,使用PDF图稿的视图(例如UIButton)会从原始PDF图稿中获取内容大小,这在所有情况下都不理想(我可能希望在iPad上使用更大的按钮)。您知道解决这个问题的方法吗?
flainez 2014年

23
为什么选择PDF,而不选择SVG?好奇怪
斯坦(Stan)2014年

1
@matt您能告诉我如何创建pdf文件吗?我可以使用photoshop生成pdf矢量文件吗?
kilik52 2014年

1
@Koen不,png不是矢量图像,而是位图。pdf文件本质上是一堆有关如何绘制路径,填充和颜色的说明。因此从位图->矢量不可能实现这种兼容性。由于不需要pdf,因此您可以坚持使用png
rwyland 2014年

22

您可以使用此在线工具将图像从svg转换为pdf

http://www.fileformat.info/convert/image/svg2pdf.htm

1-上传图片

2-选择宽度:24px,高度:24px

3-复制到您的xcode项目

4-转到Images.xcassets

5-右键单击并创建新的图像集

6-从右侧面板中选择(属性检查器)

7-将类型更改为矢量

8-将您的pdf图像拖放到此处

9-在您的项目中使用


我真的很想这样做。但这对我没有用。我正在尝试在React Native应用程序中使用这些资产,所以也许就是问题所在。
2015年

嗨,@ josh,如果您可以打开一个新的案例,说明得很好,也许我们可以为您提供帮助,即使它是一个本机应用程序,我认为您仍然可以使用矢量图像
Fareed Alnamrouti,2015年

好建议,车费。我决定不使用PDF的编译时支持,而是决定继续使用脚本来从普通SVG文件自动生成各种大小的PNG。我写了一篇有关如何使用脚本创建图标的文章(尽管它可以用于其他目的,例如React Native Static Images):habd.as/automating-ios-app-icon-creation
Josh Habdas

1
如果您不想设置宽度或高度/有大量的SVG,则可以使用cloudconvert(cloudconvert.com/svg-to-pdf)并选择所有文件
Sirens

4
如果有人感兴趣-在XCode 8中,而不是在Types中选择Vector,必须在Scales中选择Single Scale。
AX


3

我只是用图标,甚至应用程序徽标创建自定义字体,然后以这种方式使用并将其拉入我的应用程序。然后,我可以非常轻松地调整设备的字体大小和屏幕分辨率。


但是,如果您对以字体以及常规.png格式实现的图像有要求,可能会让设计师感到头痛:
Ari Braginsky 2015年

3

如果您正在寻找问题的答案:“如何在我的iOS应用中使用矢量图形,并始终以完美的比例缩放它们?” ,那么我可以强烈建议UIImage+PDFhttps://github.com/mindbrix/UIImage-PDF

我发现这确实很棒。现在,我没有为所有图像提供三种不同分辨率的PNG格式的图像,而是为每个图像提供了一个很小的PDF文件。我可以显示这些如下:

// Objective C:
self.icon.image = [UIImage imageWithPDFNamed:@"icon.pdf" fitSize:self.icon.frame.size];

// Swift:
icon.setImage(UIImage(PDFNamed: "icon.pdf", fitSize: icon.frame.size))

此外fitSize:,也有atWidth:atHeightatSize:

我正在使用 UIImage+PDF所有可以矢量化的图像,并且仅将PNG用于照片图像。

我还通过类似http://smallpdf.com/compress-pdf之类的文件来运行我的PDF文件,以确保它们的文件最小。

埃里克


1

在构建应用程序图标的情况下,PDF将不起作用。您可能想看一下一个项目,我刚刚构建了一个名为Speculid的项目。它可以从源图像(包括SVG文件)构建PNG,PDF等。反馈将不胜感激。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.