Vector graphics in iOS

In past, designers had to create multiple versions of the same asset (1x, 2x, 3x) to satisfy multiple screen sizes. Using vector assets can save you time because you only have to generate the asset once. You just need an.xcassets file in your project for storing your images. In there, you can declare image sets to be “Vectors”.

A vector file contains a lot of metadata of an asset that tells the system how to render it's contents, independent of the screen's resolution. This also means that whenever we get larger screen resolutions, Xcode will be able to scale up your images from your already existing vector PDF for you, giving you automatic support for future devices for free.

Steps:-

• Select “New Image Set” in your XCAsset.
• Select the Attributes Inspector in Utilities panel.
• Under the types drop-down menu, select "Vector"
• Drag and drop your vector PDF
• Use the Xcode image catalog image set as you would with any other image. For instance, calling --imageNamed: in code, and passing in the NSString literal name of the image set.
• When you build your project, Xcode will automatically create @1x, @2x and @3x PNG files from the PDF that you've used in the Xcode asset catalog.
• When you run the application, iOS will automatically pick the appropraite @1x, @2x or #3x image that Xcode generated based on the device requirements

Advantages:

1. Vector drawables scales without losing image quality.
2. We need only one asset file(.pdf in 1x size) for multiple vector images.
3. Vector drawables can reduce the size of our app.
4. Help us to easily support different iOS devices.

But there’s another advantage: When it comes to icons a typical use case is to embed the same icon in multiple scenarios. We can colorize icon strokes in Xcode as well, so there’s no need to store multiple color variants of your icons in yourImages.xcassets. You just need to set “Render as” to “Template image”.

typedef NS_ENUM(NSInteger, UIImageRenderingMode) {
    UIImageRenderingModeAutomatic,          // Use the default rendering mode for the context where the image is used
    UIImageRenderingModeAlwaysOriginal,     // Always draw the original image, without treating it as a template
    UIImageRenderingModeAlwaysTemplate,     // Always draw the image as a template image, ignoring its color information
} NS_ENUM_AVAILABLE_IOS(7_0);

• UIImageRenderingModeAlwaysOriginal - Just like the option sounds, this mode tells the system to render your image exactly as it looks in your image's file.
• UIImageRenderingModeAlwaysTemplate - This mode is our funnest mode. It scans your image, and creates a stencil/template from all pixels in your image that aren't transparent. It also ignores all color information in your image and uses the tintColor property on your UIView subclasses to fill these template pixels with the color of your choice.
• UIImageRenderingModeAutomatic - This mode allows the system to decide how to render your image based on the image's environment. If your image is placed within places like UITabBars, UINavigationBars, UIToolbars, andUISegmentedControls, then your image will be rendered as AlwaysTemplate. Everywhere else will use theAlwaysOriginal rendering mode.

Then, your freshly added vector images are colorized in the tint color set in their properties in Interface Builder. If you can’t use Interface Builder and want to set the properties programmatically (in Swift):

myImageView.image = myImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
myImageView.tintColor = UIColor.whiteColor()