TinyLine SVG Player 2.0 User Guide (Web)

The TinyLine SVG Player is an example from the TinyLine SVG Programming Guide. It supports user interaction, SMIL animations and hyper linking.

Getting Started

On disk

1. Download the tinylinetry2.0 from the TinyLine SVG page (http://www.tinyline.com/svgt/index.html).
2. Unzip the tinylinetry2.0.zip file into some temporary directory, for example tinylinetry2.0. In the tinylinetry2.0/tinylinetry_pp sub directory there are HTML files.
3. Open any sample HTML in your browser and you get TinyLine SVG Player running from your disk!

On server

1. In order to put the applet on your website (www.yourserver.org), you need to copy tinylinetry_pp directory onto your website and make it accessible from the Internet. (To save the place on your server, you could remove src,lib from your server directory).
2. Open http://www.yourserver.org/tinylinetry_pp/bass2.html in your Web browser.

How to make your HTML file

All you need to change is the applet svgfile parameter in an HTML file.

<!-- Start of the TinyLine Applet declaration -->
      <!-- Here is the TinyLine Applet goes:
         code             - the main class to run
         archive          - the archive that holds the applet.
         width and height - the area occupied by the applet
         svgfile          - the name of the applet parameter
         svg/bass2.svgz   - the value of the applet parameter that says what an SVG file to load
      -->
      <applet code="com.tinyline.app.TinyLineApplet" archive="tinylinetry_pp.zip" width="176" height="208">
         <param name="svgfile" value="svg/bass2.svgz"/>
      </applet>
<!-- End of the TinyLine Applet declaration -->

Navigation

Right-click in the SVG image area to open the pop-up menu. This will reveal the commands and options for interacting with the SVG image.

Options

1. In the Link mode you can select any link by tapping your mouse on it.
2. In the Pan mode you can scroll the viewing SVG image by dragging the mouse in the direction in which you wish to scroll. (Some SVG files authors do not allow users to scroll files)
3. In the Zoom In mode you can zoom in the viewing image by tapping your mouse on it. (Some SVG files authors do not allow users to zoom files)
4. In the Zoom Out mode you can zoom out the viewing image by tapping your mouse on it. (Some SVG files authors do not allow users to zoom files)

Commands

1. Animations: Use the Pause command to pause or un-pause an animated SVG image.
2. The Refresh command returns the viewing image to its original view.
3. The Help command shows this help page.

More