Importing vector graphics

Hi P,

There shouldn't be any rastering with the method I described. It sounds to me you're either importing your files incorrectly, missed a step, or you are trying to change the fill and/or outline color of the objects you imported to storyline and realizing you just can't outside of rectangles (inability to change color was also explained in my intro/disclaimer in case you missed it). Understand that SL2 places all imported images into a rectangular bounding box. Although you may have imported a vector-like image into storyline, you are only able to make actual edits to that bounding box.

Without further details of the problems you're having, I don't know how else to respond. I would like to help but you're going to need to narrow it down a bit.

I've tried all of these methods (and more) to no avail ... maybe I will try on a different windows machine.

Hi Sherridon,

Are you having difficulty importing them in general or just as a part of the published output? It's worth noting that objects aren't vectored in HTML5 output. As a result, they may not appear as crisp in HTML5 as they do in Flash if you set the player to scale to fill the browser. To avoid scaling and reduction in image quality, we recommend locking your course player at optimal size. Because objects aren't vectored in HTML5 output, they may look blurry or pixelated in zoom regions.

Please feel free to let us know if you need anything else. 

I just spent an hour saving an original vector graphic in a variety of formats trying to retain the crispness of the original image. Finally managed to arrive at one that was head and shoulders above the rest (even though once pasted into Storyline, I'm sure it was converted to raster.) Out of Adobe Illustrator (CC) I selected: Export\Export As... then .png file format. When you click "Export" again, it brings up a dialog box where you can set your resolution to High Resolution 300 dpi, Anti-aliasing: None. Transparent background.

Bring this into Storyline as a normal .png image. This will give you a larger file size, but the image quality is FAR greater than anything else I have tried.

Hope this helps someone.

Thanks Anthony for sharing those steps. I know a few folks have also shared their thoughts on different file types they'd like to see support for by using our feature request form.  

In case you're curious, here's how we manage all of the ideas we receive!

Having Storyline support .svg (scalable vector graphics) file format would be good as well since svg is also supported by HTML 5 and would then solve the need for importing vector graphics into Storyline. I really hope to see this feature soon (.. and will of course fill in the feature request form straight away)!

Thanks Safurah for submitting the feature! We've also shared a few similar forum discussions with our team, so I'll be sure to share this one too. 

@Ashley, since Storyline 3 and 360's illustrated characters are created using SVG graphics, isn't this already supported?

Hi Jerson,

I know a number of folks have shared that importing in their SVG graphics doesn't work as they'd expect - so that's the part we've shared as a feature to change how we support those. If you have any other ideas for ways to work within the current set up and use their SVG images, I'm sure folks would love to hear them! 

In story line 3 i can paste straight from illustrator and ungroup.

Oh hey you're right..! When I first pasted a vector image from Adobe Illustrator, it looks rasterized/pixelated, but once 'ungroup'ed it then became vector again. Funny. But happy that it worked. Thanks for sharing!

Thanks for sharing your findings Chris and glad that it was able to help Safurah out as well :)

Hello everyone,

I wanted to pop in to let you know that there was an enhancement included in the latest update to Storyline 360 that you may be interested in:

Enhanced: SVG images on PowerPoint slides import into Storyline 360 as native shapes. You can customize their fill colors, line styles, and shape effects. Details here.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.

Does this work with the latest update to Storyline 3?

(BTW, Im the guy that started this thread 7 years ago.)

Leslie, you may need to forgive my ignorance, but does SL360 also treat SVGs this way if imported directly into SL, or only when inserted to PPT first?

Hi John,

It's only in Storyline 360 at this time.

Hi Brian,

All questions are valid, no judgments or forgiveness needed :) 

At this time, it is when imported into your Storyline course via PowerPoint only. Storyline 360 doesn’t support importing SVGs directly (this detail is included in Step 1 of this documentation).

Thanks Leslie, I wasn't sure on importing SVG directly into Storyline, but I was hoping :)

Thank you! This is right on.

After searching many posts and threads, I too can open a SVG in Illustrator (or just an illustrator file), copy and paste into SL3, then "ungroup" and it is a scalable vector graphic that I can change the color, etc. Also works when copying vector images out of PowerPoint and paste into SL3 > ungroup.

Try it with the attached icon(s).

Wow. After 7 years...

I found your original post in my search for importing vector graphics to SL3.

I'm learning Storyline because it is an industry standard. After reading Importing SVG Images from PowerPoint  I realized that Storyline does not support PowerPoint Mac (v16.16.21)  and I cannot import a very mundane svg vector file which is the standard for vector graphics on the web .

I now understand the true meaning of "E-Learning Heroes". What a waste of time!

Hey Articulate, please build your app on macOS, you'll have native PDF support without needing to re-invent a very very old wheel.

No vector file support in 2020 for a presentation and animation tool, come on! You are resting on your laurels!

I'm looking at other solutions like the 50$ Hype which does much better in terms of design and animation.

Finally we can import the svg file to SL360 with the help of Powerpoint. But what's the point if the output of the html5 svg becomes a raster image?

I have tried many times to import SVG to SL360 and when published it turns into a raster image. So what's the difference with just using png?

I really hope that whatever the file format is (svg, emf, wmf, eps) I just need it to be scalable when published to html5