Forum Discussion
Svg files for SL360 on the roadmap?
Hi, wonder if and when you are planning to let SL360 support svg images?
90 Replies
- DiarmaidCollinsCommunity Member
Thanks for the positive words. That's a very interesting point regarding the artboard dimensions. Normally I create an Illustrator artboard to the exact dimensions of my storyline file and create all my bits and pieces in there. That's probably the 90% that import perfectly. The other 10% are obviously the items I create on the fly. It makes sense now.
I don't see the decimal point thing as being a major issue at all. Just think of the illustrator dimensions as being whole numbers. To be honest, I tend to create the Illustrator Artboard at 200% (so If I do have to create graphics with transparency I create nice big PNG files that scale up beautifully in the Storyline Player). So generally my Illustrator dimensions are big, but it's nice inputting these large dimensions (ignore the decimal points) and seeing the SVG scale-up enormously and look fantastic and crisp at that size.
It is a pain, but like anything else, once you adapt the workaround to your workflow it becomes second nature.
Just in case the whole "creating vectors in Illustrator" is too daunting for anyone I wholeheartedly recommend The Noun Project as an amazing resource for super clean and efficient compound SVG icon files. There is even an 'add in' for Powerpoint that allows one to import into PPT files with a simple click, thus removing ANY fiddling around with vector tools.
Hi everyone!
I'm excited to share that we just released Storyline 360 (Build 3.57.26407.0) today which includes the option to import scalable vector graphics (SVGs) to Storyline 360 so images stay sharp when learners zoom in and out.
Thank you to everyone who continued sharing how important this feature was in Storyline 360. Now all you need to do is update Storyline 360 in your Articulate 360 desktop app!
If you run into any issues, don't hesitate to reach out in this discussion or in a support case.
- DiarmaidCollinsCommunity Member
Yay!
- DiarmaidCollinsCommunity Member
Ok, I freely admit that I am being a bit of a curmudgeon here with the following comment, but, yeaaaaaaaahhhhhh, while it is absolutely most definitely great to be able to import SVG's directly into Storyline now, why are we unable to edit them, and/or have them treated like Freeform Objects (as what happens in the workflow method specified above)?
A simple black SVG icon cannot be changed to white within Storyline.
I understand that SVGs can consist of many complicated vector shapes (especially if designed poorly) but I cannot even make my SVG imports semi-transparent (ie, for background branding, etc).
One of the beautiful things about SVGs online is that they can be animated in so many ways. HTML5 makes it possible to do so much with them. It's a shame that the animation properties of Storyline cannot be extended to accommodate HTML5 features and allow SVGs to harness that.
So, YAY for importing SVG!!!
But, um... a minuscule (BOO) for limiting what can be done to them once inserted.
- LukeGeach-cb68bCommunity Member
Yay for SVG import, BOO that it does not support the ALPHA channel so doesn't allow for transparency. Almost there!
- PhilMayorSuper Hero
I have imported SVGs with an alpha channel works just fine
- LukeGeach-cb68bCommunity Member
It works for me in the editor but when published they loose their transparency?
- LukeGeach-cb68bCommunity Member
I should mention this is when i set a background element of the SVG to say 80% transparent, it then becomes 0% transparent on publish.
- LukeGeach-cb68bCommunity Member
- PhilMayorSuper Hero
ah! I am at 100% so that works, best to report as a bug
- DiarmaidCollinsCommunity Member
Hi Luke. I have been using SVGs extensively in my recent modules and I have yet to run into the issue you are having. Here is an example where the shadow cast by the character contains a 30% Black and as you can see it retains the Alpha Transparency when overlayed on different coloured backgrounds (top is in editor/Storyline, the bottom is published output).
Not sure why you are encountering this issue. I have noticed that I need to edit a lot of SVG files in Illustrator myself to get rid of lots of extraneous paths, etc (Astute Graphic's Vector First Aid is invaluable for this) so my SVGs tend to be bare-bones minimum, with no masking paths, etc.
I could take a look at your SVG file for you and see if I can see what the issue may be if you'd like?
I know there is nothing worse than having an issue and someone chiming in with an utterly irrelevant "works fine for me!" post.
- PhilMayorSuper Hero
@Darren sorry my response was not trying to be fascitious, I have had no issues with transparency in SVGs. I did suggest raising a support case as the more use cases articulate get will help them to tailor the use of SVGs to their target market. I realised that I have been using drop shadows with transparency as well so agree with you it may be the way the SVG is created/generated. I would still raise a support case for this.
- DarrenNashCommunity Member
No worries, my comment was not aimed at you but the original poster. Even to get an SVG into PowerPoint it needs to be published from Illustrator in a particular way and I know this because I spent many hours publishing many different variants of SVGs to finally figure out the best settings for different applications.
Related Content
- 6 months ago
- 11 months ago