为你的 App 创建自定符号图像

SF Symbols 包含 1,500 多个由 Apple 创建的符号图像，可供你在 App 中用作图标。尽管符号图像是“图像”，但你也可以应用通常与文本关联的特征。例如，你可以应用色调、字体文本样式、粗细或缩放，使它们与周围的文本无缝整合。

如果你的 App 中需要自定图标，请创建功能与 SF Symbols 中符号图像相同的自定符号图像：

• 从 SF Symbols App 中导出 SVG 文件。

• 在矢量绘图 App 中打开 SVG 文件，以它为模板来创建你的自定图标，然后导出为 SVG 文件。

• 像 SF Symbols 中的符号图像一样，在你的 App 中使用自定符号图像。

要为你的自定符号图像创建 SVG 文件，请从 SF Symbols App 中导出自定符号模板文件：

1. 在 Mac 上下载并安装 SF Symbols App。

2. 启动这个 App，然后选择一个与你要创建的符号图像相似的符号图像。

3. 选取“File”(文件) >“Export Symbol…”(导出符号…)，然后存储生成的 SVG 文件。

4. 在 Illustrator (英文) 或 Sketch (英文) 等矢量绘图 App 中打开导出的 SVG 文件或“自定符号模板”，然后以它为起点创建你的自定符号图像。

5. 展开所有图层，并检查所有图层和组的名称。记住它们的确切标识符，并遵从本文中概述的要求，以便能够在 Xcode 中使用你的自定符号图像。

创建自定符号图像不需要你维护和编辑多个文件。一个符号图像的所有变体都包含在同一个 SVG 文件中；该文件中的 SVG“节点”皆拥有唯一的名称。

除了符号图像的各种变体外，SVG 文件中还包含用于将符号图像与文本对齐的参考线，以及注解和元信息。如果你在矢量绘图 App 中打开 SVG 文件，这些参考线和信息会显示为具有独特名称的图层或形状。

“Symbols”(符号) 图层包含 27 个子图层，分别代表一个符号图像变体。

在创建自定符号图像时，请确保符号图层的布局遵循下列要求：

• 每个符号图像变体必须是一个“组”，可以包含任意数量的形状，但不得包含任何其他对象类型。

• 不要使用文本或位图图像。

• 形状变形不是必要的，但很推荐。

模板中不需要包含所有 27 个变体。尽管只有 Regular-M 变体是必需的，但最好创建 Regular-S/-M/-L 和 Semibold-S/-M/-L 变体，因为许多常见的 UIKit 控件和辅助功能 (如粗体文本) 会用到它们。

符号变体的标识符形式为 <weight>-<{S, M, L}>，其中 weight 对应于 San Francisco 系统字体的粗细，S、M 或 L 则与小号、中号或大号字体缩放对应。请对各个变体使用以下标识符：

操作系统使用参考线来将你的自定符号图像与周围文本对齐。例如，它使用为所有三种字体缩放 (小号、中号和大号) 提供的基线和大写字母高度信息来计算符号图像的基线偏移和大写字母高度。

模板文件的“Guides”(参考线) 图层中包含所有必要的参考线，你不需要修改它们。如果发生意外更改，请恢复参考线以符合以下要求：

• 符号模板文件必须包含基线和顶线的所有三组参考线，分别用于各个字体缩放。

• 基线和顶线参考线必须是线条或路径形状。

• 符号模板文件必须包含用于指明符号前后边距的两个参考线，即符号图像显示在文本中时前后应有多少空白。

• 前后边距的参考线需要是矩形形状。

参考线的标识符必须与下列标识符匹配：

“Guides”(参考线) 图层还针对 SF Text 字体中每种缩放各包含一个轮廓形式的大写字母 A，用作“参考字形”。请使用模板中的参考字形作为参考，以了解符号图像在文本旁边时的外观。

出于设计目的，SF Symbols App 会以特定的磅值 (通常为 100 磅) 对模板文件进行排版。在 App 中使用时，操作系统会将它们缩放到请求的磅值。

通过在导出的自定符号模板文件中修改 SF Symbol，开始创建你自己的自定符号图像。你可以将这个文件作为线索来设置自己自定符号图像的线条粗细和其他属性。从 Regular-M 变体开始，再为 Regular 粗细添加小号和大号缩放变体。

使用以下缩放系数：

为 Regular 粗细创建好缩放变体后，添加对其他符号图像变体的支持。

务必要使用提供的参考线来定位你的自定符号，从而确保该符号能够在文本中正确显示。请相对于顶线和基线参考线来放置符号图像。在操作系统读取符号图像时，从符号底边到符号基线的距离 (正数或负数) 会成为符号的 baselineOffsetFromBottom (英文)。当符号图像显示在文本中时，操作系统会对它进行垂直定位，使得符号图像底边与文本的距离与模板文件中符号图像与基线参考线的距离相同 (通过磅值来缩放)。

边距参考线的宽度决定自定符号模板中所有变体的前后边距。前后边距参考线只需定义一次，不必分别为每个变体定义。边距参考线的垂直和水平位置不重要，但惯例是将它们放到 Regular-M 符号图像变体的一侧。

“Notes”(注释) 图层包含与模板文件相关的可选注解和元信息：

• template-version 图层包含一个版本字符串，用于指明你从 SF Symbols App 导出的模板格式版本。Xcode 可能会在以后用它来区分自定符号模板文件的不同版本，并且这个图层必须是文本图层。

