SVG File Issues

I tried all the methods mentioned in this thread with no success, I raised a support ticket and they are investigating it now for me. 

I've got the same issue.

The graphic in Adobe Illustrator or Animate looks perfect, but when imported into Storyline I can see pixelated lines around the shapes and between different coloured sections.

It is as if there is a 1px outline around everything in a off-white colour.

Hi Rob! 

I apologize for the issues you are experiencing importing your graphic into Storyline. 

Please open a support case with us so we can troubleshoot the image and test it in Storyline.  

Hi Guys, just thought i would provide an update here about my support item raised.

I also have the same problem, all the SVG assets must publish out to the same bin or something and they overwrite each other. So sloppy.

BTW. Your exercise of topography maps looks great. It brought back memories of 8th grade Earth Science which I loved.

Hi Mark!

I Just wanted to check in and see if Earl's method worked to solve your issue? If not, please open a support case with us so we can troubleshoot further. 

Hi Larry! 

I apologize for the issues you are experiencing, and thanks for sharing a screenshot. 

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. 

Have you tried any of Earl's tips and tricks? It looks like it has worked well for some community members. 

If none of that helps, please open a support case with us so we can investigate further. 

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!!!

@JurgenSchoenemeyer
Really happily surprised that the SVG animation in this sample works. Using SVGator for SVG animation i cannot get that to work in Storyline.

As it does work normally in the browser, i really need to study the differences between these 2 SVGs...

The bird sample added is easier...and checking that one its probably the way the animation is coded in the SVG. The text animation has the animation clearly separated in tags. The SVGator one has keyframes and is more integrated. Guess Storyline has issues with that.

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

Perfect Jurgen. This opens up so many possibilities with animated SVG. Now figuring out how to trigger it with Javascript in Storyline...to start/stop SVG animations...and do other fabulous stuff.

That looks great! I'm looking forward to see how you trigger it in SL.

Jurgen ? Can you tell me how you that quickly convert/fix the SVGs. When i open them in Sublime its just a lot of text hard to decipher what needs to be changed to get it working properly.

Added a animated SVG in which a mouseover the SVG element starts the animation... following up on that a next step might be triggering it from Storyline...

Hi Jurgen,

So after a bit of experiment figured out that Dreamweaver does work decent showing code and live view..thus being able to test and figure it out somewhat better.

So these lines do the animation..

path style="animation: e9UiYNucQVs3__m 2000ms linear infinite normal forwards"
this being a looping continuous animation of an SVG element...

path style="animation-play-state: paused !important e9UiYNucQVs3__m 2000ms linear infinite normal forwards"
this being a paused one...as in my bird 5...

What i still miss somehow now is how and where to add the hover... so it works in Storyline...

In my bird 5 this line makes the animation start at hover...
#eBs67EIoKQu1:hover *
{animation-play-state: running !important}

Missing where to add that ;-)

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.

Wow thats a nice explanation of your process Jurgen. Great, thanks.

I was doing some tests and research too.
https://360.articulate.com/review/content/166004ab-8b14-4a67-a4f2-bc01a2f287ae/review
Weirdest thing is the coffee-machine on the right...
Click the coffeecup
Then the red light turns green..click that...
Then click your cup of coffee and it gets filled...

Works as is on Chrome but not on Firefox...

Whereas the hover its the other way around ;-)

At least we can use SVG animations in Storyline now... clickable and interactive elements we probably have to wait till all browsers support it.