是否有从 SVG 文件创建 SVG 路径的工具？ [关闭]

html svg adobe-illustrator

关闭。此问题不符合 Stack Overflow 准则。它目前不接受答案。我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。 4年前关闭。改进这个问题

有谁知道可以获取 SVG 文件并将其转换为 HTML 5 SVG 路径的工具？你知道，d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" 部分吗？

我去这里：Use Adobe Illustrator to create SVG Path using "move to" commands

但不确定。这是否意味着 Illustrator 可以采用任何线条绘制并将其保存为 SVG 路径？

注意：是的，有inkscape，但如果可能的话，我正在寻找渐变和遮罩支持。我希望能够利用 .ai 文件并使用 illustrator 或 Acrobat 或其他工具导出它们......那里有什么东西吗？还是作为输出格式内置在 Illustrator 或 Acrobat 中？

inkscape 支持渐变和遮罩。此外，它使用 xml 作为其内核，而 illustrator 可以保存 svg，但结果非常糟糕

问这个问题的时候还没有，但现在我们可以在 softwarerecs.stackexchange.com 上问这样的问题

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

我参加聚会很晚了，由于它已经关闭，我无法将其添加为答案，但 webdogs.com/blog/export-svg-web-using-adobe-illustrator 解释了如何使用 Illustrator 进行操作。

您可以在浏览器中打开文件，打开 Inspect Element，然后复制 SVG 元素。

Jasdeep Khalsa

Gimp 可用于将带有基元（例如矩形、圆形等）的 SVG 转换为可在 HTML5 中使用的单个路径。

首先下载 Gimp：https://www.gimp.org/downloads/ 使用任何选择的工具（例如 Illustrator）将您的 SVG 导出为 .svg 文件。如果 SVG 输出现在很乱，请不要担心，Gimp 会清理它使用 File -> Open 将 SVG 文件导入 Gimp，应该会显示以下（或类似的）对话框：

https://i.stack.imgur.com/xEVx1.png

检查导入路径和合并导入路径选项

然后转到 Windows->Dockable Dialogues->Paths 右键单击显示 Imported Path 的单个路径，您应该会看到以下对话框：

https://i.stack.imgur.com/StcS9.png

单击导出路径...并将此文本文件保存到您选择的位置找到并使用您选择的文本编辑器打开此文件，例如记事本、TextEdit 复制由于 Gimp 使用大量空格格式化文本，您可能需要重新格式化它，通过删除一些空格将其粘贴到 HTML 中的一行中

这在我第一次尝试时效果很好。自然只有路径，没有填充。我有一个复杂的loggotype，它看起来很像原来的。它有文字，可能至少有 5 条不同的弯曲曲线来制作一个分体表冠和两个键。我用从 GIMP 导出的 SVG 文件替换了我的 SVG 对象的 HTML 代码，除了最重要的信息。工作得很好，谢谢，当然投了赞成票！

我输入了 Fill="True"，它完美地填充了曲线（第一次尝试），这真是太好了 :)

我的声誉很低，无法展示它所做的事情，但我认为它的效果非常好。

Augustin Riedinger

使用文本编辑器打开 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 属性是您正在寻找的。

这不是自动生成复杂 svg 的解决方案，请查看 gimp 解决方案

在寻求更复杂的解决方案之前，值得一试！

frenchone

使用 Inkscape 打开 svg。

Inkscape 是一个 svg 编辑器，它有点像 Illustrator，但因为它是专门为 svg 构建的，所以它处理得更好。它是一款免费软件，可通过@https://inkscape.org/en/ 获得

ctrl A（全选）

shift ctrl C（=路径/对象到路径）

ctrl s（保存（选择纯 svg））

完毕

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

这仅适用于矩形/圆形，还是适用于其他多边形？

它也适用于多边形。

对我来说似乎是一个很好的答案

如果您有一个复杂的 svg（即其中包含许多对象），请使用 CTRL A 全选，SHIFT CTRL C 将任何对象转换为路径，然后使用 union CTRL { 7} 和/或组合 CTRL K 将它们合并到一个路径中。

我用过这个，对我来说它的工作原理：ofoct.com/image-converter/svg-optimizer.html

accidental_PhD

（回答“情况是否有所改善？”部分问题）：

不幸的是，并非如此。 Illustrator 对 SVG 的支持一直有点不稳定，而且，在 Illustrator 的内部结构中乱七八糟的，我怀疑就 Illustrator 而言我们会看到很多改进。

如果您正在寻找对 Illustrator 文档的 DOM 样式访问，您可能需要查看 Hanpuku （披露 #1：我是作者。披露 #2：这是研究代码，这意味着存在错误很多，未来的支持不太可能）。

使用 Hanpuku，您可以执行以下操作：

在Illustrator中选择感兴趣的路径点击“To D3”按钮在脚本编辑器中输入：selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');单击运行如果更改符合预期，请单击“到 Illustrator”以将更改应用到文档

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

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

ericsoco

没有人提到 Illustrator 的另存为 > 格式下拉菜单 > .svg 选项，这让我感到惊讶。

输出包含 .svg (xml) 文件中的路径（以及 svg 定义的其余部分）的 .svg 文件。

路径本身在 <path d> 内。

如果我理解正确，问题也是关于将原语转换为路径。 Illustrator 会保留矩形、圆圈等，所以这个答案是不正确的。

是否有从 SVG 文件创建 SVG 路径的工具？ [关闭]

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们