Update for Saola Animate version 2.6
- Import SVG file into Resources pane, select HTML Widget type Resource to embed the SVG resource. Don’t need to copy the SVG content as mentioned in step 3 below.
SVG for SA 2_6.saolapack (2.6 KB)
SVG files, which are inserted into Saola Animate from the Image tool, are embedded as background images so you can’t access their internal elements. We’ll consider support it in future releases.
However, you can use HTML Widget tool to embed an external SVG file and access its SVG elements as below:
- Click HTML Widget tool on the toolbar to insert an HTML Widget element, leave the URL field blank.
- Set name for the element, e.g.
- Set the HTML source of the element to the source of the SVG file:
3.1. Use a text editor to open the SVG file.
3.2. Copy content of the SVG file from the text editor.
3.3. In Saola Animate, select the HTML Widget element, click Edit HTML button in Embedded section of the Properties pane to edit its source.
3.4. Paste the content of the SVG file into the Edit HTML window, then click OK to close.
- Use the following script to access an internal SVG element:
// replace SVGShapes by the actual HTML Widget element name
var svgDoc = doc.getElement('SVGShapes').embeddedDom.contentDocument;
// replace svg-element-id by the actual id
var svgElement = svgDoc.getElementById('svg-element-id');
- Now you can use your own script or a third-party library to manipulate the internal SVG element.
For your convenience, please see the attached sample which use GSAP to animate the SVG element: SVG.saolapack (2.1 KB)