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 seem...
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?
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.
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
