SVG File Issues

Do you have any best suggestions for export settings to make it Storyline friendly? 

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!

Hi Maura!

One thing we discovered while tinkering with the svgs is that we had to export twice.  For some reason, the first time we exported from Illustrator, it pulled in the images fine but distorted on preview/publish like my screenshots above.  My co-worker, on a whim, exported the image again (she opened the previously exported svg and chose to export again) and for some reason, it fixed the image and brought in everything.  

I don't know if it will work in your situation, but it's worth a shot.  I also came across numerous help requests that mentioned things becoming grey-scaled when using svgs.  Because it was not my issue, I didn't pay them much attention, but definitely worth a google to see if their fixes help yours! 

Are you creating your images using Illustrator? If so, are using Asset Export or Save as SVG?

I've searched throughout the forum using Google and haven't been able to find the posts related to gray SVGs. Any tips?

Sorry for the delay; yes we use illustrator, but I don't have a license so I have to ask my co-worker.  She used both asset export and save as and got the same result.  I did not create my own image in this instance though.  I used an .eps file from getty images and converted it to svg.  

I don't remember any exact searches that I did, but I recall many instances on adobe's support site for things such as "fills in black" or "image turns grey/white" etc. Sorry I can't be of more assistance with that.

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

I've had success with SVGs using the Asset Exporter from Illustrator. You need to make sure that what you're exporting is all on one layer by itself. It will inherit your layer name.

There is a problem with this workflow whenever I create a computer screen in Illustrator (transparent background no stroke) and choose a monospaced font. When I use "Ubuntu Mono" in Illustrator it exports properly--confirmed by opening the file in a browser and still has no stroke [see browserPNG].

When it is imported into SL the font is changed to a serif font for display in the UI, i.e., not previewing [see storylineStagePNG]. I lose my carefully recreated computer screen (not a monospace font anymore and a stroke is added around the entire image). This makes it extremely difficult to place hotspot objects with triggers and outline areas for emphasis with animations. I'm having to revert back to PNGs to keep my formatting.

This image when previewed in SL returns to my monospaced font but still incorrectly has the stroke added around the image [see storylinePreviewPNG].

Hi Maura

I'm having issues with SVGs causing a crash or no action on preview myself. However, I did fix the issue with the fonts changing in SL - when you export from Illustrator, adjust the settings for the SVG to 'convert to outlines' instead of the default 'SVG':

Hope this helps,

Nic

New approach ---- This seems to be working if creating SVGs from powerpoint and they are getting messed up in Storyline -- (Dont laugh).

What is working today:

Save your graphic as SVG from PowerPoint (select-right click-save as image-save as SVG).

Import the saved SVG in to -- wait for it... MS WORD.   :)

From Word -- Save the SVG as an SVG (select-right click-save as image-save as SVG) overwright or rename. 

Import or replace the saved from Word SVG in Storyline. 

(Maybe try bringing any SVG in to Word and save as from Word. (who knows?)

Best,

Select your elements in Illustrator... CTRL+C, copy... go to Storyline and CTRL+V, paste... and you have your elements as shapes in Storyline.

I keep having issues, even after all of the suggestions. the odd thing is this issue is not quality or anything, it is just not showing the right SVG at all. 

When i preview the slide on its own its fine, however when I preview the whole project that's when the issues I mentioned happens.

Hi Michael! Sorry to hear you're still having issues with SVG files after trying some of the suggestions provided by the community.

Are you currently using the latest version of Storyline 360? Here's how to check:

- Open an existing Storyline project or create a new one.

- Go to the Help tab on the Storyline ribbon and click About Articulate Storyline. Find your version details on the screen that appears.

Please check if you're using the latest version, Build 3.63.27674.0. If you still have issues, please submit a copy of your file and a sample image, along with some short details of what you've already tried by submitting a case to our Support Engineers directly. 

Yes,  that was obviously one of the first things I checked. I still have the issue. I have raised an issue with support and sent over a file. 

Great! We'll continue assisting you in the support case! 

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 tried all the methods mentioned in this thread with no success, I raised a support ticket and they are investigating it now for me.