Basic PROTOTYPE for Frame-by-Frame vector animation.svg

<svg version="1.1" baseProfile="full" id="svg-root"
  width="100%" height="100%" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>
	SIMPLE FRAME BY FRAME ANIMATION
	Coded by Emasoft for Opentoonz (https://github.com/opentoonz/opentoonz)
	
	Example implementation of basic SVG frame-by-frame animation, for 
	educational purpouses. The frame based animation is easy to export.
	No javascript or CSS, just pure SVG.
	In this way the SVG format is used like an MPEG for vector animations.
	
	This animation has only 3 frames:
	Frame 01 = square
	Frame 02 = circle
	Frame 03 = triangle
	
	This file is divided in two sections:
	
	1) The Definitions (defs) : Here you need to put all frames and clipping paths.
	All frames require an unique id. For example: frame0001, frame0002, etc.
	Objects written here are not displayed until the animation cycle instances them.
	
	2) The Animation Scene (a group called "animation_scene") : Here you need to put
	the elements on the scene. First the background rectangle (with or without a
	clipping path), then the animated group of objects (called "animated_group").
	The animation element needs the following parameters:
	
	values : the id of the frames, with a leading # char and separated by a ; char.
	The frames must be named in the exact order you need them to be displayed.
	Also the first frame id must be indicated in the "use" element as the href
	(example: xlink:href="#frame0001" ).
	
	begin : the start time delay, in seconds (example: 0s).
	
	repeatCount : this should set on "indefinite" if you want a looping animation. 
	Otherwise on "0" if you want the animation to stop at the last frame. Any other
	number would be the number of repetitions of the entire sequence.
	
	dur : the duration in seconds of each frame. For example: "1.0" means 1 frame
	per second. For 60fps is "0.01667". For 24fps you have "0.04167" seconds.
	(just divide 1 for the number of frames, i.e. 1/60=0.0166666.., aprox: "0.01667").
	
	Please refer to Opentoonz repository on GitHub for any error/issue/question.
	Enjoy.
	
	</desc>
	
	
	 <defs>
	 
	 
          <clipPath id="_clipPath_68ZZEmPru4g0BtHxEfj51GnZ9FD3mIu4">
            <rect width="512" height="512"/>
          </clipPath>

	 
	 <g id="frame0001" style="display:inline">
  <rect
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="square"
    width="100"
    height="100"
    x="30"
    y="30">
  </rect>
	</g>
	
	<g id="frame0002" style="display:inline">
  <path
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="circle"
    d="m 125,80 a 45,45 0 1 1 -90,0 45,45 0 1 1 90,0 z">
  </path>
	</g>
	
	<g id="frame0003" style="display:inline">
  <path
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="triangle"
    d="M 105,105 47,89 89,46 105,105 z">
  </path>
	</g>
	
</defs>

<g id="animation_scene">

 <g id="background" clip-path="url(#_clipPath_68ZZEmPru4g0BtHxEfj51GnZ9FD3mIu4)" style="transform: scale(3); transform-origin: center;">
          <rect x="0" y="0" width="512" height="512" transform="matrix(1,0,0,1,0,0)" fill="rgb(90,145,240)"/>
</g>
<g id="animated_group">
  <use width="160" height="160" xlink:href="url(#frame0001)">
    <animate attributeName="xlink:href" 
      values="
			#frame0001;
			#frame0002;
			#frame0003" 
      begin="0s" repeatCount="indefinite" dur="0.5s"/>
  </use>
	</g>
	
</g>

</svg>