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.
Related
I am developing a site that is using CSS animations for a background slider. There seems to be a problem with the images loading on Galaxy S3. Is there something I can do to fix this? Do older phones not support animations?
Here is the site: capelos.gonzbergagency.com
And here is the demo it is based on: http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/
CSS capabilities are provided by the web browser, not by the phone, verify online whether your browser version supports the CSS you used.
Also, try a modern browser like Firefox for Android or Chrome for Android, if you haven't already.
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
Does Android Stock Browser support CSS3 transforms?
According to this you can: http://caniuse.com/transforms2d
Im testing on the 'Ice Cream Sandwich' OS and it doesnt seem to work.
Chrome does seem to work, but the stock browser doesn't.
Can someone point me to some documentation or give me their experiences on this? Can't find any stats on that stock browser. Thank you.
I've been using CSS3 Transforms on Android on a mobile site I'm building. You do need to use the WebKit prefix for them to work. i.e. -webkit-transform: skewX(35deg)
MDN Transform
CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid
Yes, but you need to use the webkit prefixes and take care with media queries like "max-device-width: 360px" which doesn't work in some devices with this browser.
If some rule isn't working try to change max-device-width by max-width. It worked for me sometimes.
As we develop our mobile version website, I am wondering how many of the browser specific CSS3 versions are necessary. The plan is for only smaller handheld devices to be sent to the mobile version, iPad, Galaxy and other tablets will stay on the main website.
In particular I am wondering about box-shadow, border-radius and gradient css support.
I have been combing the wonderful world of google and come up with the list below, of which browser specific versions might be necessary to cover the bulk of smart phones.
-webkit- for box-shadow
-webkit- for border-radius
-webkit-, -o-, -moz- for gradient
Can anyone confirm my list? Or tell me which ones I didn't list might be necessary?
Thanks
I suggest you use css3please.com to get all the possible prefixes for most of the commonly used css3 features.
As for mobile; you will not need the IE prefixes (opera has mobile browsers etc.)
Don't forget to always specify a non-prefixed version, regardless of if its already supported by some browsers, because it will be in the future, and the prefixed versions will go ignored.
To look up more specific information about property support in different browsers you could look them up on caniuse.com
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)