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

时间:2017-11-14 20:48:36

标签: svg path tags icons photoshop

我正在学习使用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尝试了几个在线解码器,但没有发现它们有用。

1 个答案:

答案 0 :(得分:2)

毕竟我发现这个工具最有用 - vectormagic。它快速且非常精确地转换为svg,您不必进行大量自定义。在图像上,第一个图标是inkscape结果,第二个图标来自矢量魔术。

enter image description here

也许我错过了inkscape中的一些东西,结果是完美的。在那种情况下,请指出。无论如何,矢量魔法可以节省很多时间,而且我没有发现它的缺陷..但是。