Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which image format i should for ios development native ? SVG or PNG?

Tags:

I am into iOS development from past 1+ months and what I have experienced is that I have to put images for 1x 2x 3x for iphone and then 2x retina for ipad. One of the experienced designers has sugguested to me to go for svg format as it scales itself according to the screen sizes.

So my elaborated questions are:

  1. Can I use svg instead of png?
  2. Is it necessary to still put images in 2x and 3x for iphone and ipad if I'm using svg?
  3. Will the images in svg scale according to the phone size and not lose quality?

If any other information according to your experience please share.

Thank you.

like image 815
narahari_arjun Avatar asked Nov 20 '16 11:11

narahari_arjun


People also ask

Should I use SVG or PNG in my app?

Complex images such as screenshots and detailed illustrations should use PNG. While SVGs are harder to create and edit, they have a variety of benefits over PNGs. Whenever it's appropriate to use vector images, such as decorative graphics and logos, definitely use SVG.

Is SVG supported in iOS?

SVGs will be supported on devices running iOS 13 and up. On devices below iOS 13, it appears SVGs will be converted to PNGs since they're not a supported format. SVGs are typically the preferred asset type for Web and Android platforms.

When should I use PNG or JPG SVG?

JPGs can contain millions of colours and have much smaller file sizes, but are best for photos where there are no crisp lines or text. For pictures with crisp lines or text (e.g. a graph), stick with PNG and compromise on the number of colours you use. Replace PNG with SVG for simple line drawings, logos and icons.

Is SVG the best format?

SVG (Scalable Vector Graphics) is a bidimensional vector image file format and is more powerful and suitable for web than other image formats. Unlike raster formats such as JPG, GIF, and PNG, an SVG image stay crisp and clear at any resolution or size.


1 Answers

Official iOS Dev documentation says "the PNG format is the one most recommended for use in your apps". You can read it for a lot more information here.

  1. Yes, although the supported file types table doesn't list it. Apple values user experience. SVG scaling consumes a few more CPU cycles which they don't like. PNG rendering is more efficient than SVG.
  2. Yes, Apple explicitly recommends using multiple versions of the image at different sizes. Then scaling can be done from the file having the nearest dimensions.
  3. Refer 1. There are cases like zoom-in / out scenarios where SVGs would be better though.

You could use vectorized PDFs alternatively. You can read more here. It isn't without limitations, but with vectorized PDFs, Xcode automatically generates scaled versions. That should make life easier. Note that sometimes the scaled results look quite poor.

like image 147
merovingienne Avatar answered Sep 19 '22 15:09

merovingienne