Hi TP. That's great information there. Very clear (for us designers I guess).
My only contribution is that one CAN import complex SVG shapes into Storyline if the elements have all been 'grouped' together as Compound Paths (OBJECT > COMPOUND PATH > MAKE, or, CMD + 8).
So, if your, say, logo has an icon, some text, and another element, like a line, or whatever, simply treat each part as its own compound group, and then when exported as an SVG and imported, each distinct section should be accessible as its own shape within Storyline.
At the risk of trodding on TP's toes and corrupting his excellent walkthrough, I'd like to illustrate his methodology with some images that do show that the end result is an imported SVG shape and not a rasterized image within Storyline.
This is a logo in Illustrator. Simplified to four shape paths. The text and lines are compound paths and the star and its outline are simple shape paths that don't need to be 'compounded.
This is the exported SVG after being imported into Powerpoint. As you can see it's looking good (awesome design).
This is the voodoo-ish part. After the Powerpoint slide has been imported into your Storyline file you will end up with an invisible mess like this.
But don't worry, the logo is there, as you can see from the Timeline. There are 4 layers corresponding to the 4 paths within the SVG file.
Yeah, this is the weird part I don't get myself. 90% of the time the SVG imports perfectly, but sometimes there is a distortion, as TP mentions. This is easily rectified, as he explains, by referring to the original dimensions of your vector file.
Once we correct the dimensions the logo is in Storyline and looking pretty good. But we want it to look like the original so we just select the shapes, because they are shapes, and fill with whatever colour we want.
And here you can see I have decided to make the middle star white and the 'outline' shape red. It looks awesome and is full of vectory goodness.
The only issue I do run into has only started happening recently and it is this:
"If you see a “Failed to import PowerPoint presentation” error message in Storyline 360, it means one or more of the following issues is occurring..." and Articulate provide suggested solutions here:
But the solution for me has been as follows:
The Presentation Doesn't Start with Slide Number 1 PowerPoint presentations must start numbering slides from 1 to import successfully into Storyline. If your presentation starts with slide 0 or another number, here's how you can fix it.
PowerPoint 2016 and Later: Go to the Design tab on the ribbon, click Slide Size, and choose Custom Slide Size. Enter 1 in the Number slides from field and click OK.
Anyway, I hope this helps. Whilst I understand the frustration that Storyline cannot simply import SVGs, the PowerPoint workaround has been subsumed into my workflow and I am loving the fact that all my little icons, logos, pie-charts and graph details can all be imported and look absolutely crisp onscreen.
Thank you Diarmaid. I've always had issues importing an SVG that contains more than 1 layer into PowerPoint and then into Storyline but the method you outlined definitely seems to work great!
You have also mentioned that shapes end up being invisible once they are imported into SL. I've experienced the same thing but totally forgot to bring it up in my previous post.
Thanks for sharing! You are definitely not trodding on my toes!
TP... thank you for this response. Along with Diarmaid's response, I decided I'd attempt this adventurous process to test the theory. The good news is that yes, in fact, you CAN actually get a custom vector shape imported into SL and it remains a vector shape! So I will gladly recant my previous claim that they weren't "shapes" or "vectors".
However... there are many caveats along this adventure. Along with the ones you mentioned, one possible dealbreaker is the fact that... from what I can tell... SL does not allow you to use decimals when trying to fix the aspect ratio/sizes of the objects. When entering numbers into the W and H boxes, it will not accept decimals. (Yet another) workaround is to try your best to make the overall dimensions of your shapes in Illustrator to be as close to whole numbers for the W and H before saving as an SVG. Fractions of pixels may not matter to some, but for many of us, when it comes to company logos and branded elements, fudging a half a pixel here or there can create problems when dealing with locked ratios. Either you have to distort the image (maybe not obvious by most), or worse, elements that normally line up perfectly suddenly have white or transparency showing through where they should be meeting exactly. These scenarios are often VERY visible, even to the untrained eye.
Another trip up I had... you have to make sure any transparencies on your shapes in Illustrator have the opacity adjusted on the FILL, NOT on the PATH. If the opacity of the PATH is anything but 100%, it will end up as a PNG in SL instead of a freeform shape.
Also... on the distortion issue, it appears as if you fit your artboard to the selected artwork before saving out of Illustrator, you don't get much change to the overall size and aspect ratio. My first attempt, after seeing Diamaid's comment, I attempted to bring over a group of 5 shapes together. I did not change the default artboard, and once in SL all five shapes were out of alignment. As I was trying to get the five of them back to proper proportions individually... first I realized the lack of decimal input I mentioned above... but then that frustration made the light bulb go off. Back in Illustrator I fit the artboard to the artwork, did the process again, and all five shapes remained perfectly aligned. (And I fixed the one shape that had it's 80% opacity on the Path. ;) )
All in all, this is still a ridiculously convoluted workaround. And there are issues that at this point don't appear to be avoidable (decimals in sizing), and certainly several pitfalls along the way if you're not careful. So I'm not sure I can say that I'm any "happier" about this situation than I was during my rant yesterday. But, at least I can (mostly) get a custom vector shape into SL as a vector. So that's... something. Lol.
Here's hoping that at least the Articulate staff and decision makers are reading all of this nonsense. Because by unfathomably refusing to implement this extremely simple feature, they're bringing the workflow of people who are forced to used this software to a grinding halt.
Diarmaid... I wanted to make sure to thank you for your replies as well. The visuals are always helpful.
Perhaps you can try the artboard suggestion I made in my above comment to see if that fixes the distortion issue for you. I feel like maybe they're using the overall stage dimensions as their guide when importing PPT slides. So if your artboard is not exactly the same dimensions as the PPT or SL stages, we get the distortion. But with no artboard space outside the overall size of the shapes you're bringing over, there's nothing to try and line up... and the shapes appear as they should.
Maybe this is just in my case, with the shapes I used. But it sounds plausible.
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.
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.
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.
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.
Remember though that there are different types of SVG formats. For example an SVG has to be published in a specific way to work correctly with Whiteboarding tools such as Videoscribe. Might be useful if Articulate provided the recommend publishing formats from Illustrator to remove any confusion or frustration for people not familiar with it.
@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.
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.
Aaaaarrrgh Phil. I was in no way suggesting you were being facetious! I was talking about my own response... I didn't at all mean to imply your response was dismissive. I was agreeing with you in that transparent SVGs work for me, but I know the pain of having folks respond to my queries with "but it works for me".
I am sorry if I gave you that impression. That is absolutely not what I meant at all.
90 Replies
Hi TP. That's great information there. Very clear (for us designers I guess).
My only contribution is that one CAN import complex SVG shapes into Storyline if the elements have all been 'grouped' together as Compound Paths (OBJECT > COMPOUND PATH > MAKE, or, CMD + 8).
So, if your, say, logo has an icon, some text, and another element, like a line, or whatever, simply treat each part as its own compound group, and then when exported as an SVG and imported, each distinct section should be accessible as its own shape within Storyline.
At the risk of trodding on TP's toes and corrupting his excellent walkthrough, I'd like to illustrate his methodology with some images that do show that the end result is an imported SVG shape and not a rasterized image within Storyline.
This is a logo in Illustrator. Simplified to four shape paths. The text and lines are compound paths and the star and its outline are simple shape paths that don't need to be 'compounded.
This is the exported SVG after being imported into Powerpoint. As you can see it's looking good (awesome design).
This is the voodoo-ish part. After the Powerpoint slide has been imported into your Storyline file you will end up with an invisible mess like this.
But don't worry, the logo is there, as you can see from the Timeline. There are 4 layers corresponding to the 4 paths within the SVG file.
Yeah, this is the weird part I don't get myself. 90% of the time the SVG imports perfectly, but sometimes there is a distortion, as TP mentions. This is easily rectified, as he explains, by referring to the original dimensions of your vector file.
Once we correct the dimensions the logo is in Storyline and looking pretty good. But we want it to look like the original so we just select the shapes, because they are shapes, and fill with whatever colour we want.
And here you can see I have decided to make the middle star white and the 'outline' shape red. It looks awesome and is full of vectory goodness.
The only issue I do run into has only started happening recently and it is this:
"If you see a “Failed to import PowerPoint presentation” error message in Storyline 360, it means one or more of the following issues is occurring..." and Articulate provide suggested solutions here:
But the solution for me has been as follows:
The Presentation Doesn't Start with Slide Number 1
PowerPoint presentations must start numbering slides from 1 to import successfully into Storyline. If your presentation starts with slide 0 or another number, here's how you can fix it.
PowerPoint 2016 and Later: Go to the Design tab on the ribbon, click Slide Size, and choose Custom Slide Size. Enter 1 in the Number slides from field and click OK.
Anyway, I hope this helps. Whilst I understand the frustration that Storyline cannot simply import SVGs, the PowerPoint workaround has been subsumed into my workflow and I am loving the fact that all my little icons, logos, pie-charts and graph details can all be imported and look absolutely crisp onscreen.
Thank you Diarmaid. I've always had issues importing an SVG that contains more than 1 layer into PowerPoint and then into Storyline but the method you outlined definitely seems to work great!
You have also mentioned that shapes end up being invisible once they are imported into SL. I've experienced the same thing but totally forgot to bring it up in my previous post.
Thanks for sharing! You are definitely not trodding on my toes!
TP... thank you for this response. Along with Diarmaid's response, I decided I'd attempt this adventurous process to test the theory. The good news is that yes, in fact, you CAN actually get a custom vector shape imported into SL and it remains a vector shape! So I will gladly recant my previous claim that they weren't "shapes" or "vectors".
However... there are many caveats along this adventure. Along with the ones you mentioned, one possible dealbreaker is the fact that... from what I can tell... SL does not allow you to use decimals when trying to fix the aspect ratio/sizes of the objects. When entering numbers into the W and H boxes, it will not accept decimals. (Yet another) workaround is to try your best to make the overall dimensions of your shapes in Illustrator to be as close to whole numbers for the W and H before saving as an SVG. Fractions of pixels may not matter to some, but for many of us, when it comes to company logos and branded elements, fudging a half a pixel here or there can create problems when dealing with locked ratios. Either you have to distort the image (maybe not obvious by most), or worse, elements that normally line up perfectly suddenly have white or transparency showing through where they should be meeting exactly. These scenarios are often VERY visible, even to the untrained eye.
Another trip up I had... you have to make sure any transparencies on your shapes in Illustrator have the opacity adjusted on the FILL, NOT on the PATH. If the opacity of the PATH is anything but 100%, it will end up as a PNG in SL instead of a freeform shape.
Also... on the distortion issue, it appears as if you fit your artboard to the selected artwork before saving out of Illustrator, you don't get much change to the overall size and aspect ratio. My first attempt, after seeing Diamaid's comment, I attempted to bring over a group of 5 shapes together. I did not change the default artboard, and once in SL all five shapes were out of alignment. As I was trying to get the five of them back to proper proportions individually... first I realized the lack of decimal input I mentioned above... but then that frustration made the light bulb go off. Back in Illustrator I fit the artboard to the artwork, did the process again, and all five shapes remained perfectly aligned. (And I fixed the one shape that had it's 80% opacity on the Path. ;) )
All in all, this is still a ridiculously convoluted workaround. And there are issues that at this point don't appear to be avoidable (decimals in sizing), and certainly several pitfalls along the way if you're not careful. So I'm not sure I can say that I'm any "happier" about this situation than I was during my rant yesterday. But, at least I can (mostly) get a custom vector shape into SL as a vector. So that's... something. Lol.
Here's hoping that at least the Articulate staff and decision makers are reading all of this nonsense. Because by unfathomably refusing to implement this extremely simple feature, they're bringing the workflow of people who are forced to used this software to a grinding halt.
Diarmaid... I wanted to make sure to thank you for your replies as well. The visuals are always helpful.
Perhaps you can try the artboard suggestion I made in my above comment to see if that fixes the distortion issue for you. I feel like maybe they're using the overall stage dimensions as their guide when importing PPT slides. So if your artboard is not exactly the same dimensions as the PPT or SL stages, we get the distortion. But with no artboard space outside the overall size of the shapes you're bringing over, there's nothing to try and line up... and the shapes appear as they should.
Maybe this is just in my case, with the shapes I used. But it sounds plausible.
Anyway, thanks again!
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.
Yay!
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.
Yay for SVG import, BOO that it does not support the ALPHA channel so doesn't allow for transparency. Almost there!
I have imported SVGs with an alpha channel works just fine
It works for me in the editor but when published they loose their transparency?
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.
Here is the published version versus in the editor
ah! I am at 100% so that works, best to report as a bug
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.
Remember though that there are different types of SVG formats. For example an SVG has to be published in a specific way to work correctly with Whiteboarding tools such as Videoscribe. Might be useful if Articulate provided the recommend publishing formats from Illustrator to remove any confusion or frustration for people not familiar with it.
@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.
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.
Aaaaarrrgh Phil. I was in no way suggesting you were being facetious! I was talking about my own response... I didn't at all mean to imply your response was dismissive. I was agreeing with you in that transparent SVGs work for me, but I know the pain of having folks respond to my queries with "but it works for me".
I am sorry if I gave you that impression. That is absolutely not what I meant at all.
@Darren @ Diamaid all good here! To be fair some of my responses can be brief and could be more helpful :-)
This post was removed by the author
My wife says the same about me, so I hear you.....
Hey Matthew,
I just responded to your other conversation, but I went ahead and submitted this on your behalf so that our team can start digging in.