SVG Kit for Android TutorialSvg Kit for Android

Getting started

The core of the library is "libsvg.aar". It does everything from fast SAX-based parsing, rendering .svg files for Android at the bitmaps and surfaces, computers corresponding CSS styles defined in .svg and more.
It provides an API (primarily SVGHelper class) to operate with files in a typical stream-like manner.

Libsvg.aar supports many graphical features defined in SVG 1.1 and SVG 1.2. But it is intended to render only static images without animation, filters and custom SVG fonts.

The feature list includes:

  • Drawing shapes (ellipse, circle, polyline, polygone, rect, line etc.),
  • Drawing gradients (except focus points in radial gradients),
  • Drawing path elements, but without markers,
  • Drawing text elements, currently working only with standard android fonts,
  • Supported such elements as: <g>, <defs>, <use>.

The list of implemented features is not so big, but it is more than enough to paint most of typical SVG files.

SVGHelper: parse and get suitable result

To use this helper, just follow through the list below in top-down order.

  1. Add "libsvg.aar" in your project.
  2. Choose SVG source:
    • From file:
      SVGHelper.noContext().open(new File(...));
    • From resources (works only with context, useContext(...) is necessary):
      SVGHelper.useContext(context).open(R.raw.svg_file);
    • From web:
      SVGHelper.noContext().open(new URL(...));
    • Set SVG code directly: SVGHelper.noContext().open("<svg> any svg source code </svg>");
  3. Determine SVG document size (if necessary). This option is required if original SVG image has no width/height and viewport attributes.
    • SVGHelper.noContext().open(...).setBaseBounds(300, 400);
      - define sizes
    • Or let library compute itself (if SVG has width/height definition),
    • SVGHelper.noContext().open(...).checkSVGSize();
      Note: might add extra performance penalty.
  4. Choosing svg transform (if necessary).
    • Set scale directly: SVGHelper.noContext().open(...).setScale(1.7f);
    • Or set result bounds:
      SVGHelper.noContext().open(...).setRequestBounds(1024, 768);
  5. Additional SVG transform options.
    • Set keep aspect ratio option (by default true).
    • SVGHelper.noContext().open(...).setKeepAspectRatio(false);
    • Set crop image option (by default false)
      SVGHelper.noContext().open(...).setCropImage(true);
  6. Choose result type.
    • Bitmap:
      SVGHelper.noContext().open(...).getBitmap();
    • BitmapDrawable:
      SVGHelper.useContext(context).open(...).getBitmapDrawable();
    • Bitmap as background of any View:
      SVGHelper.useContext(context).open(...).bitmapAsBackground(view);
    • Picture:
      SVGHelper.noContext().open(...).getPicture();
    • PictureDrawable:
      SVGHelper..noContext().open(...).getPictureDrawable();
    • Picture as stretch background of any View:
      SVGHelper.noContext().open(...).pictureAsBackground(view);

A few examples:

  • SVG from resource as button background:

    SVGHelper.useContext(context).open(R.raw.svg).bitmapAsBackground(button);
  • Scaled SVG file as Bitmap:

    SVGHelper.noContext().open(file).setScale(2f).getBitmap();
  • SVG from URL, determine its size and get it as 100x100 Bitmap:

    SVGHelper.noContext().open(url).checkSVGSize().setRequestBounds(100,100).getBitmap();