svg - 计算效率高、可扩展的 SVG 字符路径

Question

在过去两天的大部分时间里，我刚刚为 Arial Rounded MT Bold 字体系列的每个 AZ 字符绘制了计算效率高的 svg 路径。我需要这些路径来从其他 svg 形状中切出字符形状，并且由于我的程序非常频繁地执行此操作，因此我希望路径尽可能轻。我还希望它们可以扩展到 512px。

虽然我知道我可以在 Inkscape 中通过绘制文本对象并将文本对象转换为路径来自动完成此操作，但 Inkscape 生成的路径至少是我在下面包含的路径大小的两倍，有时甚至是三倍以上。

我的问题是，我怎么能挽救我生命中的最后两天，而我再也回不来了。我找不到任何在线资源或工具来为所选字体系列的文本字符生成有效的 svg 路径。我也找不到每个字体字符使用的三次贝塞尔曲线的任何定义。如果我能找到后者，我会编写一个程序来完成它，因为我不得不使用试错法。

我的 SVG 路径列在下方，每个路径都位于 32x32 网格的中心，字体大小为 28pt，它们都将缩放到 512pt，与原始字体非常接近。

svg { width: 28pt; }

<!-- A  --><svg viewbox="0 0 32 32"><path d="
M 13.6 7 C 15 5 17.3 5 18.6 7 L 25.4 24 A 2 2 180 0 1 22.1 25.8 L 20 21.2 L 12 21.2 L 10.2 25.8 A 2 2 180 0 1 6.9 24 Z M 13.5 17 L 18.5 17 L 16 10 Z
" /></svg>
<!-- B  --><svg viewbox="0 0 32 32"><path d="
M 19 6 C 26 7 24.5 14.6 21 15.4 C 26.2 16.4 27 25.2 19 26 L 10.3 26 A 2 2 90 0 1 8.3 24 L 8.3 8 A 2 2 90 0 1 10.3 6 Z M 12.3 9 L 12.3 14.2 L 17 14.2 C 21.1 14.2 21.1 9 17 9 Z M 12.3 17.4 L 12.3 23 L 17.5 23 C 22 23 22 17.4 17.5 17.4 Z
" /></svg>
<!-- C  --><svg viewbox="0 0 32 32"><path d="
M 24.3 19.5 C 24.3 22.5 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.7 24.1 7.9 24.3 12 A 1.8 1.8 180 0 1 21.3 13 C 20.9 12 19.5 9.2 17 8.8 C 8.4 7.7 8.4 24.3 17 23 C 19.2 23 20.7 20.5 21.3 18.5 A 1.7 1.7 180 0 1 24.3 19.5 Z
" /></svg>
<!-- D  --><svg viewbox="0 0 32 32"><path d="
M 16 6 C 22.5 6 25.2 10 25.2 16 C 25.2 22 22.5 26 16 26 L 10 26 A 2 2 90 0 1 8 24 L 8 8 A 2 2 90 0 1 10 6 Z M 12.1 9.1 L 12.1 22.8 L 15 22.8 C 20 22.8 21 20 21 16 C 21 12 20 9.1 15 9.1 Z
" /></svg>
<!-- E  --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.5 A 1.5 1.5 90 0 1 10 6 L 22.1 6 A 1.5 1.5 180 0 1 22.1 9 L 12.5 9 L 12.5 14 L 21.3 14 A 1.5 1.5 180 0 1 21.3 17 L 12.5 17 L 12.5 22.8 L 22.3 22.8 A 1.6 1.6 180 0 1 22.3 26 L 10.2 26 A 1.6 1.6 90 0 1 8.5 24.5 Z
" /></svg>
<!-- F  --><svg viewbox="0 0 32 32"><path d="
M 9 8 A 2 2 90 0 1 11 6 L 21.5 6 A 1.5 1.5 180 0 1 21.5 9 L 13.1 9 L 13.1 14.3 L 20.2 14.3 A 1.5 1.5 180 0 1 20.2 17.3 L 13.1 17.3 L 13.1 24.3 A 2 2 180 0 1 9 24.3 Z
" /></svg>
<!-- G  --><svg viewbox="0 0 32 32"><path d="
M 21.8 21.5 L 21.8 18.5 L 17.9 18.5 A 1.5 1.5 180 0 1 17.9 15.5 L 23.9 15.5 A 1.5 1.5 90 0 1 25.4 17 L 25.4 22.5 C 25.4 23.7 21.8 26.3 17 26.3 C 2.9 27.3 2.9 4.7 17 5.7 C 20.8 5.6 24.9 7.9 24.9 11 A 1.9 1.9 180 0 1 21.5 12 C 21 11 19.5 8.7 17 8.7 C 8.1 7.7 8.1 24.3 17 23.3 C 19 23.3 21.8 22.2 21.8 21.5 Z
" /></svg>
<!-- H  --><svg viewbox="0 0 32 32"><path d="
M 7.5 7.6 A 2 2 180 0 1 11.5 7.6 L 11.5 13.8 L 20.4 13.8 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 24.3 A 2 2 180 0 1 20.4 24.3 L 20.4 17.1 L 11.5 17.1 L 11.5 24.3 A 2 2 180 0 1 7.5 24.3 Z
" /></svg>
<!-- I  --><svg viewbox="0 0 32 32"><path d="
M 14 7.6 A 2 2 180 0 1 18 7.6 L 18 24.3 A 2 2 180 0 1 14 24.3 Z
" /></svg>
<!-- J  --><svg viewbox="0 0 32 32"><path d="
M 18 8 C 17.8 4.8 22.2 4.8 22 8 L 22 20 C 22.2 28.4 8.5 28.4 8.7 20 C 8.7 17.3 12.4 17.3 12.5 20 C 12.5 24.2 18 24.2 18 20 L 18 24 Z
" /></svg>
<!-- K  --><svg viewbox="0 0 32 32"><path d="
M 8.5 7.6 A 2 2 180 0 1 12.5 7.6 L 12.5 15.2 L 21.3 6 A 1.9 1.9 180 0 1 24.1 8.6 L 18.6 13.8 L 25 23 C 27 25.9 23.7 27.3 21.8 25.6 L 15.9 16.5 L 12.5 19.8 L 12.5 24.5 A 2 2 180 0 1 8.5 24.5 Z
" /></svg>
<!-- L  --><svg viewbox="0 0 32 32"><path d="
M 9 7.6 A 2 2 180 0 1 13 7.6 L 13 22.7 L 21.7 22.7 A 1.6 1.6 180 0 1 21.7 26 L 11 26 A 2 2 90 0 1 9 24 Z
" /></svg>
<!-- M  --><svg viewbox="0 0 32 32"><path d="
M 6.3 7.9 A 1.9 1.9 90 0 1 8.2 6 L 10.5 6 C 12.5 6 12.3 6.5 12.6 7 L 16 19.6 L 19.4 7 C 19.8 6.3 20 6 21 6 L 23.7 6 A 1.9 1.9 90 0 1 25.6 7.9 L 25.6 24.5 A 1.8 1.8 180 0 1 22 24.5 L 22 10 L 18.1 25 C 17.1 26.8 14.9 26.8 13.9 25 L 10 10 L 10 24.5 A 1.8 1.8 180 0 1 6.3 24.5 Z
" /></svg>
<!-- N  --><svg viewbox="0 0 32 32"><path d="
M 7.6 8 C 7.6 5.9 10.4 4.4 12.1 6.9 L 20.7 20 L 20.6 8 C 20.6 4.8 24.4 4.8 24.4 8 L 24.4 24 C 24.2 27 21 27 19.4 24.5 L 11.4 12.2 L 11.4 24.4 C 11.4 27 7.6 27 7.6 24.4 Z
" /></svg>
<!-- O  --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z
" /></svg>
<!-- P  --><svg viewbox="0 0 32 32"><path d="
M 17 6 C 26 5.5 26 18.7 16.5 18.2 L 12.4 18.2 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 15.1 L 16 15.1 C 20.8 15.1 20.8 9 16 9 Z
" /></svg>
<!-- Q  --><svg viewbox="0 0 32 32"><path d="
M 16 5.6 C 29.1 4.9 29.1 27.1 16 26.3 C 2.9 27.1 2.9 4.9 16 5.6 Z M 16 8.8 C 8.3 8.5 8.3 23.4 16 23.1 C 23.7 23.4 23.7 8.5 16 8.8 Z M 16.4 19.3 C 17.2 19.3 21.4 22.2 21.5 22.5 C 21.4 22.6 26.8 25.5 26.5 25.5 A 1.4 1.4 180 0 1 25 27.8 C 24.3 27.8 20 25 20 24 C 19 23 15 21 15 21 C 14.2 19.8 15.7 18.9 16.4 19.3 Z
" /></svg>
<!-- R  --><svg viewbox="0 0 32 32"><path d="
M 18 6 C 27 5.5 26.6 16.5 19.3 16.9 C 20.9 17.1 25.1 23 25 24.5 C 25 26.9 22.3 26.7 21.4 25.5 L 18 20 C 17 18.5 16.5 17.2 12.4 17.4 L 12.4 24.3 A 2 2 180 0 1 8.4 24.3 L 8.4 8 A 2 2 90 0 1 10.4 6 Z M 12.4 9 L 12.4 14.5 L 17 14.5 C 21.8 14.5 21.8 9 17 9 Z
" /></svg>
<!-- S  --><svg viewbox="0 0 32 32"><path d="
M 8.5 12.5 C 6.9 3.3 23 3.9 23 10.5 C 23 12.5 20.5 12.9 19.8 11.5 C 17.9 6.4 11.7 8.6 12.1 11 C 12.1 11.5 12 13 18 14.1 C 21 15.1 23.9 16 23.9 20 C 24 28.4 8 28.5 8 20 C 8.7 18 10.8 18.5 11.3 19.5 L 11.8 20.6 C 13.2 25 20.4 23.8 19.9 20 C 19.9 17.3 14 17.3 11.6 16 C 9.6 15 9 14 8.5 12.5 Z
" /></svg>
<!-- T  --><svg viewbox="0 0 32 32"><path d="
M 22.9 6 A 1.6 1.6 180 0 1 22.9 9.2 L 18 9.2 L 18 24.3 A 2 2 180 0 1 14 24.3 L 14 9.2 L 9.1 9.2 A 1.6 1.6 180 0 1 9.1 6 Z
" /></svg>
<!-- U  --><svg viewbox="0 0 32 32"><path d="
M 7.6 7.6 A 2 2 180 0 1 11.6 7.6 L 11.6 18 C 11.6 20.3 12 23.2 16 23.1 C 20 23.1 20.4 20.3 20.4 18 L 20.4 7.6 A 2 2 180 0 1 24.4 7.6 L 24.4 18 C 24.4 23.7 22 26.3 16 26.3 C 10 26.3 7.6 23.7 7.6 18 Z
" /></svg>
<!-- V  --><svg viewbox="0 0 32 32"><path d="
M 7.25 8.3 A 1.9 1.9 180 0 1 11 7 L 16 21.8 L 20.9 7 A 1.9 1.9 180 0 1 24.6 8.3 L 18.75 24 C 18.75 24 18.2 26.3 16 26.3 C 13.7 26.3 13 24 13 24 Z
" /></svg>
<!-- W  --><svg viewbox="0 0 32 32"><path d="
M 3.4 8 A 1.9 1.9 180 0 1 7.1 7 L 10.1 20.1 L 13.5 7.5 C 13.5 7.5 14 5.6 16 5.6 C 18 5.6 18.5 7.5 18.5 7.5 L 22 20.1 L 24.9 7 A 1.9 1.9 180 0 1 28.6 8 L 24.55 24.5 C 24.55 24.5 24.1 26.3 22.1 26.3 C 20.1 26.3 19.65 24 19.65 24 L 16 10.6 L 12.4 24 C 12.4 24 11.9 26.3 9.9 26.3 C 7.9 26.3 7.45 24.5 7.45 24.5 Z
" /></svg>
<!-- X  --><svg viewbox="0 0 32 32"><path d="
M 8.9 8.1 A 1.75 1.75 180 0 1 11.9 6.3 L 16 12.8 L 20.45 6.3 A 1.75 1.75 180 0 1 23.4 8.1 L 18.55 15.5 L 23.65 23.5 A 1.75 1.75 180 0 1 20.44 25.5 L 16 18.6 L 11.45 25.5 A 1.75 1.75 180 0 1 8.3 23.5 L 13.6 15.5 Z
" /></svg>
<!-- Y  --><svg viewbox="0 0 32 32"><path d="
M 8.1 8.15 A 1.8 1.8 180 0 1 11.15 6.25 L 16 14.1 L 20.95 6.25 A 1.8 1.8 180 0 1 24 8.15 L 18 17.45 L 18 24.4 A 2 2 180 0 1 14 24.4 L 14 17.45 Z
" /></svg>
<!-- Z  --><svg viewbox="0 0 32 32"><path d="
M 10 9 C 7.7 9 7.7 6 10 6 L 21.5 6 C 23.9 6 24.1 8.2 23.4 9.5 L 12.15 23 L 23 23 C 25.3 23 25.3 26 23 26 L 9.5 26 C 7.5 26 6.5 24 7.7 22.5 L 19 9 Z
" /></svg>

