Graphics for mobile devices?

Question

HTML

Good afternoon
I was wondering how to create a cross-platform and permission-independent (couldn't find another word) HTML application.
So given:
- A bunch of icons, quite simple in their execution (without gradients and other complexities)
- Android 2.3+, iOS. 3.1.2+
What result I want to get:
So that the icons are scaled in proportion to the resolution.
Possible solutions:
Make PNG icon sets - The solution is more or less acceptable for iOS. they don't have many licenses. But for Android, it is hardly possible to list all possible
SVG solutions - it is not supported by younger versions of Android 2.3
Canvas - Complex implementation + quite resource hungry. The inhibited responsiveness of interfaces on non-top-end pieces of iron is very disturbing.
Who else with what implementations faced and can advise something?

Answer 1

Table of possible Android screen resolutions and pixel density developer.android.com/guide/practices/screens_support.html#testing
And statistics on the number of devices with different characteristics developer.android.com/resources/dashboard/screens.html
As you can see from statistics - you can really get by with 4 sets of icons.

Answer 2

>>To scale the icons proportionally to the resolution.
As practice shows, scaling icons does little good.
It is more correct to use different icons for different resolutions (something tells me that there are not too many significantly different resolutions here).
For iOS, something tells me that there are 4 permissions (iphone 3, iphone 4, ipad 1/2, new ipad)

Answer 3

As an option, store the icons of the largest size in the application and reduce them proportionally depending on the device. When you reduce the quality suffers much less than when you increase.