SVG File Issues

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

Yeah...whether its a feature request or a bug report im in doubt about, but for sure would be good of Articulate to treat buttons similar.

Hi Renz,

Can someone from Articulate take a look at the latest conversation in this post between Jurgen and me about SVG and buttons. It appears that buttons and images use states differently. Where in plain images states are used properly and the normal state is hidden/removed so its not visible in a hover in buttons this is not the case.

Would be best if this would be changed like it is in image states...as you create a hover you want the normal state hidden.

Further more when using SVGs this way it doesnot work like this. Both in images and buttons the normal state always shows. Ideally you donot want that. You want only the actual state shown.
Jurgen Schoenmeyer gives a really nice comment on why they work differently. Whether this is a bug report or a feature request im not sure. Leaving that up to you to decide ;-)

Thanks in advance.

Hi Math

I came across this issue myself recently and spoke to one of the articulate engineers. They are acknowledging it as a problem, but I don’t know of a fix in the works.

At the moment, for me, SVGs seem to be too unpredictably supported for me to use them. I swapped them out for PNGs in my current project because they were so broken.

Nic

Thx Nicola, and allthough SVGs are part of the issue... another issue really popped out in the discussion between me and Jurgen. The different approach of buttons and images with states.

Do check especially my 'no button with transparancy png.story'
Attached here too. In that one you can see ( and readup the cause of it in Jurgen's explanation ) that buttons are treated differently then images with states. In fact both are the same...they both can have triggers and thus act as buttons. 

Issue is that buttons will always show the 'normal' state. Also when in hoverstate or whatever. Thus limiting the use of transparant pngs, because then you always need to use opaque images. When you recreate a button by just using images.. as you can see in Review here...and the .story... it works the way buttons are meant to work with pngs. Transparant in any state.

https://360.articulate.com/review/content/104cacc8-fa22-4b73-95fb-2c7a3f141d65/review

I set up my SVG buttons as images instead of buttons and the normal state is still showing through when I toggle the states. I am using SVG icons that have transparency. I downloaded the PNG example above and that works fine but can't get it to work with my SVG's. Thanks!

Hi Perry!

Thanks so much for reaching out about your SVG images. I understand how frustrating that can be to not get the transparency to work on your end.

Would it be possible for you to share your files with us in this thread? We can get a better understanding of your setup that way. You can also share it privately with a support case.

Looking forward to hearing from you!

Hi, I have attached a test file comparing svg icons to png icons. The png icon works fine toggling between two states but the svg doesn't hide the initial state when toggling. I noticed that when editing button states, there is an option to "insert pictures as states", but this option is only available for pngs, not svg's. I also tried adding an extra starting state to the svg button (so it didn't start on the normal state) but that still didn't work.

Thanks,
Perry

Hi Perry,

Thanks for sharing a copy of your project file. I can confirm that I was able to observe a similar behavior on my end. 

As per checking, we are currently tracking a known issue that causes the normal states of SVG files to still be visible when the image file changes states. I've added this ELH post to the bug report so we can notify you as soon as a fix becomes available. 

Hi everyone,

I have some great news to share! We just released another update for Storyline 360. In Build 3.76.30446.0, we've included important fixes and new features.

One of the bugs we've fixed is: 

• Storyline 360 could crash when inserting SVG images

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you need additional help!

Hey everyone. I just ran into a similar issue with SVGs as well (which led me to this discussion). I had an SVG image with multiple states that were activate by changes in a variable. The SVGs had transparency. What happened was the original state was showing through in other states. I found a workaround that is seeming to work. I added an empty/completely transparent SVG as the Normal state. Then I added the other SVGs in their states as I had them. I then assigned one of the states as the initial state. Now when I preview it, I do not see the the SVG (what seemed to be the original Normal state) showing  through. Hope this workaround helps others experiencing the same bug.

Interesting solution....but watch out as I've found having empty states as the normal state can result in problems, i.e. you can't select it on the stage anymore. I just gave up with using SVGs for the moment until the support is more stable.

Hi, sorry to gatecrash this thread but I'm having a persistent problem when importing SVG files into SL360. The SVGs regularly tend to be (what I describe as) 'clipped'. See example below (the red arrows denote the clipped areas). My process is to export the SVG out of Adobe Illustrator and into SL360. This clipping happens often when exporting from AI to SL360. It's almost like the bounding box crops the SVG. I have received some helpful workarounds from fellow community members but I would love to know why this happens and if there is something I can do to stop it happening at source.

Many thanks in advance!

Indeed this is an issue i do encounter too. Why it happens eludes me too...and would be good to know ( or even better fix by Articulate ). Workaround i use is making the artboard/bounding box size a tiny bit bigger...and then it doesnot happen.

Hello Alex!

You're very much welcome to post here, and is not gatecrashing at all! I'm sorry for the trouble with the SVG images, and I wanted to help find a fix.

I tried inserting sample SVG images into Storyline 360, and they're not clipped when previewed and published. Here's the Review 360 link to my published output and a screenshot of my preview.

I'd like to understand your experience better. When you said, "export the SVG out of Adobe Illustrator and into SL360," did you mean using any of the three steps here to add SVGs? I attached the SVG files I used in my tests. Would you mind inserting them into a Storyline project and let me know if you get the same results?

If the issue persists and you're comfortable sharing your SVG files with us, we'd be happy to take a look to investigate further. You can upload it here or privately in a support case. We'll delete it when we're done testing!

Thanks for your input, Math! Do you mind sharing the affected SVG files as well? Also, does the issue only happen when SVG files are created using Adobe Illustrator? What happens when you use the SVG files I shared with Alex above?

Thanks Math, 

Yes that is my workaroud too. A little cumbersome and time consuming when you're working with a lot of SVG icons (as I am in my current project) but it does solve the issue.

Thanks for your support Eric, I appreciate it. 

Looking closely at the very top of the headphones in your Review 360 link, I wonder if there is slight clipping going on? It seems slightly flattened? Or that could just be the design of the headphones? When I insert your SVG files into a SL file, they look as yours do - with that slight hint of cropping at the top of the headphones.

Anyway, my process is this:

1. Design artwork in Adobe AI

2. Use the 'Export' function in AI to export the artwork as an SVG file into the 'My Pictures' folder on my PC.

3. Return to the SL360 file I am working on and select 'Insert' on the ribbon and find the SVG file and insert it. 

I do wonder if the clipping of SVGs is occurring on export from Adobe AI. There is certainly some chat about it in the forums such as here:

https://community.adobe.com/t5/illustrator-discussions/exporting-vector-artwork-to-svg-crops-it-and-clips-it-s-edges/m-p/13223209

I will explore this further and report back if I find anything helpful to the community.

Alex