从 Sketch 导出到 SVG 不允许导入到 android studio

Question

我有一个 PNG，是在 photoshop 中使用图标和一些文本的 PNG 制作的。 我在尝试导入时无法将它从 Sketch 或 Photoshop 导出为 SVG 我收到Error: No vector content found在我得到的草图中使用复制 SVG 代码直接获取 SVG 时Error: No vector content found ；

<svg width="150px" height="161px" viewBox="0 0 150 161" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Login---no-data" transform="translate(-105.000000, -150.000000)">
            <image id="Logo" x="105" y="150" width="150" height="161" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg.....TkSuQmCC"></image>
        </g>
    </g>
</svg>

来自 Photoshop；

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="238" height="252" viewBox="0 0 238 252">
  <image id="Gradient_Fill_1" data-name="Gradient Fill 1" width="238" height="252" xlink:href="data:img/png;base64,iVBORw0KGgoAAAAN.....U5ErkJggg=="/>
</svg>

（我已经缩短了两个 href 的数据以避免它变得庞大）

这两个都给出了相同的错误。 这里出了什么问题，我尝试使用在线转换将 PNG 转换为 SVG，但我仍然得到同样的结果。 我假设 android studio 不支持xlink:href=... ，如果是这种情况，我该如何将其展平为 Path （在这里猜测这就是我要做的）。

Answer 1

如果您使用 Photoshop 来设计您想要的任何东西，它是基于光栅的工具，而不是基于 svg（矢量）的工具。 您从 Photoshop 中获得的任何内容都将成为光栅化文件。 如果您正在寻找 SVG 导出，那么您必须使用 Adob​​e Illustrator、Sketch App 的 XD 来获取 svg 格式的文件。 在这些工具中设计您的图标、徽标和其他图形内容，并获得文件的 SVG 导出。 好运！

Answer 2

如果您的图像是 PNG 文件格式，则它是光栅图像，而不是像 SVG 那样的矢量。 因此，要使您的图像在矢量中获得矢量图像的所有好处（无限可扩展性等），您应该首先将其转换为基于矢量的图形。 最好的方法是在 Illustrator 中跟踪图像（主菜单 --> 对象 --> 图像跟踪），然后根据需要调整跟踪设置以获得更好的结果，这取决于图像。 之后，您将能够将图像保存为 SVG。

这是如何将光栅图像转换为矢量图像的简短截屏视频： https : //www.screencast.com/t/tCmaSGTYa

PS 当然，可以将光栅图像嵌入到 SVG 中，但在这种情况下，它将是一个伪造的矢量图像，在调整大小后会变得模糊（我相信这不是您想要在您的应用程序中使用的） .

希望这有助于🙂 节日快乐！ 🎉