SVG File Issues

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.

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. 

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.  

So i continued my experiments a bit. And at some point got the idea of combining some good old Storyline magic with animated SVGs.

Why not add an animated SVG as the hover-state. Then it probably works on all devices...as you dont try to use complex code, but plainly add the animated SVG into a state...

https://360.articulate.com/review/content/79a61d40-a796-4bd1-9d8b-bbfbb2a3a2ab/review

Well as you can see here in the Review that works... to some extent.
Just 2 SVGs in the normal and the hover state. But Storyline does something weird with the SVGs in states. When you hover over the left bird...well it looks all fine.. but in fact it isnot.

When you hover over the right bird you immediately notice what is wrong. The normal state is staying visible in the hover state. In the left bird i added a white background under the hover-bird, thus hiding the normal state on hovering.

As is im not yet sure whether this is a Storyline issue or an SVG issue. Gonna find that out now.
Just tested it with normal pngs as states. Clearly is an issue with SVGs in states. 

Hi,
that is interesting - the both types "buttons with state" and "images with states" are implemented completely different.

Buttons with states:
made with stagged layers and css-classes (shown, hidden)

Image with states:
modification with javascript of the html DOM-tree (all layers are stagged)
 -> on mouseover (hover) the content of normal layer is removed from the html-DOM-tree
 -> on mouseout the html-DOM-tree is reconstructed

SVG with states:
similar to "Image hover", but no javascript manipulates the DOM-tree -> 'normal' status is always visible

I have testet a version "image container" with
 - state 'normal' png,
 - state 'hover' svg
but the 'normal' status is always visible

Maybe time for a "feature request" - there is no longer the problem to stay Flash or IE11 compatible.

Jürgen

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!