Forum Discussion
Svg files for SL360 on the roadmap?
Hi, wonder if and when you are planning to let SL360 support svg images?
Another 8 months have been added to the years... and still nothing.
I also find it insulting to my intelligence as a designer to call it "Importing SVGs from Powerpoint", as you are absolutely NOT importing the SVG, you are converting the SVG to a raster image. Which is patently unacceptable in the design world.
To add to that, if all the people that have posted workarounds would stop calling them "shapes", that'd be great. Because "shapes" implies they are vector shapes, as the default shapes within SL are. After trying all the multiple ways I've found people suggest to get their vector shapes into SL, all I'm left with are raster images, not vector shapes. Furthermore, depending on the technique, you may or may not retain transparency. So instead of a triangle covering half the stage, I get a full-stage image that is half triangle, half white (where the transparency was.) How ANYONE has found this acceptable to this point is beyond me. Each passing day brings yet another example of frustration when it comes to basic features not included in SL. No one is asking for anything over the top. Just the same basic features that almost every other design app includes in their "beginner level" features. And yet, not even the decency of an explanation as to why these requests are simply rejected, year after year.
Hey Kevin. I agree that it is still not easy to import vector assets into Storyline, but it is possible. I've noticed that if I export a SVG shape from Illustrator that contains a clipping mask, or if the shape uses groups or layers in Illustrator, then it will look fine when imported into PowerPoint, but will convert to a raster image if you import that PowerPoint into Storyline. The key is to only import single vector (SVG) shapes into PowerPoint then into Storyline. Once the shape is in Storyline you will notice that it is a vector shape graphic not an image. Then you can add colours and gradients the same way you would to any other shape in Storyline.
It's really painful to do, but not impossible. I think this should be something Articulate should focus on more. There are definitely people that have been wanting to see this in Storyline for years.
I've created a rough guide that I shared with my team on how to import SVG shapes from Adobe Illustrator to PowerPoint to Articulate Storyline. Articulate's resource that they have on the webpage about Importing SVG files is missing some crucial information. Hopefully this helps somebody:
Illustrator Notes:
- Saving SVG files from Illustrator that contain more than one shape at a time often leads to issues when trying to bring into Storyline. To avoid this, only save one shape in Illustrator as an SVG at a time.
- Remove any gradients from the shapes that you plan to import into Articulate
- Check the layers. Make sure that there are no clipping masks, or groupings. The vector shape should be the only thing in a layer. So if you check your layers inside of Illustrator, it should be something like this: “Layer 1” —> “Component Path”. And not “Layer 1” —> “Clip Group” —> “Group” —> “Component Path”.
- Export the shape as an SVG
Instructions to import an SVG graphic into PowerPoint for Windows:
- Open PowerPoint on Windows (You need PowerPoint 2016, PowerPoint 2019, or Office 365. Earlier versions of PowerPoint don’t support SVGs.)
- Create a new blank presentation, delete title and text placeholders
- Go to Insert > Pictures > This Device, and find the SVG shape you exported from Illustrator
- Do NOT right click on the SVG and select “Convert to Shape” in PowerPoint. This will result in a png image when imported into Articulate
- You MAY have to change the SVG fill colour inside of PowerPoint in order for Articulate to recognize it. But if you did this in Illustrator it should work.
- Save your PowerPoint with a SINGLE vector SVG shape inserted into it. Sometimes multiple shapes work, but I’ve had problems with this.
Importing PowerPoint into Storyline:
- Create a new Storyline project, and import from PowerPoint.
- Check to see if the vector/SVG shape is now available on the slide. If it worked, it will show the layer as a “Freeform” graphic. If it says anything other than that, then something had not been prepped properly, and it hasn’t been imported as a vector. Go back and review.
- The aspect ratio will have changed after the vector is imported into Storyline. To correct this, open the original SVG in Illustrator to reference the width and height (Window —> Info panel) to get the correct dimensions and use those dimensions in Storyline. Once the aspect ratio is corrected, click on “Lock aspect ratio” in Storyline.
- You can now copy and paste this vector graphic from your storyline slide into your main Storyline Project.
The problem I'm running into now is dealing with a very slow and laggy Storyline project file because I've imported around 50 vector objects on a slide in order to build something that requires many layers. Might be something to keep in mind.
That is still the long way around just to convert an svg to a file. As a designer I can simply export from Illustrator to PNG. not the point.
It seems to be an option for non graphic designer people,
Even now, we are moving on to Lottie files which are animated SVG objects.
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.
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.
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.
@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.
