为 iOS 应用加载基于 SVG 的图像资源答案

【问题标题】：Loading SVG based image assets for iOS app为 iOS 应用加载基于 SVG 的图像资源
【发布时间】：2017-09-28 23:33:30
【问题描述】：

我从 thenounproject 购买了一个图标作为 SVG 图像。然后我使用名为Gapplin 的macOS 程序将此SVG 导出为PNG 图像。它显示为 100x100 像素的图像。

然后我用预览程序打开这个 PNG 图像，然后转到工具 -> 调整大小并创建 10x10、20x20 和 30x30 图像。然后我在 Xcode 中将这些图像加载为 1x、2x、3x。

这是正确的方法吗？

【问题讨论】：

【解决方案1】：

不，这不是最佳解决方案。

您当前的解决方案当然可行，但远非理想。这样做会失去（宝贵的！）图像质量（see here 了解更多详细信息）。您可以通过以下方式改进工作流程：

导出原始 SVG 文件的所有 3 种分辨率，确保您从基于矢量的图像源（使用 Gapplin 或其他一些图像应用程序）中获得最佳的 PNG 位图；
或转换您的 SVG 到 PDF，然后 importing the PDF vector image file in Xcode（上次我检查时，Xcode 8 仍然没有直接支持 SVG 文件，所以我们坚持使用旧的 PDF暂时）。

这两种方法，就图像质量而言，应该产生非常相似的结果，并且是对您当前工作流程的改进。

关于应用程序文件的大小，您应该不会再看到这两种方法的区别。即使使用最后一种方法，Xcode 仍会在构建时生成所需的资源，因此，您的应用将携带与第一种方法相同的图像/图标集。

【讨论】：

那么您的意思是将 SVG 文件直接导出为 10x10、20x20 和 30x30 的 PNG 文件？此外，1x 是否必须是 10x10、2x 20x20 等？或者我可以增加尺寸吗？
@JK140 是的，直接从 SVG 导出到所需的分辨率！关于实际大小，这实际上取决于您的图标将在哪里使用。请[查看此处][developer.apple.com/ios/human-interface-guidelines/graphics/… 获取一些示例。
非常感谢！出于某种原因，我使用 Gapplin 的程序不允许我直接导出到所需的分辨率。你知道任何其他适用于 Mac 的免费程序吗？
@JK140 我爱Acorn！我认为他们有免费试用...
我将图像用作宽度为 20、高度为 20 的 UIButton 的一部分。您知道我应该将 SVG 图像导出为 1x、2x 和 3x 的正确 png 分辨率吗？我一直在使用 30x30、60x60、90x90，但这是猜测。我是否应该使用更大的图像，例如 100x100、200x200、300x300？这会提供更好的质量，但可能需要更长的加载时间？

【解决方案2】：

我知道这个答案是在问题之后很久才出现的。但从 Xcode 12 开始，使用 macOS 10.15 或更高版本、iOS 13 或更高版本以及 iPadOS 13 或更高版本的部署目标，您应该能够直接在资产目录中使用 SVG 图像。来自Xcode 12 release notes：

资产目录
新功能

增加了对可缩放矢量图形 (SVG) 图像资产的支持。这些将它们的向量表示与 macOS 的部署目标保持一致 10.15 或更高版本、iOS 13 或更高版本以及 iPadOS 13 或更高版本。 (18389814)

我还没有理由/机会自己使用一个，但听起来应该可以。

【讨论】：