SVG File Issues

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