82

Does Android support SVG? any example?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Kakey
  • 3,936
  • 5
  • 29
  • 45

7 Answers7

56

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!

Todd
  • 5,538
  • 1
  • 31
  • 34
22

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.

rekire
  • 47,260
  • 30
  • 167
  • 264
pents90
  • 1,782
  • 17
  • 17
  • So that it's not missed, I'll add a comment here to that (as mentioned in @Todd's answer) Android 3+ does support SVG. So there's no need for developers to be concerned about the libraries if they're not worried about older Android devices. – monotasker Feb 24 '12 at 15:50
  • 9
    In my answer, I'm referring to a library that enables a developer to load and render SVG files in their apps. Android 3+ adds browser support for SVG, but does **not** have support SVG in its developer API. – pents90 Feb 25 '12 at 03:55
  • This one did not work for me unfortunately with Android 4.3. The sample image ends up being blank. I am using the exact code that is in the tutorial page on the Wiki. – BVB Nov 06 '13 at 21:33
  • 2
    @BVB you will need to turn off hardware acceleration for it to work on Android 4.x. See: http://stackoverflow.com/questions/10384613/android-canvas-drawpicture-not-working-in-devices-with-ice-cream-sandwich and http://stackoverflow.com/questions/8771219/android-4-0-compatibility-issues-with-canvas-clippath – pents90 Nov 07 '13 at 22:40
  • Thanks, but will that not have negative effects elsewhere? – BVB Nov 08 '13 at 00:27
  • You can turn it off just in the view that requires it. However, I agree that it is sad and depressing that Canvas.drawPicture() has been broken in Android 4.x with no recourse provided for devs. – pents90 Nov 08 '13 at 18:19
  • Since svg-android isn't being developed any more, although it still contains a lot of bugs and has plenty of missing features (e.g. inability to add text to images), I'd suggest using one of its forks instead, such as for example svg-android-2: https://code.google.com/p/svg-android-2/ – Bartek Jun 27 '14 at 18:05
  • Since svg-android-2 is also no longer being developed, I've taken it upon myself to dedicate my 20% project towards improving SVG support for Android. Please feel free to contribute to Sharp: https://github.com/Pixplicity/sharp – Paul Lammertsma Aug 14 '15 at 18:51
  • Thanks @PaulLammertsma for taking up the torch! Also see https://code.google.com/p/androidsvg which looks like a good implementation. – pents90 Aug 17 '15 at 02:53
8

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

Community
  • 1
  • 1
Abid H. Mujtaba
  • 1,890
  • 1
  • 24
  • 20
  • This svg library actually works. svg-android and it's forks didn't apply styles/css that I defined in a group for the group's children. This one does. Thank you. – domenukk Dec 16 '13 at 15:46
8

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/

David Peer
  • 130
  • 2
  • 7
  • 1
    and backward port in support library: https://developer.android.com/reference/android/support/graphics/drawable/VectorDrawableCompat.html – Leos Literak Jun 10 '16 at 20:39
1

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.

Bartek
  • 1,327
  • 1
  • 11
  • 22
0

Firefox for Android supports SVG.

Zuuum
  • 1,495
  • 11
  • 18
0

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

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139