标签： svg

Answer 1

我找不到任何在线资源或工具来为所选字体系列的文本字符生成有效的 svg 路径。

尝试在线资源Google 字体到 SVG 路径

该资源包含大量字体，您很有可能会找到您需要的字体。
为了优化 SVG 路径，我使用了另一个在线资源SVG-Editor

以下是字母 A 和 D 的代码示例：

一个

<svg xmlns="http://www.w3.org/2000/svg" width="56.2" height="67.5" viewBox="0 0 56.2 67.5">
  <g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red" stroke-width="1" >
    <path d="M30.4 0L31.5 0A5 5 0 0 1 34.7 1.2Q37 3 39 7.6A115.5 115.5 0 0 1 41.8 14.9Q46.3 27.4 51.6 48.7A34.7 34.7 0 0 0 53.7 54.6 39.6 39.6 0 0 0 54.4 56 59 59 0 0 1 55 57.2Q55.9 59.1 56.1 60A2.3 2.3 0 0 1 56.2 60.5 7.1 7.1 0 0 1 54.3 65.4 6.7 6.7 0 0 1 52.8 66.8 5.4 5.4 0 0 1 50 67.5L48.9 67.5A10.3 10.3 0 0 1 47.1 67.4Q46.1 67.2 45.4 66.8A3.8 3.8 0 0 1 43.6 64.8 1.7 1.7 0 0 1 43.5 64.6Q43.3 64 43.1 62.3 42.9 60.3 42.5 58.4A45.4 45.4 0 0 0 41.8 55.5Q41 52.7 40 50.9A8.3 8.3 0 0 0 39.1 49.7Q37.3 47.6 29.8 47.4A64.5 64.5 0 0 0 27.7 47.4 63.6 63.6 0 0 0 24.1 47.5Q17.9 47.8 16.1 49.5 14.5 51.1 12.7 55.4A58.2 58.2 0 0 0 11.5 58.3 24.2 24.2 0 0 0 10.7 61 30.3 30.3 0 0 0 10.4 62.8 32.2 32.2 0 0 1 10.2 63.8Q9.9 65.5 9.5 66.1A2.6 2.6 0 0 1 8.3 67.1Q7.4 67.5 6 67.5A10.2 10.2 0 0 1 5.9 67.5 6.4 6.4 0 0 1 3.9 67.2 5.2 5.2 0 0 1 1.6 65.6 6.5 6.5 0 0 1 0 61.3 6.4 6.4 0 0 1 0.3 59.4Q0.9 57.5 2.5 55.2 5 51.7 11.8 33.9A661.1 661.1 0 0 0 11.9 33.7 642.7 642.7 0 0 1 15.6 24Q22.8 5.9 25.9 2.3A5.4 5.4 0 0 1 26.3 1.9 9 9 0 0 1 27.6 0.9Q28.5 0.4 29.3 0.1A4.5 4.5 0 0 1 30.4 0ZM25 40.5L31.5 40.5Q37.6 40.5 37.6 39L37.6 38.6Q37.6 37.9 35.1 27.9A1479.3 1479.3 0 0 0 34.3 24.8Q31.1 12.1 30 11.8A0.2 0.2 0 0 0 29.9 11.8L29.7 11.8A0.1 0.1 0 0 0 29.7 11.8Q29.4 12.2 27.9 15.6A404.3 404.3 0 0 0 24.8 22.3Q19.1 35.2 18.8 38.9A4.9 4.9 0 0 0 18.8 39.3L18.8 39.6Q18.8 40.3 20.5 40.3A8.6 8.6 0 0 0 20.7 40.3L21.4 40.4 25 40.5Z" vector-effect="non-scaling-stroke"/>
  </g>
