SVG Assets in Xcode for Single Scale Images

Xcode 12 在 iOS,macOS 和 iPadOS 中引入了对可缩放矢量图形(SVG)图像的支持。

在 Xcode 12 之前,我们只能通过 PDF assets 来使用 single scale resources 。这样无需使用@1x,@2x 和 @3x 后缀为每个比例生成单独的图像,因此可以节省我们的适配时间,还可以避免潜在的错误,例如意外生成大小为 @1x 的 @3x 资源。

什么是 SVG(Scalable Vector Graphic)?

可伸缩矢量图形,也称为 SVG,定义了可扩展标记语言(XML)中的二维图形,主要用于图标和符号,并允许平台按当前有效分辨率扩展 image asset。

什么时候使用 Single Scale Assets?

SVG assets 不能替代所有 assets。诸如具有大量细节的图像之类的丰富 assets 仍应定义为 individual scales。 如果您有 logo, icons, or symbols,,则很可能会考虑将其替换为 SVG assets。

支持平台

SVGs 仅支持 macOS 10.15 or later, iOS 13 or later, and iPadOS or later。如果你的 app 需要支持更早版本,你不能使用 single scale SVGs。

考虑使用 SFSymbols 作为替代

在开始用 SVG 替换所有 assets 之前,我们还可以考虑使用 SFSymbols。SFSymbol 具有相同的平台版本可用性,并且可以作为系统 Images 使用。

想更多了解 SF Symbols,可以看看这篇文章:
SF Symbols 简介

Xcode 中怎么使用 SVG

非常简单,我们只需要将文件拖拽到 Assets ,然后将 Scales option 改为 “Single Scale”:

然后就可以像使用其它 asset 一样使用 SVG image 了。

PDF vs SVG assets

Single scale PDFs 支持 iOS 8 及以上版本,支持 OS X 10.9及以上版本。如果我们的 app 兼用 iOS 13, iPadOS 13, or macOS 10.15 以下版本,可以使用 PDFs 替换 SVG。PDF 和 SVG 用作 single scale assets 时具有相同的结果。

考虑 assets 文件大小

根据图像类型,资源详细信息和导出配置,比较资产文件导出 SVG 和 PDF 格式的大小。如果我们专注于缩小应用程序尺寸,则可能需要考虑同时导出到 PDF 和 SVG,以便选择较小的那一个文件。

大多数情况下,SVG 的尺寸较小。最重要的是,我们还可以在网上找到许多资源来优化 SVG,因为它们是 Web 开发过程中使用的一种流行 Assets。

小结

SVG 支持是 WWDC 2020 期间 Xcode 12 中引入的一项重要功能。它支持 single scale assets,其资源文件通常较小。只是 SVG 并非总是正确的选择,因为只有 iOS 13 及更高版本,iPadOS 13 及更高版本, macOS 10.15 及更高版本才支持 SVG。在低版本情况下,我们可以转而使用 PDF。

本文译自:
SVG Assets in Xcode for Single Scale Images

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352