SVG support on Android

Does Android support SVG? any example?

63171 次浏览

Firefox for Android supports SVG.

Opera Mobile for Android supports svg, and Opera Mini supports static svg content.

There is a new open-source library that supports loading and drawing SVG Basic 1.1 files: https://github.com/pents90/svg-android. Performance is good as the actual drawing is handled natively by an android.graphics.Picture object.

The most complete answer is this:

  • The Android 2.x default browser does not natively support SVG.
  • The Android 3+ default browsers DO support SVG.

To add SVG support to 2.x versions of the platform, you have two basic choices:

  1. Install a more capable browser (like Firefox or Opera Mobile - both support SVG)
  2. Use a JavaScript polyfill that can parse SVG and render it to an HTML5 canvas

The first option is okay if you're just trying to make SVG work for personal uses or a limited (controllable) set of users. It's not a great option if you want to use SVG while targeting a large, uncontrolled user base.

In the later case, you want to use a polyfill. There are many JavaScript libraries available today that can prase SVG and render to a canvas. Two examples are:

Using a polyfill, you can render your SVG in a canavs on all versions of Android 2.x.

For a more complete example of this approach, you can refer to this blog post that discusses the use of the canvg polyfill for making Kendo UI DataViz charts (SVG-based) work on Android 2.x. Hope that helps!

There is a new library (under active development) androidsvg which allows one to incorporate svg images directly in to projects. It has the advantage of defining an SVGImageView which allows one to incorporate an svg directly in the layout xml.

Finally, including svg in android is straightforward.

More details: Stack Overflow post

I know my solution is somewhat hardcore, but it works great, doesn't require any external libraries (at least not in your final code) and is extremely fast.

1) Just take an existing SVG loading library, such as for example svg-android-2 (which is a fork of svg-android mentioned in another answer, just with more features and bugfixes): https://code.google.com/p/svg-android-2/

2) Write a simple app that will do nothing else but load and display your SVG image.

3) Modify the SVG loading library, so that it prints the Java code that creates the Picture class or saves it in a String variable.

4) Copy-paste the Java code obtained this way into the app you are writing.

To get more information about this technique and download sample source code, go to my blog: http://androiddreamrevised.blogspot.it/2014/06/transforming-svg-images-into-android.html

You can get a working example of this technique from Google Play here: https://play.google.com/store/apps/details?id=pl.bartoszwesolowski.svgtodrawablesample

Here's an example of a commercial app created using this technique (Milan metro map): https://play.google.com/store/apps/details?id=pl.bartoszwesolowski.atmmetroplan

Notice how fast the map loads and how pretty it looks, even when magnified.

Android supports vector drawables: https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

And there exists an Android SVG to VectorDrawable Converter: http://inloop.github.io/svg2android/