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

1 Like

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

Hello Atomi and users,

Brand new to the forum and to Saola Animate. I also came to investigate Saola Animate because I wanted to access individual elements in an SVG file. I tried following the steps written here, but I am finding it hard to get anywhere. Since this message dates back to 2018, access to SVG elements may have changed. Ton Le’s message suggests that support for interaction with an SVG inserted from the image tool would be considered. Has that been dropped?

In the meantime, if this 2018 message is still valid, here are the things I don’t understand (apologies for the newbie questions).

  1. I managed to embed my SVG using the HTML Widget. The resulting display has scroll bars, but I suppose that s because the SVG is too big for my chosen resolution is that there is a way to adapt the size of the SVG to the canvas automatically…I’ll look for that. When played, the SVG which has a lot of elements and interactivity (hyperlinks) works beautifully, but I cannot access any of the SVG elements in Scene View. Do I have to use a script to be able to do that still?

  2. And sorry for such a naive question, but where do I enter the script? I thought it was in custom elements but that is obviously wrong.

Thank you for your comments and suggestions.

Best

Christophe

Hi Chris,

Please find my answers below for the latest Saola Animate version (3.1):

  • You should drag/insert your SVG file as an Inline SVG image.
  • You still need to use a script to access elements in an Inline SVG image.
    The SVG is embedded directly (not through an iframe like the HTML Widget), so accessing an element in the SVG is simpler., e.g.
    // get an element id svg-rect in the inline SVG image
    var svgRect = document.getElementById('svg-rect');
    // do something with it, e.g. fill it with a random color
    svgRect.style.fill = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    
  • The script can be added using a Run JavaScript action in a specific event. If you want to run the script automatically, use the Scene Active event or a timeline trigger. If you want to run it manually, use user-initiated events such as Mouse Click…

Regards