将图标图片转换为带有<path>标签的SVG的最佳方法是什么？

Question

我正在学习使用SVG图标，现在尝试直接从PSD中提取图标。使用Adobe Photoshop 2017，可以将图像导出为SVG代码。但是在这段代码中，生成的不是标签，而是标签（我理解这是Base64编码？！）。因此，我无法修改图标，例如给它们不同的颜色（填充）等。

我的问题是 - 最好的方法是什么，可以将图像转换为包含标签的SVG，最好是使用Photoshop？

基本上，我想要的是这样的：

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/>
<path d="M22.7 19l-9.1-9.4z"/>

使用Photoshop大致可以得到以下结果：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="48" viewBox="0 0 34 48">
              <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
            <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
               <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                  <rdf:Description rdf:about=""/>
               </rdf:RDF>
            </x:xmpmeta>                          
            <?xpacket end="w"?></metadata>
            <image width="34" height="48"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/>
          </svg>

P.S. 我尝试使用了几个base64在线解码工具，但都没有什么用。

- Annie H.

---

你需要对位图进行“描边(tracing)”。你可以手动完成，或使用大部分矢量编辑器内置的描边工具。例如：Inkscape, Illustrator等。 - Paul LeBeau

对我来说，与插画师合作似乎非常耗时，这并不是开发人员的工作。也许我错了？我正在寻找一些可以使这个过程更快或至少自动化的工具。 - Annie H.

不，你是正确的。如果你需要矢量格式的艺术品，那么设计师应该提供这种格式的文件。他们应该知道位图和矢量艺术之间的区别，以及应该使用哪种软件来制作它。 - Paul LeBeau

Answer 1

在所有工具中，我发现这个工具最有用 - vectormagic（编者注：经过处理后，它会要求您支付10美元才能下载结果）。它可以快速、精确地转换为SVG格式，并且您不需要进行大量的自定义。在图片上，第一个图标是Inkscape的结果，第二个图标来自向量魔术。

也许在inkscape中我错过了某些东西，导致结果如此完美。如果是这样，请指出。无论如何，向量魔法节省了很多时间，我还没有发现它的缺点...但我会继续寻找。

- Annie H.

---

提醒一下，它似乎不免费。 - Dreaded semicolon

那不是一个免费的工具，请尝试使用这个。 - Muhammad Musavi

@Mohammadlm71，我尝试过这个工具，但它非常不精确。 - Annie H.

@Annie-h，最佳工具是CorelDraw，只需安装它，然后使用PowerTrace功能，即可将每个图像转换为SVG路径。 - Muhammad Musavi

Answer 2

1. 使用Illustrator打开您的图标。 2. 单击文件>导出>导出到屏幕。 3. 选择svg扩展名并保存。 4. 使用浏览器打开您的svg文件。 5. 单击检查元素（或F12）。 就这样，在元素选项卡中，您可以找到您的svg代码路径。

- Miguel