docs: 补充一些内容

Author: Zhicheng WANG

src/assets/content/articles/汪志成专栏/小图标，大学问.md

@@ -77,6 +77,16 @@ FontAwesome 虽好，但也不是万能的。它往往不足以融入 UX 的 Des
 
 好在，svg 有一种机制可以解决这个问题，也就是 `use` 标签。使用 `use` 标签，你可以根据 id 引用本页面中的 svg 元素，甚至来自其它 svg 文件中的元素。比如要引用本页面中的 id 为 `a` 的 `rect` 元素，你只需要写 `<use xlink:href="#a">` 即可，并且在这里你可以指定自己的 svg 属性，以覆盖原始元素上的 svg 设置。这样一来，图标内容被重复很多遍的问题就解决了。如果写成 `<use xlink:href="path/to/file.svg#a">` 则可以引用外部文件 `path/to/file.svg` 中定义的元素，那么 id 冲突的问题也同样解决了，因为它们不在同一个命名空间。
 
+但是，这种引用无法控制显示大小，也就是原始图形有多大，引用它的地方就会显示多大。这大大限制了它的应用场景。好在，svg 中还有另一个特性可以解决这个问题：符号（Symbol）。`symbol` 也是一个 svg 元素，相当于 svg 自己的可复用组件，它有自己的逻辑坐标系（`viewBox`），而这个逻辑坐标系实际映射成多大是由调用者决定的。比如：
+ ```
+<symbol id="sym01" viewBox="0 0 100 100">
+    <line x1="0" y1="0" x2="100" y2="100" stroke="red" />
+</symbol>
+```
+表示这个符号的逻辑坐标系是 `(0,0,100,100)`，其中有一条线是从 `(0,0)` 画到 `(50,50)` 的，那么 `<use xlink:href="#sym01" x="0" y="0" width="10" height="10"/>` 的时候，这条线就会按比例映射成 `(0,0)` - `(5,5)`。当然，这个 `use` 所在的 svg 还有自己的 `viewBox`，它显示到 html 中的时候还要再映射一次才能得出像素值。
+
+实际上，`symbol` 这种方式相当于一个加强版的雪碧图，你可以把很多小图标拼接在一起，但是不需要关心坐标之类的问题。工具方面，由于是纯文本，因此无论你要手动维护，还是写一个小工具，都比雪碧图容易得多。
+
 不过，这种方式相对于字体图标还有两个缺点：
 
 一是图标的颜色不会自动跟随文字颜色。比如原始元素定义的 rect 是红色的，那么无论你把它混排到什么颜色的文字中，它都是红色的。难道我们要在每个使用它的地方都手动覆盖一下颜色吗？当然不必，我们还有另一个 svg 特性可以解决这个问题，那就是 `currentColor`。这是一个预定义的特殊颜色值，它的意思就是取当前的文字颜色。比如当你写 `<rect fill="currentColor"></rect>` 时，把它混排到灰色文字中，这个 `rect` 的填充色就是灰色的，混排到蓝色文字中就是蓝色的。而且，这个图标的其它部分你仍然可以指定特定的颜色，比如图标主体部分跟随文字颜色，而某个特殊区域总是显示为蓝色。
@@ -86,7 +96,7 @@ FontAwesome 虽好，但也不是万能的。它往往不足以融入 UX 的 Des
 
 ## 当代：合字（Ligature）
 
-你知道“囍”字吗？严格来说，它不是一个字，而是一个“合字”。也就是说这是两个汉字，只是显示成了一个字的样子。只是因为它非常常见，所以在字库中给了它一个单独的位置。但是大多数类似的文字是得不到这种特殊待遇的，比如“孔孟好学”的合体，以及“biangbiang面”中的“biang”字；字母上的声调（比如汉语拼音）也是合字。
+你知道“囍”字吗？严格来说，它不是一个字，而是一个“合字”。也就是说这是两个汉字，但显示成了一个字的样子。只是因为它非常常见，所以在字库中给了它一个单独的位置。但是大多数类似的文字是得不到这种特殊待遇的，比如“孔孟好学”的合体，以及“biangbiang面”中的“biang”字；字母上的声调（比如汉语拼音）也是合字。
 
 那么，要如何用标准的方式来显示这些合字呢？实际上，现代的字体库早就已经支持合字了，只是在现实中用得不多，一般人没怎么注意罢了。不过，在图标领域，它重新找回了用武之地。我所知道的最早使用合字的图标体系是 Google 的 Material Design，比如用 `<i class="material-icons">home</i>` 就可以显示出一座房子，它是怎么工作的呢？实际上，`material-icons` 类为这个 `i` 元素指定了一个支持合字的字体库：`'Material Icons'`，并且在字体库中检索出 `home` 这个合字对应的单字，并且把那个单字显示出来就可以了。换句话说，`home` 是某个字符的别名。