When images have been downloaded using the 'Export' option or pasted into
files using the 'Copy' option (see Export
and Copy), they can then be deploying into a web page.
There are 3 different ways an image can be deployed:
As an SVG image using the 'img' tag.
As an Object using the 'object' tag.
The image text and code pasted directly into an SVG tag in the web
page - or 'in-lining'.
N.B. All images files must end in -anim.svg, for
example myimage-anim.svg. If this is not the case the image
will not be located.
Deploy with img Tag Use a web editor or manually edit the html file that will contain the
image. Add an image (img) and point the 'src' attribute to the location of
the image and add a css class called 'inovista-image'. The
class="inovista-image" is important, without this annotation the
animation transitions will not be run.
Deploy with object Tag Use a web editor or manually edit the html file that will contain the
image. Add an object and point the 'data' attribute to the location of the
image. Add a type attribute type='image/svg_xml".
Deploy Inline Use a web editor or manually edit the html file and paste the whole
'Inovista Chart Image' or 'Stand Alone Image' selected from the 'Copy
Source' section into that file at the required location.
Required JavaScript Libraries
Download the required libraries and place them in an accessible
folder/directory. In the examples below, the libraries are all placed in the
'script' folder.
N.B. All animations and function calls need access to the
'inovista.svg.js' file and the D3 library. To add a script link to these
file, add the following to the <head> section: <script src="script/inovista.svg.js"></script> <script src="script/d3.min.js"></script>
If morph options are used, the morph script must be added: <script src="script/d3-path-morphing.js"></script>
For Inovista Custom Images or other customizations: <script src="script/inovista.customD3.js"></script>
