今天有个需求，电脑上有一些特殊的字体（免费的），想把它们用到网页中，但是因为兼容性问题，所以想转化为 svg 来使用，做到最轻便。本来以为可以通过 Photoshop 直接导出文字的 svg，结果 ps 导出的 svg 是将图片 base64 后的 png 作为 svg 内嵌的图片，也是醉了。于是开始 google，很多文献都指向一条路，就是先在 ps 中抽离出路径，然后用 Illustrator 来导出 svg，但我没有装 illustrator，然后想装一个吧，结果 2g 的安装包，要下 1 天多。。。试了网上各种办法之后，最终找到了自己的办法。现在记录一下。

1.创建路径

如果直接在 ps 里面用路径相关的工具画路径，那就无所谓，随便画。如果是文字转路径，很简单，在图层上右键，选择 convert to shape 即可。这个时候，切换到路径面板，可以看到已有的路径。然后回到图层面板，把所有的图层删除干净，这样，就只保留了路径。如果路径和图层绑定，可以在路径面板复制一下该路径。

2.导出为 .ai

新版的 ps 可以直接导出为 .ai 文件。file -> export -> paths to illustrator

3.在线工具

这一招真的很神，在 google 里搜索 ai to svg，一大堆在线工具可以用，我用了这个可以成功转化。

另，由于 ai 实际上是 pdf，文档尺寸必须按照 pdf 的尺寸来，把要转化的元素放在左上角上，才能最好的控制路径的结果。

4.处理 svg

下载下来 svg 之后，你可以得到所有的路径，但是这些路径是分开的。我的文字，一个字就是一个 path，当然，对于字来说，这是好事，但是对于其他画来说就不是了，你要一个一个的去调试，找到哪一个 path 代表哪一个部分。

经过整理之后，我得到了：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path style="stroke:#000; fill:none" d="M 4.4891 43.676L 6.2891 43.676L 13.8491 5.75598L 26.2091 5.75598L 26.5691 4.07605L 0.0491 4.07605L -0.3109 5.75598L 12.0491 5.75598L 4.4891 43.676z"/>
<path style="stroke:#000; fill:none" d="M 18.4089 56.996C 23.5689 56.996 26.8089 52.076 29.0889 47.636L 47.0889 14.996L 45.2889 14.996L 35.0889 33.7161C 33.5289 36.5961 31.9689 39.4761 30.5289 42.2361L 30.2889 42.2361C 29.9289 39.5961 29.4489 36.4761 28.9689 33.7161L 25.9689 14.996L 24.2889 14.996L 29.0889 44.276L 27.7689 46.916C 25.2489 52.076 22.1289 55.436 18.5289 55.436C 17.8089 55.436 17.2089 55.316 16.4889 54.9561L 15.7689 56.396C 16.8489 56.876 17.8089 56.996 18.4089 56.996z"/>
<path style="stroke:#000; fill:none" d="M 58.8483 44.396C 66.0483 44.396 71.5683 39.8361 71.5683 32.876C 71.5683 28.556 69.0483 25.796 65.3283 23.636L 60.1683 20.636C 57.4083 19.076 54.8883 16.916 54.8883 13.076C 54.8883 9.11609 58.3683 4.91595 63.7683 4.91595C 68.0883 4.91595 71.3283 7.07605 73.3683 9.71606L 74.6883 8.63599C 72.6483 5.75598 68.9283 3.35608 64.1283 3.35608C 57.5283 3.35608 53.0883 8.03595 53.0883 13.316C 53.0883 17.516 56.0883 20.276 59.3283 22.196L 64.6083 25.316C 67.7283 27.1161 69.7683 29.516 69.7683 33.1161C 69.7683 38.996 65.0883 42.8361 59.0883 42.8361C 53.9283 42.8361 50.3283 40.676 47.8083 36.8361L 46.3683 37.796C 49.0083 41.996 53.2083 44.396 58.8483 44.396z"/>
<path style="stroke:#000; fill:none" d="M 77.2077 43.676L 78.8877 43.676L 83.2077 22.196C 87.7677 17.756 91.3677 15.8361 94.0077 15.8361C 97.8477 15.8361 99.4077 17.756 99.4077 21.4761C 99.4077 22.676 99.2877 23.516 98.9277 25.316L 95.2077 43.676L 96.8877 43.676L 100.608 25.076C 100.968 23.396 101.088 22.676 101.088 21.2361C 101.088 17.1559 99.1677 14.276 94.2477 14.276C 90.7677 14.276 87.5277 16.556 83.6877 19.796L 83.4477 19.796L 84.1677 17.0359L 87.5277 0.355957L 85.8477 0.355957L 77.2077 43.676z"/>
<path style="stroke:#000; fill:none" d="M 107.087 32.636C 107.087 40.316 111.287 44.396 117.887 44.396C 121.007 44.396 124.007 42.9561 126.287 41.276L 125.447 39.9561C 123.287 41.516 120.647 42.8361 118.007 42.8361C 112.007 42.8361 107.387 38.756 109.127 29.1559L 129.647 29.1559C 130.007 27.9561 130.367 26.276 130.367 24.3561C 130.367 18.4761 127.967 14.276 121.847 14.276C 114.527 14.276 107.087 21.7161 107.087 32.636zM 109.487 27.5961C 111.047 20.756 116.327 15.8361 121.727 15.8361C 126.887 15.8361 128.687 19.916 128.687 23.996C 128.687 25.316 128.567 26.396 128.327 27.5961L 109.487 27.5961z"/>
<path style="stroke:#000; fill:none" d="M 134.926 43.676L 136.726 43.676L 142.246 16.076C 142.846 12.8361 143.446 8.99597 144.046 5.75598L 144.286 5.75598L 145.726 14.276L 150.046 39.1161L 152.086 39.1161L 165.646 14.276L 170.326 5.75598L 170.566 5.75598C 169.846 8.87598 169.006 12.8361 168.286 16.076L 162.766 43.676L 164.566 43.676L 172.486 4.07605L 169.486 4.07605L 156.286 27.9561L 151.606 36.9561L 151.366 36.9561L 149.806 27.9561L 145.846 4.07605L 142.846 4.07605L 134.926 43.676z"/>
<path style="stroke:#000; fill:none" d="M 185.326 44.396C 193.126 44.396 200.326 36.2361 200.326 25.556C 200.326 18.3561 196.606 14.276 190.846 14.276C 183.046 14.276 175.846 22.436 175.846 33.1161C 175.846 40.316 179.566 44.396 185.326 44.396zM 185.446 42.8361C 180.406 42.8361 177.526 39.3561 177.526 32.756C 177.526 23.636 184.246 15.8361 190.726 15.8361C 195.766 15.8361 198.646 19.316 198.646 25.916C 198.646 35.0359 191.926 42.8361 185.446 42.8361z"/>
</svg>