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.

 

 

11 Replies
Maria Costa-Stienstra

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. 

Maura Sullivan

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!

Kevin Kameda

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! 

Kevin Kameda

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.

Maria Costa-Stienstra

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.