Html 有没有工具可以从 SVG 文件创建 SVG 路径？

is there a tool to create SVG paths from an SVG file?

提问by tim

does anyone know of a tool that can take an SVG file, and convert it into an HTML 5 SVG path? you know, the d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79"part?

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

I head here: Use Adobe Illustrator to create SVG Path using "move to" commands

我在这里：使用 Adob​​e Illustrator 使用“移动到”命令创建 SVG 路径

But not sure. Does this mean Illustrator can take any line drwaing and save it as an SVG path?

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

Note:Yes there is inkscape, but I'm looking for gradient and masking support, if that's possible. I'd like to be able to utilize .ai files and export them using illustrator or Acrobat or something... is there something out there? Or is it built in to Illustrator or Acrobat as an output format?

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

回答by Jasdeep Khalsa

Gimp can be used to convert SVGs with primitives (e.g. rects, circles, etc.) into a single path which can be used within HTML5.

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

1. First download Gimp: https://www.gimp.org/downloads/
2. Export your SVG as a .svgfile with any tool of choice e.g. Illustrator. Don't worry if the SVG output is messy for now, Gimp will clean it up
3. Import the SVG file into Gimp with File -> Open, and the following (or similar) dialog should show up:

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

Check both the Import Pathsand Merge imported pathsoptions

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

1. Then go to Windows->Dockable Dialogues->Paths
2. Right-click on the single path which says Imported Pathand you should see the following dialog:

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

1. Click Export Path...and save this text file to a location of your choice
2. Locate and open up this file with a text editor of your choice e.g Notepad, TextEdit
3. Copy the text within the <path d="copy this text here" />
4. Since Gimp formats the text with lots of spaces, you may need to re-format it, by removing some of the spaces to paste it into your HTML in a single line

6. 单击导出路径...并将此文本文件保存到您选择的位置
7. 使用您选择的文本编辑器（例如记事本、TextEdit）找到并打开此文件
8. 复制里面的文字 <path d="copy this text here" />
9. 由于 Gimp 用大量空格格式化文本，您可能需要重新格式化它，方法是删除一些空格以将其粘贴到 HTML 中的一行中

回答by Augustin Riedinger

Open the SVG with you text editor. If you have some luck the file will contain something like:

使用文本编辑器打开 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"/>

The dattribute iswhat you are looking for.

该d属性就是您要查找的内容。

回答by frenchone

Open the svg using Inkscape.

使用 Inkscape 打开 svg。

Inkscape is a svg editor it is a bit like Illustrator but as it is built specifically for svg it handles it way better. It is a free software and it's available @ https://inkscape.org/en/

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

• ctrl A (select all)
• shift ctrl C (=Path/Object to paths)
• ctrl s (save (choose as plain svg))

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

done

完毕

all rect/circle have been converted to path

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

回答by accidental_PhD

(In reply to the "has the situation improved?" part of the question):

（回答“情况有没有好转？”部分问题）：

Unfortunately, not really. Illustrator's support for SVG has always been a little shaky, and, having mucked around in Illustrator's internals, I doubt we'll see much improvement as far as Illustrator is concerned.

不幸的是，并非如此。Illustrator 对 SVG 的支持一直有点不稳定，而且，在 Illustrator 的内部结构中出现问题后，我怀疑就 Illustrator 而言，我们是否会看到很大的改进。

If you're looking for DOM-style access to an Illustrator document, you might want to check out Hanpuku(Disclosure #1: I'm the author. Disclosure #2: It's research code, meaning there are bugs aplenty, and future support is unlikely).

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

With Hanpuku, you could do something like:

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

1. Select the path of interest in Illustrator
2. Click the "To D3" button

3. In the script editor, type:

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

4. Click run

5. If the change is as expected, click "To Illustrator" to apply the changes to the document

1. 在 Illustrator 中选择感兴趣的路径
2. 单击“到 D3”按钮

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

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

4. 点击运行

5. 如果更改符合预期，请单击“到 Illustrator”以将更改应用到文档

Granted, this approach doesn't expose the original path string. If you follow the instructions toward the end of the plugin's welcome page, it's possible to edit the Illustrator document with Chrome's developer tools, but there will be lots of ugly engineering exposed everywhere (the SVG DOM that mirrors the Illustrator document is buried inside an iframe deep in the extension—changing the DOM with Chrome's tools and clicking "To Illustrator" should still work, but you will likely encounter lots of problems).

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

TL;DR:Illustrator uses an internal model that's pretty different from SVG in a lot of ways, meaning that when you iterate between the two, currently, your only choice is to use the subset of features that both support in the same way.

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

回答by ericsoco

Surprised no one mentioned Illustrator's Save As > Format dropdown > .svg option.

没想到没有人提到 Illustrator 的另存为 > 格式下拉菜单 > .svg 选项。

Outputs an .svg file that contains the path (and the rest of the svg definition) within an .svg (xml) file.

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

The path itself is within <path d>.

路径本身在<path d>.