将 svg 转换为适用于 iOS 和 Android 的应用程序图标的最佳方法是什么

Question

我正在寻找一种工具，可以从svg图像为 iOS 和 Android 应用程序生成不同大小的图标。

谷歌还没有真正能够为我提供任何“一键式”解决方案。是否有一些不太为人所知的工具？或者一些简单的批处理脚本可以实现相同的目标？

理想情况下，我可以在 Windows 10 机器上运行，但 linux 也可以运行。

Answer 1

我的选择是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上的自述文件或创建您自己的 json 配置。

Answer 2

首先通过此链接https://svgtopng.com/将您的 SVG 转换为 PNG转换 .PNG 后，然后使用此链接https://makeappicon.com/为 android 和 iOS 创建应用程序图标。

Answer 3

这已经很晚了，这是针对 ANDROID 的，但实际上您可以直接在 android studio 中转换 svg 文件，右键单击 res 文件夹中的可绘制文件夹并选择矢量资源：

然后选择本地文件（SVG、PSD）

然后，您可以从路径字段中选择 svg 文件，android studio 会直接将该文件转换为资源。