• artboard 图层确保设计工具以合适的画布大小和易读的符号来显示模板。

“Notes”(注释) 图层包含有关自定符号模板文件的注解，可帮助你理解其内容。这些注解是可选的，但最好保留不动。

在自定符号模板中完成符号编辑后，应以最大精度重新导出为 SVG 文件。确认 SVG 文件保留了各种符号变体和参考线的所有标识符，并且与上文所述的标识符匹配。你可以通过以下任何方法来验证 SVG 文件是不是符合所有要求：

• 使用 SF Symbols App 并选取“File”(文件) >“Validate Custom Symbols”(验证自定符号) 来验证 SVG 文件，这种方法无需安装 Xcode。

• 将 SVG 文件添加到 Xcode 项目中的一个素材目录来进行验证。创建一个新的符号图像集素材，然后将 SVG 文件拖入这个素材。Xcode 会验证 SVG 文件，如果不符合要求，则会显示错误信息。

• 手动验证 SVG 文件的内容。在 Xcode 中将它作为 XML 文件打开，具体操作为：在 Xcode 的项目导航器中将其选中，按住 Control 键点按该文件，然后选取“Open As”(打开方式) >“Source Code”(源代码)。以下代码摘录中显示，矢量绘图 App 在用户导出自定符号图像时保留了所有标识符。在实际的文件中，每一项的 XML 节点都包含变形或路径等其他信息，为便于阅读，代码段中省略了这些信息。注意 XML 节点中包含的 id 属性如何与矢量绘图 App 中“Guides”(参考线) 和“Symbols”(符号) 图层的属性相对应。

<g id="Guides">
<!--- Other XML properties, such as transforms, H-reference, and so on will be placed here, too. -->
    <line id="Baseline-S" class="st7" x1="263" y1="696" x2="3036" y2="696"/>
    <line id="Capline-S" class="st7" x1="263" y1="625.5" x2="3036" y2="625.5"/>
    <!-- ... -->
    <rect id="left-margin" x="1391.3" y="1030.8" class="st5" width="8.7" height="119.3"/>
    <rect id="right-margin" x="1499.7" y="1030.8" class="st5" width="8.7" height="119.3"/>
</g>
<g id="Symbols">
<!--
Each symbol node can contain any number of shapes and paths but no other items;
text or custom items are not allowed. Transforms of shapes are optional but will be respected.
-->
    <g id="Ultralight-S" transform="matrix(1 0 0 1 515.644 696)">
        <path d="M44,2.1c20.5,0,37.3-16.7,37.3-37.2c0-20.5-16.8-37.2-37.3-37.2S6.8-55.6,6.8-35.2C6.8-14.7,23.6,2.1,44,2.1z M30.5-16.9
C23-16.9,18-24.3,18-35.3S23-53.6,30.5-53.6c7.4,0,12.5,7.4,12.5,18.4S37.9-16.9,30.5-16.9z M59.8-16.8c-5.8,0-10.2-3.1-11.1-7.4
c0-0.2-0.1-0.5-0.1-0.7c0-0.6,0.4-1.1,1.1-1.1c0.6,0,1,0.3,1.1,1c1,3.4,4.7,6,9.3,6c5.5,0,9.5-4.1,9.5-9.6c0-5.6-3.8-9.4-9.3-9.4
c-3.2,0-5.7,1-8.3,4.2c-0.5,0.5-0.8,0.6-1.4,0.6c-0.9,0-1.4-0.6-1.3-1.5l1.3-16.7c0.1-1.1,0.7-1.7,1.7-1.7h16.9
c0.6,0,1.1,0.5,1.1,1.2c0,0.6-0.4,1.1-1.1,1.1H52.8L51.6-36h0.2c2-2.6,5.4-4.2,8.8-4.2c6.6,0,11.4,4.8,11.4,11.5
C72-21.6,67-16.8,59.8-16.8z M30.5-19.1c6.1,0,10.1-6.5,10.1-16.1s-4.1-16.2-10.1-16.2c-6,0-10.1,6.6-10.1,16.2
S24.5-19.1,30.5-19.1z"/>
    </g>
    <g id="Thin-S" transform="matrix(1 0 0 1 811.867 696)">
        <!-- ... -->
    </g>
    <g id="Light-S" transform="matrix(1 0 0 1 1107.6 696)">
        <!-- ... -->
    </g>
    <g id="Regular-S" transform="matrix(1 0 0 1 1403.58 696)">
        <!-- ... -->
    </g>
    <g id="Medium-S" transform="matrix(1 0 0 1 1699.7 696)">
        <!-- ... -->
    </g>
    <g id="Semibold-S" transform="matrix(1 0 0 1 1995.98 696)">
        <!-- ... -->
    </g>
    <!-- Each symbol image variant is represented as its own XML node. -->
    <!-- ... -->
    <g id="Black-L" transform="matrix(1 0 0 1 2854.08 1556)">
        <!-- ... -->
    </g>
</g>

打开 App 的 Xcode 项目，并选择其素材目录。在 Xcode 的菜单栏中，选择“Editor”(编辑器) >“Add Assets”(添加素材) >“New Symbol Image Set”(新建符号图像集)，然后将导出的 SVG 文件拖入“Symbol Image”(符号图像) 面板的“Symbol SVG”(符号 SVG) 部分中。Xcode 会验证 SVG 文件，并在文件不符合要求时显示错误信息。要在你的 App 中使用符号图像，请按照“在你的 UI 中配置和显示符号图像 (英文)”中所述进行操作。