將 svg 轉換為 iOS 和 Android 的應用程序圖標的最佳方法是什么

Question

我正在尋找一種工具，可以從svg圖像為 iOS 和 Android 應用程序生成不同大小的圖標。

谷歌並沒有真正能夠為我提供任何“一鍵式”解決方案。 是否有一些鮮為人知的工具？ 或者一些簡單的批處理腳本可以實現相同的目的？

理想情況下，我可以在我的 windows 10 機器上運行，但 linux 也可以。

Answer 1

首先從這個鏈接https://svgtopng.com/將你的 SVG 轉換為 PNG 一旦你轉換 .PNG 然后使用這個鏈接https://makeappicon.com/為 android 和 iOS 創建應用程序圖標。

Answer 2

我的選擇是https://github.com/sterlp/svg2png 。 對於 IOS：

java -jar svg2png.jar -f app_icon.svg -o yourFolder/Assets.xcassets/AppIcon.appiconset -c ios_icon.json

使用 ios_icon.json 像這樣：

{
  "files": [
    {
      "nameSuffix": "-20x20@1x",
      "height": 20,
      "width": 20
    },
    {
      "nameSuffix": "-20x20@2x",
      "height": 40,
      "width": 40
    },
    {
      "nameSuffix": "-20x20@3x",
      "height": 60,
      "width": 60
    },
    {
      "nameSuffix": "-29x29@1x",
      "height": 29,
      "width": 29
    },
    {
      "nameSuffix": "-29x29@2x",
      "height": 58,
      "width": 58
    },
    {
      "nameSuffix": "-29x29@3x",
      "height": 87,
      "width": 87
    },
    {
      "nameSuffix": "-40x40@1x",
      "height": 40,
      "width": 40
    },
    {
      "nameSuffix": "-40x40@2x",
      "height": 80,
      "width": 80
    },
    {
      "nameSuffix": "-40x40@3x",
      "height": 120,
      "width": 120
    },
    {
      "nameSuffix": "-60x60@2x",
      "height": 120,
      "width": 120
    },
    {
      "nameSuffix": "-60x60@3x",
      "height": 180,
      "width": 180
    },
    {
      "nameSuffix": "-76x76@1x",
      "height": 76,
      "width": 76
    },
    {
      "nameSuffix": "-76x76@2x",
      "height": 152,
      "width": 152
    },
    {
      "nameSuffix": "-83.5x83.5@2x",
      "height": 167,
      "width": 167
    },
    {
      "nameSuffix": "-1024x1024@1x",
      "height": 1024,
      "width": 1024
    }
  ]
}

只需確保生成的 png 文件與 AppIcon.appiconset/Contents.json 中的配置匹配即可。 我的是

{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "20x20",
      "filename" : "app_icon-20x20@2x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "20x20",
      "filename" : "app_icon-20x20@3x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "29x29",
      "filename" : "app_icon-29x29@2x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "29x29",
      "filename" : "app_icon-29x29@3x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "40x40",
      "filename" : "app_icon-40x40@2x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "40x40",
      "filename" : "app_icon-40x40@3x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "60x60",
      "filename" : "app_icon-60x60@2x.png"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "60x60",
      "filename" : "app_icon-60x60@3x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "20x20",
      "filename" : "app_icon-20x20@1x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "20x20",
      "filename" : "app_icon-20x20@2x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "29x29",
      "filename" : "app_icon-29x29@1x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "29x29",
      "filename" : "app_icon-29x29@2x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "40x40",
      "filename" : "app_icon-40x40@1x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "40x40",
      "filename" : "app_icon-40x40@2x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "76x76",
      "filename" : "app_icon-76x76@1x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "76x76",
      "filename" : "app_icon-76x76@2x.png"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "83.5x83.5",
      "filename" : "app_icon-83.5x83.5@2x.png"
    },
    {
      "idiom" : "ios-marketing",
      "scale" : "1x",
      "size" : "1024x1024",
      "filename" : "app_icon-1024x1024@1x.png"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

對於 Android，請參閱https://github.com/sterlp/svg2png上的 README 或創建您自己的 json 配置。

Answer 3

這已經很晚了，這是針對 ANDROID 的，但您實際上可以直接在 android studio 中轉換 svg 文件，右鍵單擊 res 文件夾中的 drawable 文件夾並選擇矢量資產：

然后選擇本地文件（SVG、PSD）

然后您可以從路徑字段中選擇 svg 文件，android studio 將直接將該文件轉換為資源。

Answer 4

現代設計工具（Figma、Zeplin...）允許您為 iOS、Android 生成必要的圖像

Answer 5

我發現的最簡單的方法就是使用這個網站： https://appicon.co/

您可以簡單地拖放 SVG 文件並導出到您需要的任何設備。