CODEWITHSUNDEEP
androidiosicons
xorinzor
xorinzor

Reputation: 6467

What is the best way of converting a svg into App Icons for both iOS and Android

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.

Upvotes: 18

Views: 22335

Answers (4)

yoAlex5
yoAlex5

Reputation: 34311

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

Upvotes: 0

Viktar
Viktar

Reputation: 156

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" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "20x20",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "29x29",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "29x29",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "40x40",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "40x40",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "60x60",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "60x60",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "20x20",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "20x20",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "29x29",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "29x29",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "40x40",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "40x40",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "76x76",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "76x76",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "83.5x83.5",
      "filename" : "[email protected]"
    },
    {
      "idiom" : "ios-marketing",
      "scale" : "1x",
      "size" : "1024x1024",
      "filename" : "[email protected]"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

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

Upvotes: 14

MetaSnarf
MetaSnarf

Reputation: 6187

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:

Open vector asset

Then select local file (SVG, PSD)

Local file SVG or PSD

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

Upvotes: 5

Faldu Jaldeep
Faldu Jaldeep

Reputation: 595

First convert you SVG to PNG from this link https://svgtopng.com/ once you convert .PNG then use this link https://makeappicon.com/ to create app icon for both android and iOS.

Upvotes: 15

Related Questions