Is it time for developers to invest in Vector graphics

Wirelessly posted (Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3)

Now I don't know an incredible amount about the nature of bitmaps and vector imaging, but I think I have a solid enough foundation so ill have a crack at this.

While it may seem more practical to use dynamic vector graphics on the surface, the load on the main processor would be overwhelming (vectors are math equation based). This would also eat up graphics computation for rendering shades, colors, and all that jazz. With bitmaps, the computational load relies on graphics processing, pulling image data from hdd, caching the images, and ram utilization. This leave the main processor to coordinate all of this. What this means is that the computational power for utilizing bitmaps, particularly from the main processor, is drastically less than using dynamic vector graphics. This means less lag and less power consumption. Both of which would have an adverse affect on user experience and viability. I think the iPads processing power needs to be beefed up a lot before this method would become practical.


Now it's time for someone to come along and say that I don't know what I'm talking about and this whole post is moot (or makes me looks dumb).....

 

GrindedDown is right. It would be OK for some basic shapes / UI elements to be vector-based, but complex graphics are too much of a load for the CPU.

I can't imagine having to load tens of icons that look like this:



every time you hit your home button. The iPad would probably become unresponsive / laggy for a couple seconds and drain battery like crazy.

 

As it happens... The graphics chip is designed for drawing vector graphics. That's it's job. When you see a button on your iPad screen, it's not *just* a bitmap. It's 2 triangles joined together to form a rectangle, and then filled with a bitmap texture. So if there was a big switch from bitmap to vector graphics the graphics processor would still do all of the work, and the CPU would still be free to do its thing.

If that happened? Well, most vector graphics based interfaces tend to be fairly simple, so I'd expect it to be very fast. It'd take much less memory of course, you'd be looking at a few KB of graphics for an app instead of MBs.

The downside: we'd lose a lot of the beautiful graphics. It's very hard to do complex textures with vectors only, so e.g. you'd lose those nice wood and leather textures some apps have. A lot of designers are used to bitmap based tools too, so getting decent graphics done for apps would be harder, costs would go up and quality would drop.

Quick example of the kind of issues you'd get: Earlier I made a simple button, to be shown above a live camera view. It's just a white button, with a simple shape, and a transparent background. I made it with vectors so it's easy to make retina/standard versions. But it's white, and when it's shown over a white background it becomes invisible - so I add a slight drop shadow to make it visible. Drop shadows are very hard to render with vectors. The only options are to save it as a bitmap, or to remove the drop shadow and add a black outline instead - which doesn't look anywhere near as good.

----------

I saw that article too. It was totally wrong. That's the icon size we submit to apple - it's used in iTunes for coverflow etc., and it's used in apple's marketing if they feature your app. It's not even included in the actual app package - it's so big that you'd only fit 6 icons on an iPad 3 home screen!

The size of that is 512x512, the iPad 3 icons are something like 144x144.

 

I'm a supporter of vector graphics for systems. While it's true that some images are still better bitmapped like ones that are very complicated, most of the borders, edges, fonts, and interface options are better off as vector graphics which will load faster and better. Even though bitmaps are heavier, if you generate a 150% oversized bitmap to be scaled down, you can end up covering your bases for different display sizes. The reason why vector graphics isn't feasible for everything within the app is due to the nature of processing. Huge amounts of processing going to complicated vector graphics can end up causing lag on the application. It's about the same thing when you're scripting a website. There's an optimal loading time provided that you don't have too many complicated things loading.

 

Just thinking out loud here, but couldn't you use a gradient fill in the alpha channel to get a drop shadow effect while still using a vector format?

 

I saw this thread and was reminded of this. Boy those were fun!

 

This is why a lot of us are SVG supporters.

Heck, try this SVG library written in Javascript:

http://raphaeljs.com/

Click on the tiger or any of the demos on that page (preferably with Safari or FF).

(Some of the charts are interactive, btw)

 

I can't believe this, my prayers have been answered!