如何将文本转换为轮廓SVG图像？

Question

我需要将文本转换为SVG轮廓图像。 在Linux上使用脚本自动生成。

例如："0xA10B" 转换为以下图像: （这不是SVG图像）。

- michinari nukazawa

---

有一个文本标签的属性可以做到这一点，我会查一下并尽快发布完整答案。 - Arif Burhan

谢谢您的回复。抱歉，我需要<path>（以及其他类似的）元素轮廓，而不是<text>标记和其他类似的。 - michinari nukazawa

可能是 https://dev59.com/3msz5IYBdhLWcg3wrJsx 的重复问题。 - Paul LeBeau

可能有用的链接：https://github.com/shrhdk/text-to-svg - Paul LeBeau

我成功地使用Inkscape命令行。谢谢！ - michinari nukazawa

Answer 1

考虑使用工具将文本转换为向量轮廓。 Google字体转SVG路径

1. 输入文本

2. 选择字体、文本大小

3. 勾选“分离字符”复选框，以便每个字母都有自己的单独补丁

<svg width="283.741" height="71.973" viewBox="0 0 283.741 71.973" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path d="M 20.215 71.973 L 17.237 71.973 Q 13.672 71.973 10.523 70.63 Q 7.373 69.288 5.03 66.944 A 17.327 17.327 0 0 1 1.343 61.475 Q 0 58.35 0 54.786 L 0 17.188 Q 0 13.623 1.343 10.498 A 17.327 17.327 0 0 1 5.03 5.03 Q 7.373 2.686 10.523 1.343 Q 13.672 0 17.237 0 L 20.215 0 Q 23.78 0 26.905 1.343 A 17.327 17.327 0 0 1 32.373 5.03 A 17.327 17.327 0 0 1 36.06 10.498 Q 37.403 13.623 37.403 17.188 L 37.403 54.786 Q 37.403 58.35 36.06 61.475 A 17.327 17.327 0 0 1 32.373 66.944 A 17.327 17.327 0 0 1 26.905 70.63 Q 23.78 71.973 20.215 71.973 Z M 31.104 54.786 L 31.104 17.188 A 11.002 11.002 0 0 0 30.478 13.459 A 10.417 10.417 0 0 0 30.225 12.818 A 11.329 11.329 0 0 0 27.832 9.278 A 11.329 11.329 0 0 0 24.292 6.885 A 10.808 10.808 0 0 0 20.141 6.008 A 12.383 12.383 0 0 0 19.922 6.006 L 17.53 6.006 A 11.002 11.002 0 0 0 13.801 6.632 A 10.417 10.417 0 0 0 13.16 6.885 A 11.63 11.63 0 0 0 9.595 9.278 Q 8.057 10.791 7.178 12.818 A 10.808 10.808 0 0 0 6.301 16.969 A 12.383 12.383 0 0 0 6.299 17.188 L 6.299 54.786 A 11.002 11.002 0 0 0 6.925 58.515 A 10.417 10.417 0 0 0 7.178 59.156 A 11.417 11.417 0 0 0 9.595 62.72 Q 11.133 64.258 13.16 65.137 A 10.808 10.808 0 0 0 17.311 66.014 A 12.383 12.383 0 0 0 17.53 66.016 L 19.922 66.016 A 11.002 11.002 0 0 0 23.651 65.39 A 10.417 10.417 0 0 0 24.292 65.137 A 11.126 11.126 0 0 0 27.832 62.72 A 11.63 11.63 0 0 0 30.225 59.156 A 10.808 10.808 0 0 0 31.102 55.005 A 12.383 12.383 0 0 0 31.104 54.786 Z" id="0" vector-effect="non-scaling-stroke"/>
<path d="M 82.813 70.996 L 76.319 70.996 L 65.625 51.807 L 54.932 70.996 L 48.438 70.996 L 62.452 45.996 L 48.438 20.996 L 54.932 20.996 L 65.625 40.186 L 76.319 20.996 L 82.813 20.996 L 68.848 45.996 L 82.813 70.996 Z" id="1" vector-effect="non-scaling-stroke"/>
<path d="M 125.733 70.996 L 121.094 54.688 L 98.926 54.688 L 94.336 70.996 L 87.793 70.996 L 108.301 0.977 L 111.621 0.977 L 132.227 70.996 L 125.733 70.996 Z M 109.815 16.407 L 100.635 48.682 L 119.434 48.682 L 110.205 16.407 L 110.01 13.819 L 109.815 16.407 Z" id="2" vector-effect="non-scaling-stroke"/>
<path d="M 180.909 70.996 L 141.211 70.996 L 141.211 64.991 L 157.911 64.991 L 157.911 6.983 L 141.211 14.014 L 141.211 8.008 L 157.911 0.977 L 164.209 0.977 L 164.209 64.991 L 180.909 64.991 L 180.909 70.996 Z" id="3" vector-effect="non-scaling-stroke"/>
<path d="M 212.11 71.973 L 209.131 71.973 Q 205.567 71.973 202.417 70.63 Q 199.268 69.288 196.924 66.944 A 17.327 17.327 0 0 1 193.238 61.475 Q 191.895 58.35 191.895 54.786 L 191.895 17.188 Q 191.895 13.623 193.238 10.498 A 17.327 17.327 0 0 1 196.924 5.03 Q 199.268 2.686 202.417 1.343 Q 205.567 0 209.131 0 L 212.11 0 Q 215.674 0 218.799 1.343 A 17.327 17.327 0 0 1 224.268 5.03 A 17.327 17.327 0 0 1 227.954 10.498 Q 229.297 13.623 229.297 17.188 L 229.297 54.786 Q 229.297 58.35 227.954 61.475 A 17.327 17.327 0 0 1 224.268 66.944 A 17.327 17.327 0 0 1 218.799 70.63 Q 215.674 71.973 212.11 71.973 Z M 222.998 54.786 L 222.998 17.188 A 11.002 11.002 0 0 0 222.373 13.459 A 10.417 10.417 0 0 0 222.12 12.818 A 11.329 11.329 0 0 0 219.727 9.278 A 11.329 11.329 0 0 0 216.187 6.885 A 10.808 10.808 0 0 0 212.036 6.008 A 12.383 12.383 0 0 0 211.817 6.006 L 209.424 6.006 A 11.002 11.002 0 0 0 205.695 6.632 A 10.417 10.417 0 0 0 205.054 6.885 A 11.63 11.63 0 0 0 201.49 9.278 Q 199.952 10.791 199.073 12.818 A 10.808 10.808 0 0 0 198.196 16.969 A 12.383 12.383 0 0 0 198.194 17.188 L 198.194 54.786 A 11.002 11.002 0 0 0 198.819 58.515 A 10.417 10.417 0 0 0 199.073 59.156 A 11.417 11.417 0 0 0 201.49 62.72 Q 203.028 64.258 205.054 65.137 A 10.808 10.808 0 0 0 209.205 66.014 A 12.383 12.383 0 0 0 209.424 66.016 L 211.817 66.016 A 11.002 11.002 0 0 0 215.546 65.39 A 10.417 10.417 0 0 0 216.187 65.137 A 11.126 11.126 0 0 0 219.727 62.72 A 11.63 11.63 0 0 0 222.12 59.156 A 10.808 10.808 0 0 0 222.997 55.005 A 12.383 12.383 0 0 0 222.998 54.786 Z" id="4" vector-effect="non-scaling-stroke"/>
<path d="M 266.504 70.996 L 244.336 70.996 L 244.336 0.977 L 266.504 0.977 Q 270.069 0.977 273.218 2.32 Q 276.368 3.663 278.711 6.006 Q 281.055 8.35 282.398 11.499 Q 283.741 14.649 283.741 18.213 L 283.741 18.897 A 16.99 16.99 0 0 1 283.081 23.658 A 16.724 16.724 0 0 1 281.202 27.881 Q 279.981 29.834 278.321 31.421 Q 276.661 33.008 274.61 34.082 A 16.263 16.263 0 0 1 278.321 36.744 Q 279.981 38.33 281.202 40.308 Q 282.422 42.286 283.081 44.556 A 16.99 16.99 0 0 1 283.741 49.317 L 283.741 53.809 Q 283.741 57.373 282.398 60.498 A 17.327 17.327 0 0 1 278.711 65.967 Q 276.368 68.311 273.218 69.654 Q 270.069 70.996 266.504 70.996 Z M 277.442 53.809 L 277.442 48.291 A 11.002 11.002 0 0 0 276.816 44.562 A 10.417 10.417 0 0 0 276.563 43.921 A 11.126 11.126 0 0 0 274.146 40.381 A 11.63 11.63 0 0 0 270.581 37.989 A 10.808 10.808 0 0 0 266.43 37.112 A 12.383 12.383 0 0 0 266.211 37.11 L 250.635 37.11 L 250.635 64.991 L 266.211 64.991 A 11.002 11.002 0 0 0 269.94 64.365 A 10.417 10.417 0 0 0 270.581 64.112 A 11.63 11.63 0 0 0 274.146 61.719 Q 275.684 60.205 276.563 58.179 A 10.808 10.808 0 0 0 277.44 54.028 A 12.383 12.383 0 0 0 277.442 53.809 Z M 277.442 19.873 L 277.442 18.213 A 11.002 11.002 0 0 0 276.816 14.484 A 10.417 10.417 0 0 0 276.563 13.843 A 11.417 11.417 0 0 0 274.146 10.279 Q 272.608 8.741 270.581 7.862 A 10.808 10.808 0 0 0 266.43 6.985 A 12.383 12.383 0 0 0 266.211 6.983 L 250.635 6.983 L 250.635 31.104 L 266.211 31.104 A 11.002 11.002 0 0 0 269.94 30.478 A 10.417 10.417 0 0 0 270.581 30.225 A 11.417 11.417 0 0 0 274.146 27.808 Q 275.684 26.27 276.563 24.244 A 10.808 10.808 0 0 0 277.44 20.092 A 12.383 12.383 0 0 0 277.442 19.873 Z" id="5" vector-effect="non-scaling-stroke"/>
</g>
</svg>

- Alexandr_TT

Answer 2

如果您将此放在扩展名为 .svg 的文件中，则您的文本（在此情况下为 "sunshine"）已转换为 svg。

<svg version="1.1" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="20" fill="black">sunshine</text>
  Sorry, your browser does not support inline SVG.
</svg>

这里不接受 .svg 格式的图片，因此我将链接一张普通图片来展示其外观（忽略黑色边框）。

你可以轻松地编写脚本，将“sunshine”更改为任何其他单词。

也许它不完全符合规范，但我发现浏览器可以正常显示。

- Rub

---

谢谢您的回复。抱歉，我需要<path>（和其他类似的）元素轮廓，而不是<text>标签和其他类似的。 - michinari nukazawa

Answer 3

正确的语言是：

<text fill="none" … … >

- Arif Burhan

---

这只是使文本颜色变为透明。它不会像OP想要的那样将文本转换为轮廓线。 - Paul LeBeau