Skip to main content

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()




Comments

  1. Really special blog post, Thanks for your time designed for writing It .Wow so amazing, I am flattered with all the wonderful information I have got it This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. If you want academic writing related help you can take any best essay writing service from internet.Thank you.

    ReplyDelete
  2. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued t to be very difficult for learners much like me. However, you have made it very easy for me to fully grasp and I now have in mind the correct thing. Your continued reputation as one of the top experts on this topic may be increased through words with appreciation from visitors like me. Thanks, again. I definitely enjoying every little bit of it. It is a great site and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. site

    ReplyDelete
  3. It’s really a nice and useful piece of information. I am glad that you shared this useful information with us. Please keeps us to date like this .thank you for sharing.poe gold

    ReplyDelete
  4. The way you write, you are really a professional blogger. Mattress Sales Gilbert

    ReplyDelete
  5. This blog is very attraction to me .I really like this article and your writing skill is very fantastic and beautiful . thanks a lot for the good language Mattress Store Denver

    ReplyDelete
  6. Would love to always get updated outstanding blog ! 借錢

    ReplyDelete
  7. Thanks for the blog filled with so many information. Stopping by your blog helped me to get what I was looking for. Now my task has become as easy as ABC.借錢


    ReplyDelete
  8. The way you write, you are really a professional blogger. 借錢網

    ReplyDelete
  9. There is so much in this article that I would never have thought of on my own. Your content gives readers things to think about in an interesting way.buyitcert review

    ReplyDelete
  10. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today. Mattress Store Portland

    ReplyDelete
  11. There is so much in this article that I would never have thought of on my own. Your content gives readers things to think about in an interesting way.Mattress Sales Austin

    ReplyDelete
  12. I think this is an informative post and it is very beneficial and knowledgeable. Therefore, I would like to thank you for the endeavors that you have made in writing this article. All the content is absolutely well-researched. Thanks. 借錢

    ReplyDelete


  13. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued a lot of positive interest. aws certification cost

    ReplyDelete
  14. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today. 借現金

    ReplyDelete
  15. The way you write, you are really a professional blogger. ccna test cost

    ReplyDelete


  16. What a well written and compassionate article. I found your thoughts and wisdom to be encouraging and helpful. DIY craft

    ReplyDelete
  17. The way you write, you are really a professional blogger. mrr wheels quality

    ReplyDelete
  18. Totally incredible posting! Heaps of valuable data and motivation, both of which we all need!Relay value your work. poe market

    ReplyDelete
  19. I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. https://www.gaming4ez.com/FFXIV_Gil/ffxiv-gil

    ReplyDelete
  20. I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. Mattress Fort Worth

    ReplyDelete
  21. Good site! I really love how it is simple on my eyes and the data are well written. I’m wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a great day! comptia a+ exam cost

    ReplyDelete
  22. I think this is an informative post and it is very beneficial and knowledgeable. Therefore, I would like to thank you for the endeavors that you have made in writing this article. All the content is absolutely well-researched. Thanks. mcsa server 2016

    ReplyDelete
  23. There is so much in this article that I would never have thought of on my own. Your content gives readers things to think about in an interesting way.借錢

    ReplyDelete
  24. This blog is very attraction to me .I really like this article and your writing skill is very fantastic and beautiful . thanks a lot for the good language   aws certified developer associate

    ReplyDelete
  25. I respect this article for the very much investigated substance and magnificent wording. I got so included in this material that I couldn't quit perusing. I am awed with your work and aptitude. Much obliged to you to such an extent.decoration ideas

    ReplyDelete

  26. This would be the appropriate blog for anybody who really wants to find out about this topic. You are aware of so much its practically difficult to argue with you (not too I really would want…HaHa). You certainly put a brand new spin on the topic thats been revealed for years. Excellent stuff, just excellent! network+ salary

    ReplyDelete
  27. Positive website. I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. 借錢

    ReplyDelete
  28. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. 快速借錢

    ReplyDelete
  29. Outstanding article! I want people to know just how good this information is in your article. Your views are much like my own concerning this subject. I will visit daily your blog because I know. It may be very beneficial for me.cism exam cost

    ReplyDelete
  30. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued a lot of positive interest. I can see why since you have done such a good job of making it interesting. Ikea Papasan chairs

    ReplyDelete
  31. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today. Visit here

    ReplyDelete
  32. The way you write, you are really a professional blogger. Visit here

    ReplyDelete
  33. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today.For more information click here

    ReplyDelete
  34. The way you write, you are really a professional blogger. For more information Click here

    ReplyDelete
  35. What a well written and compassionate article. I found your thoughts and wisdom to be encouraging and helpful,for more information Click here

    ReplyDelete
  36. Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that. For more information Click here

    ReplyDelete


  37. Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that.For more information click here

    ReplyDelete
  38. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today. For more information Visit here

    ReplyDelete
  39. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued a lot of positive interest. click here

    ReplyDelete
  40. What a well written and compassionate article. I found your thoughts and wisdom to be encouraging and helpful. click herex

    ReplyDelete
  41. What a well written and compassionate article. I found your thoughts and wisdom to be encouraging and helpful,for more information Click here

    ReplyDelete
  42. The way you write, you are really a professional blogger. 急借錢

    ReplyDelete
  43. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued a lot of positive interest. 小額借款

    ReplyDelete


  44. What a well written and compassionate article. I found your thoughts and wisdom to be encouraging and helpful. 快速借貸

    ReplyDelete
  45. This is certainly as well a really good posting we seriously experienced looking through. It is far from on a daily basis we have risk to check out a little something.wedding anniversary game ideas

    ReplyDelete
  46. incredible article distributed here by you. i've for a long while been itching to adapt new things with respect to this subject, and i have unquestionably adapted new things today. esr sr01

    ReplyDelete
  47. This is such an awesome asset, to the point that you are giving and you give it away for nothing.our article has piqued a lot of positive interest. Suicide Cleanup colorado

    ReplyDelete

Post a comment

Popular posts from this blog

Return multiple values from a function in objective C

We can return tuples in swift as follows:-

func getData()->(Int,Int,Int){//...code herereturn( hour, minute, second)}You can't do that in objective-c. Best option is using parameters by reference. Something like this.

Disabling print for Production In Swift Project

You'll need to set up a compiler flag to use the Swift preprocessor - go to the Swift Compiler - Custom Flags section of Build Settings to set up a -D DEBUG flag:



Then in your code you can define a DLog() function and only print your message if the DEBUG flag is set:
func DLog(message: String, function: String = __FUNCTION__) { #if DEBUG     println("\(function): \(message)") #endif }