SVG 2 UWP Tiles

This utility takes as input an SVG file (preferably on a transparent background) which will be resized/padded etc. into the various UWP Tile & Icon assets.

But wait, can't you just use the Auto-generate visual assets for your UWP apps feature found in Visual Studio 2017? YES you can and it's great! I created this for those who don't have/want to install Visual Studio to generate these as well as to provide a little more flexibility/customization, and to learn about how the Logos/Tiles are used.

Installation

Save as developer depedency to an existing project

npm install svg2uwptiles --save-dev

Install globally

npm install svg2uwptiles -g

Usage

Usage: svg2uwptiles [options]

Options:

  -h, --help                           output usage information
  -V, --version                        output the version number
  -i, --icon-file <path>               Source SVG icon file
  -c, --canvas-file <path>             Optional canvas (background) file, default: blank.svg
  -o, --output-folder <path>           Destination folder for generated assets, default: ./assets
  -n, --names-in-tiles <true|false>    Boolean indicating if names will be included in the tiles which will case padding to be added, default: false
  -u, --include-unplated <true|false>  Boolean indicating if unplated tiles (for taskbar icons) should be includes, default: true

Examples

Generate all icons/tiles including unplated tiles for the given SVG file into ./assets

svg2uwptiles -i myIcon.svg

Generate all icons/tiles including unplated tiles for the given SVG file into a custom output folder

svg2uwptiles -i myIcon.svg -o "c:\assets"

Note to Electron users

If using electron-windows-store ensure that your assets folder is not under the input-directory specified, otherwise you will get errors from MakePri.

If using unplated icons (which IMO look better in the taskbar and is the default) you will need to include the argument --make-pri true in your electron-windows-store call.

Here's an example of my electron-windows-store call (as a .cmd)

  electron-windows-store ^
  --identity-name <NAME> ^
  --package-display-name <NAME> ^
  --assets "C:\<SOME_DIR>assets" ^
  --manifest "C:\<SOME_DIR>\AppXManifest.xml" ^
  --input-directory "C:\<SOME_DIR>\<APP_NAME>-win32-x64" ^
  --output-directory "C:\<SOME_DIR>\<APP_NAME>-uwp\app" ^
  --flatten true ^
  --package-version 1.0.0.0 ^
  --package-name <EXE_NAME> ^
  --make-pri true ^
  --verbose true

AppxManifest

To ensure the generated icons are used in your UWP application ensure your Logo/Tile names match the ones generated. The following is an example of the VisualElements node:

  <uap:VisualElements DisplayName="DemoApp" Square150x150Logo="Assets\Square150x150Logo.png" Square44x44Logo="Assets\Square44x44Logo.png" Description="DemoApp" BackgroundColor="transparent">
    <uap:LockScreen Notification="badgeAndTileText" BadgeLogo="Assets\BadgeLogo.png" />
    <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png" Square310x310Logo="Assets\LargeTile.png" Square71x71Logo="Assets\SmallTile.png"></uap:DefaultTile>
    <uap:SplashScreen Image="Assets\SplashScreen.png" />
  </uap:VisualElements>