ActivePresenter Saola Animate Pricing Download

SVG files: Accessing an element within an SVG file

Hello,

Is there a way to access an internal SVG element (shape) within an SVG file. For example :

  1. An SVG is imported to the scene. There are three shapes with their corresponding paths with unique IDs.
  2. The three path IDs are referenced and then manipulated as individual objects to assign a behaviors (tweens) in Saola Animate.

If not possible with Saola: is there a way (workaround) to implement an SVG Animation Library (GSAP, SVG.JS, SNAP.JS, etc) . if so, can you please provide an example of the workaround or steps to achieve this scenario?

Thanks in advance.

Javier

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.
  • External JavaScript libraries such as GSAP can be imported into Resources pane for using, don’t need to use Run JavaScript action to load them as in the old attached sample.

SVG for SA 2_6.saolapack (2.6 KB)


Hi Javier,

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:

  1. Click HTML Widget tool on the toolbar to insert an HTML Widget element, leave the URL field blank.
  2. Set name for the element, e.g. SVGShapes.
  3. 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.
  4. 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'); 
  1. 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)

Regards.

2 Likes

Hi toanls,

I went through your detailed instructions. I not only tested GSAP, but also another animation library by using the same approach. It works as expected for both cases. Thank you!

And thanks a lot for that project package as well. It’s a great example of how to integrate external libraries into Saola Animate.

Javier

Somehow unable to get it (few steps I tried below). Can you please explain and demo with attached SVG. Simply put it on any Saola Animate canvas with the color F8E8BF so I can change it later.

Mailbox.zip (1.1 KB)

Where is this script to be put:

  1. 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'); 

What I tried …

I think I am doing something wrong. Trying to import SVG file through Resources HTML but won’t show SVGs as HTML is preselected:

image

Trying to open your 2.6 saolapack but unable to import.

image

  1. Open your SVG into a code editor and add ID attributes to any of the elements you want to access.

  2. Copy the code to the clipboard.

  3. In Saola, add a HTML Widget to the scene. With the URL option selected - click ok.

  4. In the embedded panel, click the Edit HTML and paste your SVG code into the editor window and save.

  5. To interact with your SVG elements, you need to add an event handler to something. I’ve used a transparent shape - placed over the envelope selection.

  6. The event handler, triggers a JavaScript function which first gets your embedded document, then gets the element to which you assigned an ID and finally alters that element by changing the fill colour.

svgmail.saolapack (3.0 KB)

Simply click on the shape and the flap of the envelope in the SVG will change from blue to yellow.

Thanks! Making progress now.

2 questions:

  1. When I change the size of mine, it only changes the HTML box but not the size of the SVG (like the mailbox)? Similarly, how can I make the SVG center aligned within the HTML box so as to properly place it on a page? In some resolutions the SVG gets cut off by the size of the HTML box…

  2. How do I change the color from red to something else?

Thanks!

SVGmail.saolapack (6.8 KB)

I don’t use SVG in this way, so you’ll have to see if somebody else can answer part one. But, for the Hello text colour - the word Hello is not SVG - it’s an embedded PNG image inside the SVG - so you cannot manipulate it.

Hi Shawn,

The 2.6 saolapack sample file name has a dot so the issue occurs, you can rename it or download the updated file and try again.

To make the SVG the same size as the HTML widget, please search for width, height attribute in the SVG code and change their values to 100%.

width="477px" height="264px"     =>    width="100%" height="100%"

Regards