That Vector Thing: Xcode 6, PDF assets, and unfortunate outcomes

During the iOS 8/OS X 10 10 Keynote, someone mentioned that Xcode assets would now support PDF vector art. I was thrilled. I’ve been waiting for a long time for vector art to form part of the Cocoa touch development arsenal. Unfortunately, the reality is not nearly as interesting as the promise.

Yes, you can add PDF art to asset groups but the size of the art is fixed. When you create a UIImage with a PDF source it gets rasterized. The result stretches with the underlying bits, not vectors:

Screen Shot 2014-06-09 at 1.31.38 PM

Compare that to the original art, which was 35×40 in size, scaled for preview on OS X:

Screen Shot 2014-06-09 at 1.31.52 PM

So what do you do? The simplest answer is to create multiple PDF images and treat them the way you would PNG images, whether using a simple retina pair or building icons and launch assets. So your asset’s contents can end up looking like this:

{
  "images" : [
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "AppIcon29x29.pdf",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "AppIcon29x29@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "AppIcon29x29@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "AppIcon29x29~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "AppIcon40x40@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "AppIcon40x40@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "AppIcon40x40~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "AppIcon50x50@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "50x50",
      "idiom" : "ipad",
      "filename" : "AppIcon50x50~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "AppIcon57x57@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "57x57",
      "idiom" : "iphone",
      "filename" : "AppIcon57x57.pdf",
      "scale" : "1x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "AppIcon60x60@2x.pdf",
      "scale" : "2x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "AppIcon72x72@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "72x72",
      "idiom" : "ipad",
      "filename" : "AppIcon72x72~ipad.pdf",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "AppIcon76x76@2x~ipad.pdf",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "AppIcon76x76~ipad.pdf",
      "scale" : "1x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "arthelper"
  }
}}

That’s silly on several levels. For one thing, no matter how compact your vector art is, 17 copies of it can become substantially larger than 17 very tiny PNGs. (The 19 items in the following includes the app icon set folder and the JSON contents file.)

Screen Shot 2014-06-09 at 1.26.03 PM

 

Thinking myself clever, I tried creating a version where all items in the icon set pointed to the same image resource. I figured, why not have each item load the same material since it’s vector based to begin with. The tl;dr version is this: it didn’t work. Xcode would not load assets formatted in that way.

The only bright side arrives in the default image side of things. With default images, art follows many geometries — or at least at this time, who knows what it will be at the end of this summer, or by the time I finish catching up with the WWDC videos. Because of this and their naturally large sizes, my PDF tests regularly improved over the PNGs they replaced for launch images. It’s still pretty redundant for retina and non-retina screens, but it was less bad than a full suite of launch PNGs in my tests.

 

5 Comments

  • I think the mistake here is thinking that this feature is for icons. Icons must be PNG (for speed). This feature works great for app-internal artwork (e.g. content of buttons, image views, etc.). See my discussion here: http://stackoverflow.com/a/24616877/341994

    • It looks like I should have tried again in Beta 2. Working right now with Beta 3, and trying to see if I can get pure vector working with UIKit

    • I thought Xcode would take care of that and render the icons on compile-time. Dumb me…

      • it does. it takes care of it on compile time.

  • […] posted before about how the new PDF support in asset catalogs doesn’t really do what we expect (offer resizable vector assets). To make up for that, here’s a class that loads images from […]