-2

I am developing two native apps on Android and iOS. For a recent website I did, I only used SVG because of the better scaling quality and smaller file size. Is this also possible and considered good-practice on mobile devices or should I stick with good old PNGs? From my initial research I gathered, that it is possible for Android, and might be for iOS with SVGKit or JAMSVGImage, but is this feasible yet?

Bhavesh Nayi
  • 3,626
  • 1
  • 27
  • 42
ueen
  • 692
  • 3
  • 9
  • 21

2 Answers2

1

Speaking to the iOS part of this question, Apple supports vector-based assets, and actively encourages their use as glyphs (vector-based, monochromatic templates) for icons on toolbars, navigation bars, etc. You can see more details here on the Custom Icons part of the Apple Human Interface Guidelines.

That said, the standard format they support, rather than SVG, is vector-based PDF (i.e. a PDF file with only vector-based content). There's more discussion on that part in this question, if you're interested. Various tools like Adobe Illustrator and Affinity Designer support exports directly to PDF (see here & here for those tools' respective tutorials).

Edit: As discussed in the comments, you can get a comparison of vector PDF vs. SVG here.

Hope this helps.

TheNeil
  • 3,321
  • 2
  • 27
  • 52
  • Thank you very much for the inside, do you have any experience with SVGKit or JAMSVGImage? And what is the difference when saving as PDF instead of SVG, are features missing? And concerning performance, are raster or vector graphics preferable? :) – ueen Apr 28 '19 at 15:18
  • Sorry, but I'm not familiar with those tools myself. Personally, I recommend exporting PDF directly from whatever vector tool you're using to make the artwork, rather than converting afterwards. As per that Human Interface Guidelines link, Apple recommend vector over raster for icons. In terms of the comparative benefits of each file type, they should be much the same for basic vector graphics (by definition, both with scale the same), but there's more info on that here: https://www.95visual.com/blog/svg-pdf-jpg-png-whats-the-difference – TheNeil Apr 28 '19 at 15:21
  • Are the pdfs converted to pngs on compiling or are they interpreted on runtime? – ueen Apr 28 '19 at 17:22
  • 1
    No, I believe they're kept as PDFs, specifically so they work as vector, and scale, rather than as raster (which a PNG would be). There's some more info on scaling here, if you're interested: https://useyourloaf.com/blog/xcode-9-vector-images/ – TheNeil Apr 28 '19 at 18:19
  • According to that source it requires iOS 11, how to support iOS 10 then? How about SwiftSVG library? – ueen Apr 28 '19 at 20:15
  • Sorry, but you might need rasters for iOS 10. That’s pretty old by now though. According to this Apple page, that’d be < 5% of devices introduced in the last 4 years. You probably want to weigh up the value of supporting that, compared to having well-scaled graphics. https://developer.apple.com/support/app-store/ – TheNeil Apr 28 '19 at 20:17
  • Yea but some people use Phones older than 4 years ;) – ueen Apr 28 '19 at 20:27
  • 1
    Hey. I hear you - I like to keep all included too - but it’s all about the trade off of the extra effort for those smaller user bases. Really depends on what you’re trying to deliver and what share of people you think will be on older devices. You could always use vector pdf as the default, and have an extra check to switch to rasters for older users, if you did want to keep that support in place: https://stackoverflow.com/a/24505884/2272431 – TheNeil Apr 28 '19 at 20:30
  • Alright, well in Android this is handled way better with Support Library.... – ueen Apr 28 '19 at 20:34
  • 1
    There may also be some other options for older iOS versions that I'm not aware of, and others will contribute to this conversation. I don't claim to be an expert, but I hope this helped! – TheNeil Apr 28 '19 at 20:48
  • Xcode 12 and later support SVG images as well as the traditional PDF vector format in your assets catalog. – Rob Jul 31 '22 at 03:08
0

Hey you can use SVG file in Android. Android Studio convert your SVG vector into XML vector

Here is the process how you can import SVG file into Android Studio

1) Select Android View Directory.

2) Navigate to app > res > drawable.

3) Right click on drawable folder.

4) Select New > Vector Asset. Asset Studio Dialog will appear.

5) Set Asset type to Local files.

6) Select your SVG image from Path section.

7) Also can perform other action like , override size, name, opacity e.t.c.

And you are good to go.

And for IOS you can import PDF file to use Scaleable

Arbaz Pirwani
  • 935
  • 7
  • 22