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