Forum Discussion
Change an Illustrator SVG inside Storyline with GSAP
As a follow up on my SVG tricks with GSAP in Storyline i now show you how to edit color and outlines of a SVG from Illustrator directly in Storyline. Even animate it with GSAP. Directly importing it will not work as Storyline converts the SVG to an SVGImage ( as you can see in the video ) and then you cannot edit it anymore. However on Windows you can copy paste the SVG directly from Illsustrator to Storyline and then it gets imported as .emf
Then you can ungroup it and edit/animate the SVG as all path points stay available. In a next step i will show how to animate the path points of a SVG.
I just did a feature request changing the closed mode to open mode. As there is little plus for Articulate in keeping it closed. And as there are workarounds to access the closed shadow-root as found here.
https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1afSo basically Storyline uses
element.attachShadow({ mode: "closed" });somewhere when importing the SVG...if they used
element.attachShadow({ mode: "open" });we could normally edit SVGs ?
if you use firefox as debugger you can see what happens with the image svg -> #shadow-root
and the inner part of the svg is searchable with javascript
it would be easy to search, if storyline would not modify the id (and class name) from the inner of the svg file
so I have search for an alternative way to find the svg part with javascript
after export from Ilustrator I have injected a searchable wrapper<g data-...=">
</g>and with
document.querySelectorAll('[data-...]');you get
search - tested with firefox and chrome
You lost me there Jurgen ? What are you saying ? The imported SVG is directly editable ? Although its a SVGImage ? Its just Chrome that doesnot show it completely but in Firefox you can debug it better and see the path ?
And indeed... in Firefox the path data is available...wow... thanks Jurgen... have to redo my function so i can call inner elements of a imported Illustrator SVG
