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

Posted 2023-02-23

【中文标题】使用 <path> 标签将图标图像转换为 svg 的最佳方法

【英文标题】：Best way to convert icon image to svg with <path> tag

【发布时间】：2018-04-27 22:34:19

【问题描述】：

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

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

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

<svg fill="#000000"  viewBox="0 0 24 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"   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    xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gTiVBORw0KGgoAAAANSUhEUgAAACIAAAAwCA0gT="/>
          </svg>

附：我尝试了几个 base64 的在线解码器，但没有发现它们有用。

【问题讨论】：

您需要“跟踪”位图图像。您可以自己手动执行此操作，也可以使用大多数矢量编辑器中内置的跟踪工具。例如。 Inkscape、Illustrator 等）..

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

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

【参考方案1】：

毕竟我发现这个工具最有用 - vectormagic。它可以快速且非常精确地转换为 svg，而且您无需进行大量自定义。图片上，第一个icon是inkscape结果，第二个是vector magic。

也许我错过了 inkscape 中的某些内容，以使结果如此完美。在这种情况下，请指出。无论如何，矢量魔法可以节省很多时间，而且我还没有发现它的缺陷。

【讨论】：

请注意。好像不是免费的。

这不是免费工具，请尝试this 一个。

@Mohammadlm71，我试过这个工具，它很不精确

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