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

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.

Hi,
this is unfortunately the normal behavior with buttons - you can see this if you use PNGs with transparency. All phases are simply stacked on top of each other -> normal + hover + down

https://360.articulate.com/review/content/54c039cc-4c1a-48ae-832d-775541c7e5d7/review

normal

hover

down

Jürgen

I set up my SVG buttons as images instead of buttons and the normal state is still showing through when I toggle the states. I am using SVG icons that have transparency. I downloaded the PNG example above and that works fine but can't get it to work with my SVG's. Thanks!

Hi Perry!

Thanks so much for reaching out about your SVG images. I understand how frustrating that can be to not get the transparency to work on your end.

Would it be possible for you to share your files with us in this thread? We can get a better understanding of your setup that way. You can also share it privately with a support case.

Looking forward to hearing from you!

Hi everyone,

I have some great news to share! We just released another update for Storyline 360. In Build 3.76.30446.0, we've included important fixes and new features.

One of the bugs we've fixed is: 

• Storyline 360 could crash when inserting SVG images

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you need additional help!

Hey everyone. I just ran into a similar issue with SVGs as well (which led me to this discussion). I had an SVG image with multiple states that were activate by changes in a variable. The SVGs had transparency. What happened was the original state was showing through in other states. I found a workaround that is seeming to work. I added an empty/completely transparent SVG as the Normal state. Then I added the other SVGs in their states as I had them. I then assigned one of the states as the initial state. Now when I preview it, I do not see the the SVG (what seemed to be the original Normal state) showing  through. Hope this workaround helps others experiencing the same bug.

Hi, sorry to gatecrash this thread but I'm having a persistent problem when importing SVG files into SL360. The SVGs regularly tend to be (what I describe as) 'clipped'. See example below (the red arrows denote the clipped areas). My process is to export the SVG out of Adobe Illustrator and into SL360. This clipping happens often when exporting from AI to SL360. It's almost like the bounding box crops the SVG. I have received some helpful workarounds from fellow community members but I would love to know why this happens and if there is something I can do to stop it happening at source.

Many thanks in advance!

2 years later and SVG files are still not working. I have one picture from adobe illustrator that we exported as a SVG file and the preview shows as a completely white screen. Even the other elements that are not SVG do not appear (including sounds...?). The only fix that works for now is to convert the image to PNG but that's pretty bad because the quality takes a hit. As anyone ever find a work around? My entire training is based on the visual assets we are creating...

Even the other elements that are not SVG do not appear (including sounds...?).

audio in svg?

can the browser (Chrome, Firefox) display your svg?

Update: there is a specificationin SVG 1.2 for audio - as far as i know, storyline only supports 'image'-svg