將矢量資源導入 Android Studio 時出錯

Question

我在 Illustrator 中創建了一個簡單的播放按鈕圖像，將其保存為 SVG，使用在線 SVG-to-Drawable 轉換器創建文件的 xml，然后嘗試使用 Android Studio 的 Vector Asset 工具將文件導入我的項目. 但是，當導入時，drawable 的元素之一丟失了，在這種情況下是圓圈中間的白色三角形。

play_circle.xml（轉換后的xml文件）

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="94"
    android:viewportHeight="102"
    android:width="94dp"
    android:height="102dp">
  <path
      android:pathData="M85 52.5A38.5 38.5 0 0 1 46.5 91 38.5 38.5 0 0 1 8        
52.5 38.5 38.5 0 0 1 46.5 14 38.5 38.5 0 0 1 85 52.5Z"
  android:strokeWidth="2"
  android:fillColor="#424900"
  android:strokeAlpha="0.29"
  android:fillAlpha="0.29"
  android:strokeColor="#000000"
  android:strokeMiterLimit="10" />
<path
  android:pathData="M71.39 51.63L34.81 30.51"
  android:fillColor="#ffffff" />
</vector>

play_button.svg，在 illustrator 中創建以及它的用途

導入android studio后的樣子。使用Android Studio的Vector Asset Studio工具，可以看到白色的三角形已經不見了。

Answer 1

在將 png 轉換為 svg 時，我們需要遵循一些規則。 所有轉換器都無法正常工作。 就我而言，我找到了最好的轉換器站點，它會在轉換過程中為您提供預覽圖像以確認，這將要求免費注冊，然后您可以下載您的 svg 文件。

將 PNG 轉換為 SVG - 這需要單點注冊，並且每天只允許通過一封電子郵件發送 2 個令牌

替代方案：參考 2參考 3

生成 svg 后，使用以下工具將您的 svg 轉換為可繪制矢量（這是必要的，因為不知何故 android studio 無法導入隨機轉換器生成的所有格式和樣式）

從 SVG 生成可繪制的矢量

我為您的圖像執行了上述步驟。 我創建了完美的矢量 drawable，您可以通過創建新的 xml 將其直接復制到您的 drawable 文件夾中。 （通過作為源應用到 imageview 進行測試。享受！）

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="138dp"
android:height="151dp"
android:viewportWidth="138"
android:viewportHeight="151">

<path
    android:fillColor="#ffffff"
    android:pathData="M 0.00 0.00 L 136.94 0.00 C 136.87 48.67 136.95 97.33 136.88 146.00 C 137.12
147.64 136.29 149.93 138.00 151.00 L 0.00 151.00 L 0.00 0.00 Z" />
   <path
    android:fillColor="#c7c9b7"
    android:pathData="M 136.94 0.00 L 138.00 0.00 L 138.00 151.00 L 138.00 151.00 C 136.29 149.93
    137.12 147.64 136.88 146.00 C 136.95 97.33 136.87 48.67 136.94 0.00 Z" />
<path
    android:fillColor="#c7c9b7"
    android:pathData="M 60.36 18.50 C 77.71 16.46 95.72 22.52 108.36 34.56 C 120.55 46.19 127.59 63.12
    126.81 79.99 C 126.14 101.98 112.25 123.13 91.95 131.82 C 81.01 137.33 68.13
    138.47 56.13 136.23 C 37.74 133.08 21.41 120.27 13.46 103.43 C 7.33 90.93 6.03
    76.16 9.58 62.73 C 14.43 43.60 29.48 27.32 48.31 21.29 C 52.28 20.16 56.25 18.96
    60.36 18.50 Z" />
<path
    android:fillColor="#ffffff"
    android:pathData="M 46.98 47.96 C 46.74 46.39 47.53 43.71 49.61 44.42 C 67.56 54.69 85.44 65.06
    103.33 75.43 C 104.44 75.89 105.51 76.60 105.76 77.86 C 105.26 78.65 104.62
    79.29 103.84 79.80 C 86.11 90.08 68.32 100.27 50.60 110.59 C 49.59 111.11 48.54
    111.11 47.46 110.58 C 47.35 110.18 47.12 109.38 47.01 108.98 C 46.95 88.64 47.03
    68.30 46.98 47.96 Z" />
 </vector>

Answer 2

我是一名用戶體驗設計師，我遇到了同樣的問題。 經過大量的反復試驗和谷歌搜索，我找到了解決方案。

1. 在任何 adobe 平台中創建 SVG

2. 去除任何陰影

3. 確保長度和寬度又名尺寸是整數而不是小數（43.5 > 44）
4. 筆畫（如果您使用 XD）確保只是內筆畫或外筆畫，而不是中心筆畫
5. 將其導出為 SVG 並導入到 android studio 中，您應該會看到預覽

PS：圖像中的文本不起作用，但仍會導入。

Answer 3

我無法讓矢量資產工作室理解我的任何資產。 原因是我的系統是法語的。 您需要英文版本，因為,與. 在 svg 的路徑中，它會在您系統的語言環境中自動翻譯。 嘗試使您的系統運行英語語言環境（在操作系統級別 - 更改語言）

Answer 4

在草圖中創建矢量時，通常會出現此錯誤。 這是有關如何修復它的文章 。