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

【问题标题】：Computationally Efficient SVG character paths that scale well计算效率高、可扩展的 SVG 字符路径
【发布时间】：2021-02-04 08:34:21
【问题描述】：

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

虽然我知道我可以在 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>

【问题讨论】：

  • 用 &lt;text&gt; 元素遮蔽/剪切 SVG 形状并使用实际字体本身不是一个可行的解决方案？
  • »我的程序非常频繁地执行此操作（所以）我希望路径尽可能轻«您是否测量过矢量轮廓的实际大小或复杂度输入数据会影响程序的性能吗？ （诚​​实的问题。我理解对干净代码的渴望，但我觉得应该问这个问题。）
  • @Sean 我不确定您所说的遮罩/剪辑到底是什么意思，但我对路径所做的一个例子是在另一种形状中切出一个字母大小的孔，例如w3.org/2000/svg"> 。我可以用你的方法做到这一点吗？
  • @myf。一个重要的评论。为了让您了解我的问题背后的原因，我的应用程序是一个基于全屏地图的工具，其中数百个（有时数千个）图标叠加在地图图块上。每个图标的形状由 svg 定义，然后转换为 html canvas 绘图命令。我从 svg 输入开始，因为我还需要在 html 菜单中显示图标。由于地图由用户平移和缩放，画布重绘的数量是天文数字，所以我的任务是尽可能提高效率。但我还没有做出任何明确的测量。谢谢。
  • @SteveBrooker 这是一个使用 SVG &lt;mask&gt; 元素在其他形状上打孔的示例。在这种情况下，蒙版包含一个心形，但它也可以只包含样式文本，允许您使用任何可用字体打孔。 developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

标签： svg


【解决方案1】：

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

尝试在线资源Google font to SVG path

此资源包含大量字体，您很有可能会找到所需的字体
为了优化 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>

【讨论】：

  • “优化”D 的路径至少比问题中的 D 大 6 倍。
  • @Sean 优化是摆动小数点后的位数，从4减少到1。可以在Google font to SVG path在线资源上选择任何字体大小。
  • 我误解并认为您已经通过优化器运行了问题的自定义路径。
  • 我选择的字体（在问题中使用）在您提到的在线资源中不可用。
  • @Steve Brooker 指定资源上有很多字体，你可以选择一个和你的字体类似的字体 以后主要是点击几下就可以获得必要的补丁任何复杂的字体
猜你喜欢
  • 2012-05-21
  • 2010-11-11
  • 1970-01-01
  • 2014-11-23
  • 1970-01-01
  • 2011-10-15
  • 2022-10-12
  • 2021-06-18
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode