SVG File Issues

I'm having trouble incorporating .svg files to my storyline file.  When I add the .svg files (Picture 1), the color and fill is perfect on the screen.  When I preview/publish the file, the fill seems to disappear in portions of my .svg file (Picture 2)Picture 2.  Any insight would be MOST helpful on this matter.  I've included pictures for reference.

 

 

57 Replies
Mark Kirby

I have the same issue where SVG that appears when published is NOT the SVG when previewed. It's like SL has some persistent and corrupted memory of the images. I've tried all the usual stuff of deleting, renaming, standing on one leg, then the other leg etc. I'm going to try Earl's Word trick as one last go. Otherwise I'm back to using a fuzzy png (it's a text/image slide).

Rob Shaw
Mark Kirby

I have the same issue where SVG that appears when published is NOT the SVG when previewed. It's like SL has some persistent and corrupted memory of the images. I've tried all the usual stuff of deleting, renaming, standing on one leg, then the other leg etc. I'm going to try Earl's Word trick as one last go. Otherwise I'm back to using a fuzzy png (it's a text/image slide).

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.

Andrea Koehntop

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. 

Andrea Koehntop

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

AWS SCE

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.

Math Notermans

@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.

Jürgen Schoenemeyer

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

 

Math Notermans

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

Math Notermans

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 ;-)

Jürgen Schoenemeyer

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

Math Notermans

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.