Images in Windows 8 apps can scale to a number of sizes: 0.8× for certain app-manifest assets, as well as 1.4× and 1.8× for high-DPI displays. Wouldn't it be great if they supported SVGs, so you only had to package one image file?
This, obviously, sucks.
But there's hope! Continuing the fine tradition of WinningJS projects Making Windows 8 App Development Suck Less™,
WinningJS-svg2png gives you a nice Grunt plugin for your build process to convert SVGs to PNGs in all the
appropriate sizes. That way you can continue authoring using SVGs, and just use
.svg.png instead of
referencing the image in your code to get the correctly-scaled image automatically supplied.
WinningJS-svg2png is built on the latest in PhantomJS technology to render your SVGs using a headless WebKit instance, which we have found to produce much more accurate renderings than other solutions like GraphicsMagick or Inkscape.
You'll want to have set up a Gruntfile for your project. Inside of it, you register and configure the task like so:
It will automatically create PNG images as siblings to the SVGs specified in the configuration. That is, if you have
a file at
images/foo.svg, WinningJS-svg2png will create:
Then you can reference them with URLs like
ms-appx:///images/foo.svg.png. The future is here!
You'll probably want to add the generated files to your
.gitignore or similar; a good entry would be
You'll also need to be sure Visual Studio (or MSBuild, more accurately) is aware of these files and includes them in
your package output. To do this, edit your
.jsproj file (e.g. in Notepad). Find the main
<ItemGroup> section, and
add a line like
For more general steps on integrating Grunt into a Windows 8 App's build process, check out the WinningJS-build package's instructions.