SVG File Issues

I have not been able to import SVGs successfully even with the newest SL360 update. I imported one and now all my text is invisible in global preview mode, but not on individual slide previews.

Hi AWS PPO!

I apologize for the issues you are experiencing importing SVGs in Storyline.

There have been a lot of valuable workarounds that have helped many people in this thread, specifically Earl's ideas here. 

Also, if you haven't done so already, you can check the SVG export settings (from the image editor you used). Since SVG is created in a way that other published files can control, you might want to adjust your export settings to see if better results appear. 

If you need additional assistance, please don't hesitate to reach out to us in a support case! 

What's happening now is I am making my animated SVGs, when I import that SVG into my SL Project all other text in the project goes invisible. When I remove the SVG from my Storyline Project all the text returns.

It's almost like the SVG text is controlling all my other text styles/settings. Very odd.

Hi again AWS PPO!

If you are comfortable, it would be helpful if you could share the SVG with us publicly here or privately in a case so we can troubleshoot further. We will delete it from our systems when troubleshooting is complete. 

Sure, here is a copy of the SVG causing issues.

Hi,
open the svg in an text editor and remove the lines

<style type="text/css">
  text {
    text-anchor: middle; font-size: 80px; opacity: 0;
  }
</style>

"opacity: 0" set all svg-text (in storyline) to invisible

Jürgen

Thank you!!!

Hi,
here are the corrected SVGs, Storyline doesn't seem to support putting the animation instructions in a separate style tag. The animation description can stay there.

not stoyline compatible:

<style>
   #eteEOPbDcB539 {
      animation: eteEOPbDcB539_tr__tr 1500ms linear infinite normal forwards
      }
      @keyframes eteEOPbDcB539_tr__tr {
         ...
      }
   }
</style>

<g id="eteEOPbDcB539_tr" ... >

storyline compatible

<style>
  @keyframes eteEOPbDcB539_tr__tr {
    ...
  }
}
</style>

<g style="animation: eteEOPbDcB539_tr__tr 1500ms linear infinite normal forwards" ... >

https://360.articulate.com/review/content/2a574975-8760-42f3-81ba-117825a979aa/review

Jürgen

Hi,
here are my steps to make SVGs compatible with Storyline (e.g. bird02-01_xxx.svg)

Step 1: beautify the svg source
-> with your editor - I use Visual Studio Code with extension 'Prettier - Code formatter'
or
-> https://jsonformatter.org/xml-formatter

Step 2: beautify <style>
- copy <style>-tag in a new css-file
- remove '![CDATA[' (-> start of style-tag)
- remove ']]>' (-> end of style-tag)
- beautify the css-file with your editor
or
- https://www.cleancss.com/css-beautify/

Step 3: replace in the svg the original <style> with the beautified result

Step 4: Test the result in the browser - if it's ok make a backup

Step 5: duplicate the svg (-> reference) - open two editor windows for very easy copying/paste

Step 6: insert in every node with animation style="" (if it is not yet present)

Step 7: copy the appropriate animation instruction from global '<style>' to 'style=""
 - e.g. style="animation: eBs67EIoKQu10__m 2000ms linear infinite normal forwards")
style="animation: eBs67EIoKQu10__m 2000ms linear infinite normal forwards; mix-blend-mode:multiply")
 - tip: now I temporarily change the ID (e.g. add '#') because of tests of the new integrated  animations

Step 8: Test the result in the browser - if it's ok make a backup

Step 9: clean <style>
- remove all 'animation:..' from the global <style>

e.g.

...
#eBs67EIoKQu3 {
   animation: eBs67EIoKQu3__m 2000ms linear infinite normal forwards;
}
...

- recover  (if you use it for other style modifications) or remove the changed IDs

Step 10: Test the result in the browser - if it's ok make a backup

and now your new animation start/stop

Step 11: append <g id="bird"> - tag arround the outher tags

<g id="bird">
    <g transform="translate(-23.907703-30.268468)">
         <path style="animation: ... />

    ...
</g>

Step 12: change <style> to

<style>
   #bird path {
      animation-play-state: paused !important;
   }
   #bird:hover path {
      animation-play-state: running !important;
   }
 
   @keyframes eBs67EIoKQu3__m {
   ...
</style>
   

Step 13: Test the result in the browser - if it's ok make a backup again

Step 14: update the svg in storyline and publish to web or review 360

RESULT:
➞ https://360.articulate.com/review/content/72dcd3aa-d9f0-498f-83df-9cf1ce731a3a/review

- Firefox 101, 102: animation stops, in hover animation plays
- Firefox ESR (92): animations stops, but no hover
- Chrome/MS Edge/Chromium + Storyline Preview: animations stops, but no hover

CAUSE:
 - Storyline used cloning (<use>) to integrate svg

<svg class="svgImage" ... ">
   <use href="#eBs67EIoKQu1-6gD0MCoyp2a" ... "></use>
</svg>

 - and hover with cloning is a SVG 2.0 feature (SVG 1.1 don't support it)

➞ https://www.w3.org/TR/SVG11/struct.html#UseElement

CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

so we have to wait until Chrome supports this new SVG 2.0 feature

Jürgen

You guys are great!

Now I have to find time in my workweek to experiment with this. It's going to have to wait a little since I'm already trying to find the time to continue experimenting with Character Animator and creating my own puppet(s) there.