Storyline 360: SVG Support
Article Last Updated
This article applies to:
Tired of fuzzy images? Scalable vector graphics (SVG) is an XML-based file format that uses lines and points to display a graphic. Unlike pixel-based image formats, such as PNG and JPG, SVG doesn't have a defined resolution and stays sharp when scaled up or down on any screen size.
As of October 2021, Storyline 360 supports SVGs so the images in your course look crisp on every device. Read on for details.
Benefits of SVGs
SVGs won't lose quality when resized or zoomed in, whereas PNGs and JPGs look blurry or pixelated. This takes the guesswork out of the image quality across various browsers and devices. SVG images look the same in your published output as they do during authoring. What you see is what you get!
Another bonus is that SVGs are much smaller in size. Large file sizes contribute to slow-loading courses. SVGs reduce your Storyline 360 project's file size, making content quicker to load, even on slow internet connections.
Check out the following image in three different formats. In this example, the SVG image is half the size of its PNG and JPG counterparts.
| PNG Image 8 KB | JPG Image 8 KB | SVG Image 4 KB |
 |  |  |
Adding SVGs
It's a snap to add SVGs to slides, layers, and slide masters.
In Slide View, use any of the following methods:
- Press Ctrl+J on your keyboard.
- Drag the SVG image from your computer and drop it on your course slide.
- Go to the Insert tab on the ribbon, click Picture, and browse for an SVG image.
In Form View, click Media on the ribbon and choose Picture from File.
Formatting SVGs
Easily arrange, group, rotate, align, size, or position SVGs. Just select your SVG and choose any of the available formatting options on the Format tab on the ribbon. (Learn more about formatting tools.)
Note: In Storyline 360, SVGs behave like standard images with a few exceptions. They can't be used as picture fills or slide backgrounds, inserted into marker labels, or added to 360° interactions.
FAQs
Here are answers to common questions about using SVGs in Storyline 360:
Are SVGs customizable in Storyline 360?
You can arrange, group, rotate, align, size, and position SVGs in Storyline 360. Use a third-party editor like Photoshop to recolor an SVG before importing it into Storyline 360. Or, use the media library to open it in a third-party editor, and then save your changes directly to Storyline 360. Here's how.
Are animated SVGs supported in Storyline 360?
No, but you can always share your interest in animated SVG support by submitting a feature request.
Can I still import SVGs from PowerPoint into Storyline 360?
Yes. However, SVGs imported via PowerPoint behave differently now than they did before.
Before October 2021, SVGs in PowerPoint became shapes when you imported the slides into Storyline 360. Now, SVGs import as native SVGs in new Storyline 360 projects.
When you open an existing Storyline 360 project that has imported PowerPoint slides with SVGs in the October 2021 update, those SVGs still display as shapes. To experience SVG support, reimport those PowerSlide slides into Storyline 360.
Compatibility
Install the Storyline 3 April 2022 update or later to restore compatibility with Storyline 360.
You can open, edit, and publish Storyline 360 project files that have SVG images in Storyline 3. However, you can't add SVG images in Storyline 3.