CODEWITHSUNDEEP
htmlmobilecanvassvg
Steven
Steven

Reputation: 13975

SVG/VML vs Canvas vs HTML - Mobile

I am looking at building a fairly simple map (I'd say maybe 100 objects) that are shown/changed color and have onclick (mobile) mouseover (desktop) events that show another object. I am looking at the following.

  1. Canvas
  2. SVG/VML
  3. JS/HTML

But my problem is I need to somehow support

  1. IE (7-10)
  2. Chrome
  3. Firefox
  4. Blackberry 6-7
  5. Windows Mobile 7 (IE9)
  6. iOS
  7. Android 2.3+ (no svg)

And I can't seem to find a single system that could support all of those, Android doesn't support SVG, Mobile browsers seem to be very slow with canvas, IE 7-8 doesn't support canvas, HTML doesn't support "shapes" without the use of images, and would require swapping images, which would be not very good visually... yada yada yada...

Is there any idea how I could build once for all of these? I was thinking it may be better to do Canvas (mobile) & SVG (desktop). But upon testing mobile it seems that canvas is massively slow.

Is there any libraries or systems that may help?

Upvotes: 2

Views: 1684

Answers (3)

Basic Primitives Support
Basic Primitives Support

Reputation: 570

  1. If you need IE7-8 then you have to use VML, it is only supported graphics mode there.
  2. If you consider iOS then you have to use Canvas, it is at least 10 times faster on iPad than SVG.
  3. Canvas is only graphics mdoe available on default Android 2.x browser.
  4. If you need browser supported zoom and size of your map exceeds 3000px then Canvas does not work and you have to use SVG.

Upvotes: 1

Zee Spencer
Zee Spencer

Reputation: 3538

One of the ways you may approach this is to create an interface that you're application uses to draw stuff, then have two different renderer objects, one for IE7~8 using SVG, and one using Canvas for everything else.

Upvotes: -1

Simon Sarris
Simon Sarris

Reputation: 63812

And I can't seem to find a single system that could support all of those

Well there isn't one.

You're going to have to stick with movable divs or else make two versions of your app. Sorry.

Canvas isn't slow, but some mobile are slow. Canvas will (almost) always be faster than the DOM but its up to you to keep it that way. What code were you testing, exactly?

Upvotes: 1

Related Questions