Change an Illustrator SVG inside Storyline with GSAP

Dec 03, 2022

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.

12 Replies
Jürgen Schoenemeyer

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

Math Notermans

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

Math Notermans

Only thing i am missing...is no need for injecting custom wrapper into the Illustrator svg or possibly a Illustrator script that automatically exports the SVG with the added wrapper. As that makes it way easier for non-scripters to use.

Apparently a script isnot that hard... this is a basic SVG export script from Illustrator.
Just have to figure out how and where to add the custom wrapper...

function exportFileAsSvg(path) {
    const options = new ExportOptionsWebOptimizedSVG();
    options.compressed = false;
    options.coordinatePrecision = 3;
    options.cssProperties = SVGCSSPropertyLocation.PRESENTATIONATTRIBUTES;
    options.fontSubsetting = SVGFontSubsetting.None;
    options.fontType = SVGFontType.SVGFONT;
    options.svgResponsive = false;

    app.activeDocument.exportFile(new File(path), ExportType.WOSVG, options);
}

exportFileAsSvg("X:\\foo.svg")
Math Notermans

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.