</svg>

D

<svg xmlns="http://www.w3.org/2000/svg" width="60.1" height="73.4" viewBox="0 0 60.1 73.4">
  <g stroke-linecap="round" fill-rule="evenodd" font-size="28pt" fill="red">
    <path d="M23.4 0L25.9 0A48.6 48.6 0 0 1 37.6 1.3Q45.8 3.3 51 8.5A28.5 28.5 0 0 1 57.6 18.6Q60.1 25.1 60.1 33.2L60.1 33.5 60.1 34.8Q60.1 43.2 57.2 51.4A34.7 34.7 0 0 1 53.5 58.7 27.7 27.7 0 0 1 48.5 64.5 35.5 35.5 0 0 1 40.2 69.8 31.8 31.8 0 0 1 36.1 71.4 40 40 0 0 1 30.8 72.6Q28 73 24.7 73.2A95.4 95.4 0 0 1 18.8 73.4L17.6 73.4 16.4 73.4A194.1 194.1 0 0 1 11.8 73.3Q5.5 73.2 2.7 72.6A9.9 9.9 0 0 1 1.7 72.3 2.7 2.7 0 0 1 0.8 71.8Q0.2 71.3 0.1 70.5A3.6 3.6 0 0 1 0 69.8 1.3 1.3 0 0 1 0 69.5Q0.3 68.7 1.4 66.3A18.3 18.3 0 0 0 2.4 63Q3.8 57.6 3.8 47.8A154.8 154.8 0 0 0 3.8 46.9L4.4 31 4.5 28.6 4.7 20.3A419.5 419.5 0 0 0 4.7 17.7Q4.7 12.6 4.5 11.2 4.3 10 3.8 8.4A30.6 30.6 0 0 0 3.5 7.3 39.1 39.1 0 0 1 3.2 6.3Q2.8 5.1 2.7 4.5A2 2 0 0 1 2.7 4.2Q2.7 1.7 6.1 1.1A50.8 50.8 0 0 1 10.1 0.5Q15.4 0 23.4 0ZM15.3 27.1L15.2 28.7 15 33.7 14.9 35.4 14.7 41.2A88.5 88.5 0 0 0 14.7 42Q14.6 43.1 14.6 43.7L14.5 45.4Q14.4 47 14.4 47.8L14.3 49.4A26.8 26.8 0 0 0 14.3 51.1L14.2 52.7 14 58.4 14 61.5A5.1 5.1 0 0 0 14.1 62.8 3 3 0 0 0 15.9 64.9Q17.6 65.7 20.7 65.8A28.2 28.2 0 0 0 21.4 65.8L23.7 65.8A24.2 24.2 0 0 0 32 64.4 20.7 20.7 0 0 0 41.4 57.5Q44.2 53.9 46 48 47.8 42.1 47.8 34.7L47.8 33.8A45.1 45.1 0 0 0 47 25Q44.6 13.1 35.1 8.8 31.3 7.2 26.6 7.2L24.2 7.2Q18.8 7.2 17.2 8.8A2.4 2.4 0 0 0 17 9 4.2 4.2 0 0 0 16.5 10.2Q15.7 12.7 15.7 18.9A278.9 278.9 0 0 0 15.5 21.5Q15.3 25 15.3 27A39.3 39.3 0 0 0 15.3 27.1Z" vector-effect="non-scaling-stroke"/>
  </g>
</svg>