有没有一种工具可以从SVG文件中创建SVG路径？

Question

有没有工具可以将SVG文件转换为HTML 5 SVG路径？你知道的，就像是这个d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79"部分吗？

我在这里找到了一个文章：使用Adobe Illustrator创建SVG路径，使用“移动到”命令

但不确定这是否意味着Illustrator可以将任何线条图形保存为SVG路径？

注意： 是的，有inkscape，但我正在寻找渐变和遮罩支持，如果可能的话。我想能够使用.ai文件，并使用Illustrator或Acrobat等软件导出它们...有这样的工具吗？还是它内置于Illustrator或Acrobat作为输出格式？

- tim

---

Inkscape支持渐变和遮罩，其内核使用XML实现。而Illustrator可以保存SVG格式，但结果很糟糕。 - frenchone

当这个问题被提出时，这个网站还不存在，但现在我们可以在http://softwarerecs.stackexchange.com/上询问类似的问题。 - Mawg says reinstate Monica

有在线工具可以从不同的文件格式创建SVG路径，例如：https://image.online-convert.com/convert-to-svg - Narayan Yerrabachu

我来晚了，而且由于已经关闭，我无法将此作为答案添加，但是https://webdogs.com/blog/export-svg-web-using-adobe-illustrator/解释了如何使用Illustrator完成此操作。 - OsakaWebbie

你可以在浏览器中打开文件，打开检查元素，然后复制SVG元素。 - Nanoo

使用Adobe XD或Illustrator，在矢量对象上右键单击，然后点击“复制SVG路径”。如果您有一个字体对象，您必须先将其转换为路径。 - Matthew C

Answer 1

Gimp可以用来将包含基本图形（如矩形、圆等）的SVG转换为单一路径，以便在HTML5中使用。

1. 首先下载Gimp：https://www.gimp.org/downloads/
2. 使用任意工具（例如Illustrator）将SVG导出为.svg文件。现在不必担心SVG输出混乱，Gimp会清理它
3. 使用 文件->打开 命令将SVG文件导入Gimp，并显示以下（或类似的）对话框：

选中导入路径和合并已导入的路径选项

4. 然后转到 窗口->可停靠式对话框->路径
5. 右键单击标有导入的路径的单个路径，您应该会看到以下对话框：

6. 单击 导出路径... 并将此文本文件保存到所选位置
7. 使用您选择的文本编辑器（例如Notepad，TextEdit）打开并定位此文件
8. 复制<path d="在此处复制此文本" />中的文本
9. 由于Gimp使用大量空格对文本进行格式化，因此您可能需要通过去除一些空格来重新格式化它，以便在HTML中将其粘贴为单行。

- Jasdeep Khalsa

---

这在我的第一次尝试中很好地解决了。当然，只有路径，没有填充。我有一个复杂的标志，它看起来非常像原始标志。它有文本，可能至少有5个不同的弯曲线来制作一个风格化的皇冠和两个钥匙。我用从GIMP导出的SVG文件替换了我的SVG对象的HTML代码，除了顶部的信息。效果很棒，谢谢，当然投了赞成票！ - Michael Larsson

我设置了Fill="True"，它完美地填充了曲线（第一次尝试），这太好了，简直难以置信 :) - Michael Larsson

我的声望太低了，无法展示它的图片，但我认为它非常不错。 - Michael Larsson

Answer 2

使用文本编辑器打开SVG文件。如果您运气好，文件可能会包含类似以下内容：

<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637  c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823  c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428  c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002  l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464  c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007  c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246  c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462  S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127  c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035  c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461  C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859  c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054  c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727  C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002  c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223  c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331  C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002  c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267  v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599  l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631  c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>

d属性就是你要找的东西。

- Augustin Riedinger

---

不要使用自动生成的复杂SVG作为解决方案，看看GIMP的解决方案。 - code4jhon

在尝试更复杂的解决方案之前，值得一试！ - Augustin Riedinger

Answer 3

使用Inkscape打开svg文件。

Inkscape是一款svg编辑器，有点像Illustrator，但由于它专门为svg构建，因此处理得更好。它是免费软件，可以在https://inkscape.org/en/上下载。

• ctrl A（全选）
• shift ctrl C（=路径/对象转换为路径）
• ctrl s（保存（选择为纯svg））

完成

所有矩形/圆已转换为路径

- frenchone

---

这只适用于矩形/圆形，还是也适用于其他多边形？ - Mawg says reinstate Monica

它也适用于多边形。 - frenchone

看起来对我来说是一个好答案。 - Shanimal

太好了！终于有一个强大的应用程序是免费和开源的。经过漫长而不成功的搜索，我终于可以做我想做的事情了。太喜欢这个了！ - Ragav Y

如果你有一个复杂的SVG文件（即其中包含许多对象），请使用 CTRL A 选择全部对象，然后使用 SHIFT CTRL C 将任何对象转换为路径，最后使用并集 CTRL + 和/或组合 CTRL K 将它们合并成一个单一的路径。 - mcmurphy

我使用了这个工具，对我来说它很好用：https://www.ofoct.com/image-converter/svg-optimizer.html - Isabella Monza

Answer 4

（回答问题中的“情况有所改善吗？”部分）：

不幸的是，实际上没有。Illustrator对SVG的支持一直都不太稳定，而且在深入研究了Illustrator的内部结构之后，我怀疑我们在Illustrator方面不会看到太多改进。

如果你正在寻找对Illustrator文档进行DOM式访问的方法，你可能想看看Hanpuku （披露#1：我是作者。披露#2：它是研究代码，意味着存在大量错误，并且未来的支持不太可能）。

使用Hanpuku，你可以这样做：

1. 在Illustrator中选择感兴趣的路径
2. 点击“转换为D3”按钮

3. 在脚本编辑器中键入：

   selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');

4. 点击运行

5. 如果变化符合预期，请点击“转换为Illustrator”以应用更改到文档中

这种方法并不会暴露原始路径字符串。如果您按照插件欢迎页面末尾的说明进行操作，可以使用Chrome的开发人员工具编辑Illustrator文档，但是会有很多丑陋的工程代码暴露出来（镜像Illustrator文档的SVG DOM深埋在扩展程序内部的iframe中-使用Chrome的工具更改DOM并单击“转到Illustrator”仍然有效，但您可能会遇到很多问题）。

简而言之：Illustrator使用内部模型，在许多方面与SVG非常不同，这意味着当您在两者之间进行迭代时，目前您唯一的选择是使用两者都以相同方式支持的功能子集。

- accidental_PhD

Answer 5

大家都没提到Illustrator的“另存为”功能下的“.svg”选项，真是让人惊讶。

它会生成一个包含路径（和其他svg定义）的.svg文件（xml格式）。

而路径本身则位于<path d>标签中。

- ericsoco

---

如果我理解正确的话，问题是关于将基本图形转换为路径。Illustrator会保留矩形、圆等图形，因此这个答案是不正确的。 - Pickels