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.
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,
This is a great workaround. I was able to have my SVG file converted to 2.35 MB from 17.3 MB using Word. Didn't get any grainy parts of the picture when I put it in Storyline and it solved the constant file crash I experienced. Thank you!
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.
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.
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.
Hi Guys, just thought i would provide an update here about my support item raised.
I also have the same problem, all the SVG assets must publish out to the same bin or something and they overwrite each other. So sloppy.
BTW. Your exercise of topography maps looks great. It brought back memories of 8th grade Earth Science which I loved.
Hi Mark!
I Just wanted to check in and see if Earl's method worked to solve your issue? If not, please open a support case with us so we can troubleshoot further.
Hi Larry!
I apologize for the issues you are experiencing, and thanks for sharing a screenshot.
If you haven't done so already, you can check 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.
Have you tried any of Earl's tips and tricks? It looks like it has worked well for some community members.
If none of that helps, please open a support case with us so we can investigate further.
