從 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 中，但在這種情況下，它將是一個偽造的矢量圖像，在調整大小后會變得模糊（我相信這不是您想要在您的應用程序中使用的） .

希望這有助於🙂 節日快樂！ 🎉