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

Question

I'm looking for a tool that can generate the different sizes of icons for the iOS and Android apps from a svg image.

Google hasn't been really able to provide me with any "one-click" solution. Are there any tools out there which are less well known? or perhaps some simple batch scripts that achieve the same?

Ideally something I could run on my windows 10 machine, but linux would work too.

Answer 1

首先从这个链接https://svgtopng.com/将你的 SVG 转换为 PNG 一旦你转换 .PNG 然后使用这个链接https://makeappicon.com/为 android 和 iOS 创建应用程序图标。

Answer 2

My choice is https://github.com/sterlp/svg2png . For IOS:

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

With ios_icon.json like that:

{
  "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
    }
  ]
}

Just make sure generated png files match your configuration from AppIcon.appiconset/Contents.json. Mine is

{
  "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
  }
}

For Android please refer to README on https://github.com/sterlp/svg2png or create your own json config.

Answer 3

This is quite late already and this is for ANDROID, but you can actually convert an svg file directly in android studio, right click on drawable folder from res folder and select vector asset:

Then select local file (SVG, PSD)

You can then select the svg file from the path field and android studio will directly convert the file as a resource.

Answer 4

Modern Design tools(Figma, Zeplin...) allows you generate necessary images for iOS, Android

Answer 5

The easiest way I've found is just using this website: https://appicon.co/

You can simply drag and drop your SVG file and export to any devices you need.