SVG Animations

Initialize

Animations are usually started before DOMContentLoaded has been fired and parseDocument() may be unable to read the initial attribute values. Inline hints can be used to recreate the non-CSS initial values when they are altered by the native SVG.

JSON

<svg viewBox="0 0 200 200">
  <rect id="animate" x="10" y="10" width="30" height="20" fill="purple" data-base-value='{ "x": 10, "y": 10, "width": 30, "height": 20, "fill": "purple" }'>
    <animate attributeName="y" values="150; 75; 0; 50; 100;" keyTimes="0; 0.2; 0.5; 0.7; 1" begin="0s" dur="9s" repeatCount="indefinite" />
  </rect>
</svg>

Delimited

<svg width="120" height="120" viewBox="0 0 240 240" data-base-value="width: 120; height: 120; opacity: 1;">
  <rect x="10" y="0" width="100" height="50" stroke="black" stroke-width="2" fill="purple" data-base-value="x: 10; y: 0; width: 100; fill: purple; opacity: 1; stroke-opacity: 1; fill-opacity: 1;">
    <animate attributeName="x" values="0; 100;" keyTimes="0; 1" begin="0s" dur="10s" repeatCount="indefinite" />
    <animate attributeName="y" values="0; 100" keyTimes="0; 1" begin="0s; 5s; 10s" dur="10s" repeatCount="1" />
  </rect>
</svg>

Play

Only the XML based layout and resource files can be viewed on the Android device/emulator without any Java/Kotlin backend code. To play animations in the emulator you also have to start the animation in MainActivity.java.

import android.graphics.drawable.Animatable;

android.widget.ImageView svg = findViewById(R.id.imageview_1);
if (svg != null) {
    Animatable animatable = (Animatable)svg.getDrawable();
    animatable.start();
}