Import & Style SVG files

[fadi]

Hi all,
Is it possible to import svg file into saola, then change the path fill color when mouse hover over this path?

How to do this?

Thanks,

[PhuongThuy_Le]

Hi Fadi,

Of course. You can achieve that with some simple steps in Saola Animate.
First, to import an SVG file into the app, you can drag and drop it into the Canvas/ add it to the Resources pane or select the Image icon in the toolbar.
For more details, kindly refer to this article: Add Image Elements in Saola Animate 3 - Atomi Systems, Inc.

As you may know, an SVG image may include one or many paths. Saola Animate considers that image a unified whole, so you cannot hover to change the fill color.
If you want to do that, you may need to do either of the steps below before working with Saola Animate:

• Open the SVG with a text editor like Notepad.
• Open the SVG as a vector graphics editor like Inkscape.

Then, copy-paste the SVG paths into Saola Animate. The paths now are displayed as freeform.
Next, to change the fill color for a path when hovering the mouse over it, here’s how:

• Select the path > Properties pane > Styles tab > Fill section > add a color keyframe by clicking the diamond icon > select a color you want (eg. Black).
  

  

• Create a new timeline (See details at: Create new timeline in Saola Animate) > select path and repeat the actions as the above step to add a new keyframe and color (eg. Red)
  

  

• Add events-actions to change the fill color when hovering the mouse over it: click on the Event Handle icon (1) and select suitable event-actions in the pop-up dialog.
  

  

Hope that it helps.
Thuy

[fadi]

Thank you very much @PhuongThuy_Le for the detailed explanation. I will give this a try…

[fadi]

I wanted to include a note on why I deleted the post but I deleted it before typing the text. I figured it out.