Forum Discussion
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). Any insight would be MOST helpful on this matter. I've included pictures for reference.
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,
this is unfortunately the normal behavior with buttons - you can see this if you use PNGs with transparency. All phases are simply stacked on top of each other -> normal + hover + downhttps://360.articulate.com/review/content/54c039cc-4c1a-48ae-832d-775541c7e5d7/review
normal
hover
down
Jürgen
True.. but doing the same thing without using a button...just creating an image with states... and it will behave as should.
https://360.articulate.com/review/content/104cacc8-fa22-4b73-95fb-2c7a3f141d65/review
In my opinion this is how buttons should act.
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.
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,
PerryHi 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.
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?
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 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:
I will explore this further and report back if I find anything helpful to the community.
Alex
2 years later and SVG files are still not working. I have one picture from adobe illustrator that we exported as a SVG file and the preview shows as a completely white screen. Even the other elements that are not SVG do not appear (including sounds...?). The only fix that works for now is to convert the image to PNG but that's pretty bad because the quality takes a hit. As anyone ever find a work around? My entire training is based on the visual assets we are creating...
Even the other elements that are not SVG do not appear (including sounds...?).
audio in svg?
can the browser (Chrome, Firefox) display your svg?
Update: there is a specificationin SVG 1.2 for audio - as far as i know, storyline only supports 'image'-svg
Suspect the element is corrupted or is corrupting the slide when published.
The typical result is nothing shows on the slide on preview and publish.
Sent from my iPhoneThe only fixed we found, but isnt optimal, was to delete the clipping mask from adobe illustrator... The file isnt corrupted, we re-exported it many many time. And yes, sounds exist in storyline haha. The SVG files affect everything, not just the image itself..
When storyline doesn’t like something it does that and nothing works. I have used clipping masks and had no issues. Have you raised a support case? At least if Articulate can see it they can fix it.
Sent from my iPhone
