使用 <path> 标签将图标图像转换为 svg 的最佳方法

Question

我正在学习使用 svg 图标，现在尝试直接从 psd 中提取图标。使用 adobe photoshop 2017 可以将图像导出为 svg 代码。然而，在此代码中，生成的标签不是标签（据我所知，这是 base64 编码？！）。因此，我无法修改图标，例如，给它们不同的颜色（填充）等。

\n\n

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

\n\n

基本上，我想要这样的东西：

\n\n

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

\n\n

\n\n

这大约是我使用 Photoshop 得到的结果：

\n\n

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

\n\n

PS 我尝试了几种基于 Base64 的在线解码器，但没有发现它们有用。

\n

Answer 1

毕竟我发现这个工具最有用 - Vectormagic（编者注：完成整个过程后，它会要求你支付 10 美元来下载你的结果）。它可以快速且非常精确地转换为 svg，而且您无需进行大量自定义。在图像上，第一个图标是 inkscape 结果，第二个图标来自矢量魔法。

也许我在 inkscape 中错过了一些东西，才得到如此完美的结果。在这种情况下请指出。不管怎样，矢量魔法节省了大量时间，而且我还没有发现它的缺陷。