SVG File Issues

Hi, Kevin. 

Thank you for opening a support case with our team! I see you're working with Jose, who requested a copy of the file.

I'd also recommend checking 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. 

Hey Kevin! It looks like Jose was able to get to the bottom of this with you - feel free to follow up in your case if you have any other questions.

In the meantime, feel free to share what image editor you use so other folx in the community can make suggestions on export settings!

Sadly it wasn't really resolved.  He informed me that I will need to convert my svg files to png and provided a link to some converter.  The images are now somewhat grainy but it will have to suffice. 

I'm also having problems with SVGs. There seems to be a difference in the results you get when you Save as SVG versus use the Asset Exporter to create SVGs (seems to cause problems). I haven't figured this out yet. I hope some other users can offer tips.

Shows properly in Storyline GUI and in Preview:

• outgoingEmailBkgdOnly.svg, when viewed alone, Save as SVG from Illustrator
• bkgd.svg, when viewed alone, Asset Export from Illustrator
• envTrail.svg, Asset Export from Illustrator, together with Rectangle 1 (motion path with fade in is okay too)
• envOnly.svg, Asset Export from Illustrator, together with Rectangle 1
• saveAsEnvOnly.svg, Save as SVG from Illustrator

1. svgTest1.mp4: When envOnly.svg and bkgd.svg are visible
   1. UI view is fine—full color
   2. Timeline play and Peview slide—everything changes to grays
2. svgTest2.mp4: When I use envOnly.svg, envTrail.svg and bkgd.svg
   1. UI view if fine—full color
   2. Timeline play and Peview slide—everything changes to grays and part of the envTrail.svg changes the appearance of the envOnly.svg despite being below it in the stacking order.
3. svgTest3.mp4: When envOnly.svg, envTrail.svg and outgoingEmailBkgdOnly.svg are visible
   
   1. UI view is fine— full color and stacking looks great before playing.
   2. Timeline play and Peview slide— fades on envelope and envTrail are okay and so is the motion path on the envelope, but part of the envTrail.svg changes the appearance of both the envOnly.svg and outgoingEmailBkgdOnly.svg.
4. svgTest4.mp4: When saveAsEnvOnly.svg, envTrail.svg and outgoingEmailBkgdOnly.svg are visible
   
   1. UI view is fine—full color and stacking looks great before playing.
   2. Timeline play and Peview slide—fades on envelope and envTrail are okay and so is the motion path on the envelope, but the laptop monitor has been changed to white!
5. svgWithPngTest5.mp4: When envOnly.png, envTrail.svg and outgoingEmailBkgdOnly.svg are visible
   
   1. UI view is fine—full color and stacking looks great before playing.
   2. Timeline play and Peview slide—everything looks and tests great, but I cannot accurately test this for the types of colorblind. I prefer to use only SVGs!

Zipped file contains short MP4s of the results of the above tests and a PNG of the Settings used to Save As from Illustrator.

Thanks!

I usually start with an EPS from Shutterstock and then change it before exporting it as SVGs. I just double-checked the colors in Illustrator--they were already set to RGB mode.

I've submitted a support case. Hopefully they'll be able to offer some insight.

Upgrading to 3.57.26476.0 has solved many of the issues that I previously posted.

Unfortunately SVGs created with clipping masks in Illustrator are not working properly in Storyline. They do display properly when viewed in a web browser.

Hi, Maura.

Thank you for taking the time to let us know the new Storyline 360 update (Build 3.57.26476.0) solved some of the issues for you! 

I see you're working with Cleo in a case and that you've shared your concerns about clipping masks not working with SVGs in Storyline, so we'll continue to work through the support case.

I have been loving the SVG images in Storyline - now my illustrations, shapes, and images are sharp and are smaller sizes! They look fuzzy in design view but are very sharp in preview and when published.

*ISSUES -- Sometimes images wont show or are broken up. Solutions have been:

Illustrator - EXPORT as SVG - DO NOT SAVE AS.

Photoshop - EXPORT as SVG. You will need to enable the LEGACY  "Export As" in preferences.

PowerPoint (shapes and drawings) - Select object - Right Click-Save as Picture - choose SVG. Or, Copy and Paste directly to Storyline - it will create an SVG (AWESOME).

**Sometimes in Storyline the image may not appear correctly when published. It looks fine when previewing just that slide but, if you preview it with a few slides or publish it you will see the issues. FIX: - In Storyline -- RIGHT CLICK IMAGE and RENAME it. Then preview or publish and it should show correctly.

Awesome. I notice it comes back after closing file and coming back to it.

I copied the storyline file to anther location (desktop) and publish from there. That helps too. I think the problem may be in the Storyline library or the JS info. I also noticed it when I have a different SVG image on multiple slides in a sequence. I wish it was stable.

Hope it works for ya.

Sorry, One more thing that helped... Delete the Project Temp files from the Articulate Storyline TEMP folder. That worked for me. I think the temp file gets jacked. Then reopen storyline file and view or publish.

Windows --- C:\Users\YOURNAME\AppData\Local\Temp\Articulate\Storyline