I recently finished the first iteration of a game concept I was working on for mobile phones or browsers. My plan was to use PhoneGap and write it in JavaScript/HTML and port it everywhere. Because I wanted to be light on graphics and support any number of resolutions and orientations, I built this use SVG. I have been testing in Chrome and figured that the same SVG support would be on Android...
Well after doing some Googling, I see that the android devs specifically left out SVG rendering from the browser... I assume this means that once I convert my app into PhoneGap format, it won't run on Android. Is there any way to bake-in SVG rendering with a PhoneGap plugin or something, or am I SOL?
I saw that Honeycomb has support for SVG, does anyone know if they plan on backporting this to 2.2, 2.3, etc? It seems to be a huge oversight that if you want to support multiple resolutions and screens you wouldn't incorporate a technology than can dynamically create graphics.
As you mentioned in your question, support for SVG was compiled into the Webkit browser for Android 3.0. I just tried the Android 3.1 emulator, and it is working there as well:
So it appears as though, for future releases, we can probably count on SVG support being included in the Webkit browser.
I am not aware of any work being done to bring SVG to the webkit browser on earlier versions of Android.
You might be able to use canvg which uses javascript to interpret SVG and draw it on the canvas. I expect performance will be too slow for a game, though (I've not tried it myself yet)
Related
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I have a web application, not a native Android app, and the animated gif we use as a loading icon doesn't show its animation. I've browsed other sites and it seems that no animated gifs work in Safari mobile on Android, but I've been unable to find a documented confirmation that this is the case. Does anyone know why the android browser doesn't show animated gifs? Is there a workaround for this? I've seen lots of topics about showing animation in a WebView in a native app, but none for straight web apps. Do I have to create the image with css animation?
Thanks very much!
Android uses webkit which is the underlying engine from Safari, not Safari itself.
Historically it has not supported animated GIFs due to the way the graphics are composited, however they can be optionally enabled by the user under the advanced settings of the browser on some more recent devices. That probably does not make them useful to you.
For wide compatibility with various android versions you would probably be better off with a javascript or css animation (not sure if the later works all the way back through the earliest releases).
After running tests with a project I'm working on, I can say that:
gifs display beautifully on iOS devices (I'm testing on an iPhone4 running iOS6 and gifs run smoothly. I have tested on newer devices as well...it only gets better!)
gifs display pretty badly on android (I'm testing on Galaxy S3 running android 4.1). Its even better to display a flat image, the gif animation lags a lot).
I am developing an Android app using web technologies and the CSS transitions (quite essential to the functionality of the app, since they're responsible for scrolling and swiping pages) are quite sluggish.
According to information found on the internet, CSS transitions are not hardware accelerated unless transformed 3-dimensionally. I found many articles saying that I should put "-webkit-transform: translateZ(0);" to my animated elements.
However, the Webkit in older Android versions (below 3.0) doesn't support 3D transformations.
Can I embed a newer version of WebKit with my app?
Can I embed a newer version of WebKit with my app?
In theory, perhaps.
You would have to completely rewrite WebKit to use something that the NDK supports for output (e.g., OpenGL) and embed it in your app. I estimate that this will take >100 developer-months, so if you have a large team and matching budget, you are welcome to try this. By the time you complete the work, the "older Android versions" will be obsolete, and you will not need the code.
Hence, from a practical standpoint, either redesign the apps such that CSS transitions are no longer "essential to the functionality of the app", or limit your app to Android 3.0+ and wait for the Android user base to catch up.
I have been trying to get the Fusion Charts to work on Android 2.2 (emulator). But its not loading anything . i can see only blank screen.
Has anyone run Fusion Charts on the Android device / emulator before? Can Fusion charts run on Android itself?
Edit:
I have try to load the chart in default browser of android. In that also its not loading. But its running in Opera and Mozilla Firefox. Any Idea?
Additional Information : Browser version is Webkit 3.1
FusionCharts Flash version loads fine on devices supporting Flash (Glaxy Tab, etc.)
For JavaScript version, the story is slightly different. I am copying a section of my notes here:
FusionCharts uses an enhanced version of HighCharts in order to render JavaScript based charts.
HighCharts uses 'SVG' as a technology to render the visualizations. Though considered part of HTML5, certain mobile platforms (like Android) does not support SVG as of yet.
As of now, Android supports "canvas" as a drawing technology for HTML5. Gingerbread is expected to fully support SVG.
If you refer to the history of HighCharts, you would see that HighCharts version 1.x supported canvas, but since 2.x they have shifted to SVG anticipating the inclusion of SVG support on major mobile platforms.
We, at FusionCharts, use HighCharts 2.x as a base to render FusionCharts. Consequently, they do not run on Android.
However, there is a workaround, if you replace the highcharts.js (2.x) supplied with FusionCharts by older highcharts.js, you would notice that it works fine on Android platforms. But that would mean limited functionality as a lot of enhancements done to HighCharts would be lost.
I hope I had been clear on my points. If you need further clarification, I can definitely provide you with more information. I can also assist you in implementing the older highcharts.js by particularly detecting Android based browsers and doing selective loading of older HighCharts JS files.
There is also a small extension of FusionCharts that gracefully handles this replacement of older HighCharts for devices that does not support SVG or VML but supports canvas.
You can see it in action at: http://www.fusioncharts.com/labs/peek/canvasmodulefallback/
Download the files from: http://www.fusioncharts.com/labs/peek/canvasmodulefallback/sample-canvasmodulefallback.zip
Zero when the data will be mobile devices crash.
var chartObj1 = new FusionCharts({
swfUrl:'Charts/Column2D.swf',
renderer: 'javascript',
renderAt: 'chartspan',
dataSource: {
"chart": {
"caption" : "Sales Summary",
"subcaption": "Summary of Sales"
},
"data": [
{"value":"0"},
{"value":"0"},
{"value":"0"},
{"value":"0"}
]
},
dataFormat: FusionChartsDataFormats.JSON
}).render();
I am investigating SVG, so I was wondering if anyone knows how good SVG support is for browsers on smart-phones. I know Opera Mini/iPhone support a lot of SVG Tiny, but I cannot figure out the support for other browsers (Blackberry, Pre, Android, Nokia smart-phones). I know phones using IE as rendering engine will have no support at all.
I have tried to find latest data, but cannot find anything later than 2007. I would appreciate if anyone can link to a post that discusses SVG support on mobile browsers.
Information about this topic really is rare (but that's nothing new when we talk about SVG, unfortunately...)
There are a few test results from the Tiny Test Suite available (end of 2008):
http://www.w3.org/Graphics/SVG/1.2/Tiny/ImpReport.html
BitFlash, eSVG, Ikivo and Motorola SVG are of special interest here. Opera Mobile is not covered by this test but it uses Ikivo as far as I know.
And there is a pretty current discussion here:
http://tech.dir.groups.yahoo.com/group/svg-developers/message/63147
Until now the results of this discussion are rather poor, but maybe you can join in there...
However, considering the pain (native) SVG development causes with "desktop browsers" I would not really recommend it for mobile browsers unless you have a very specific target group (with SVG enabled devices) or other serious reasons to use SVG.
I'm sorry that I couldn't contribute more, maybe it was a little help anyway.
As for today (Jan 2013) it looks like SVG is supported in the most popular desktop and mobile browsers - on their latest versions:
IE
Firefox Chrome
Safari
Opera
iOS Safari
Opera Mini
Android Browser
Blackberry Browser
Opera Mobile
Chrome for Android
Firefox for Android
Source: caniuse.com/svg
Supported browsers:
iOS 5+
Android 3+
Source: http://caniuse.com/#feat=svg-html5
Currently some people including me work on it independently.
You may find working solution in these articles:
Android. ImageView with SVG Support.
Android ImageView and Drawable with SVG support
BlackBerry actually supports SVG animation as far as OS 6, albeit imperfectly.
The same OS 6 also supports SVG image with no problem of resizing.