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.
Luckily the change to target the inner SVGs from an imported Illustrator SVG are easy.
https://360.articulate.com/review/content/8d933ab6-3f92-4111-ab30-87d01d879956/review
As it selected only the upper 'bodyColor' element, to target all the paths inside it... is just a case of checking the HTML setup and adding needed code.
With these lines of code you now can select any part of a SVG and change the color of it. And in fact any attribute of the SVG, but showing that later. Keep in mind however that grouping and naming your elements in Illustrator is imminent, else its tough to select.selectAllSVGelements("bodyColor");function selectAllSVGelements(partialID){var svgCollection = document.querySelectorAll("[id*='"+partialID+"'] > path:nth-child(n)");for(var i = 0; i < svgCollection.length;i++){gsap.to(svgCollection[i], {duration:2, strokeWidth:8, stroke: "#984807" ,fill:"#77F27B"});}}
Added the Story.Hi Math,
How are you?
I really like your post here and your solution!
I have a question though...
I take it that it is possible to write some javascript that when you click a button, it changes the colour of a textbox?
Thanks
Keith
Yes... either a shape or the backgroundColor of a textfield. Both possible.
One of Articulate/Storyline's most dreaded things is in my opinion the hidden changes they do, without notice. For example... here is a link https://community.articulate.com/discussions/building-better-courses/storyline-svg-icons
to a previously properly working solution to exactly what you asking about...but when i publish the original it doesnot work anymore. Due to internal changes Articulate did.
This specific case im fixing it now. But i do dislike Articulates way of working in this.
https://360.articulate.com/review/content/1fee0a55-6de7-4346-92eb-071a64486e06/review
Here i uploaded the fixed version. Articulate added a > div to elements. So the original file failed.
Adding the updated file here and to the original post too.
Do you ever have problems getting SVGs with gradient fills into Storyline?
I've read your posts along with several other more recent SVG/Storyline articles and have been successfully following your steps for getting SVGs from Illustrator into Storyline - but if there is a gradient fill, Storyline seems to always convert it to an image - and I can't figure out how to get an SVG with gradient fill into Storyline.
