93 Replies
Ashley Terwilliger-Pollard

Hi Mark,

It's certainly not trivial, especially when it's requested by a number of our customers. 

We don't share a public roadmap, so, unfortunately, I don't have any info to share on where it stands with our team, but I really appreciate you adding to the discussion. The pieces you highlighted on accessibility and responsive design both are key areas our team is constantly working on, so it's helpful to have that added reminder.

Thank you again for taking the time and as soon as we have more to share, I promise we'll let you know. 

Tyler Shirai-Rielly

Found the hack!!!!! 

1. Open your SVG in Illustrator. Release all compound paths, and groupings of your vector. 

2. Copy (ctrl+c) your vector in illustrator.

3. Paste in storyline. 

4. Right+click the pasted vector, and select "Group" -- then "Ungroup". Do this twice to be sure. Sometimes there are multiple levels of grouping you will need to squash. 

5. Group again if icon has disconnected elements. 

6. WALAH. Now storyline reads what was an "image" as a "freeform shape". We have tricked storyline into thinking your outside element is an internally rendered vector. 

 

You all are welcome.

Glen Shearer
Tyler Shirai-Rielly

I gave you guys the answer. use it 

By your own words, what you have given is a “hack” and since it requires releasing compound paths, I have doubts as to whether it is adequate for most of the icons I work with. Also, your solution requires using an external program, Illustrator, which could otherwise be used just to save as one of the other supported vector formats. Your solution adds 5 steps to an otherwise ‘simple’ alternative and doesn’t result in a re-usable graphic file. It’s an interesting hack and I look forward to trying it, but it’s not a solution.

The problem is Articulate does not support this open web standard and has offered no information about efforts or plans to introduce this feature for no other reason than they just don’t do that. All we’ve heard is “I’ve passed on the message” and the repeated dismissive line “we’ll keep you posted”.

That’s 5 years.

Techno10 Lorrain

It is SVG. SVG, xml based,  support 3 types of graphics; vector graphic, bitmap and text. It also support animation through SMIL. What I thought  possible for Articulate was to render the entire graphic canvas of a project with xml-svg. I think this is where the real challenge reside. 

To us , our main problem was when the project was upscaling bigger then its native resolution, ending up with blurriness. Xavier Godbout brought up a solution to stop the upscale when the project reach the designed resolution. If this could be an option for you, here's the link to the thread: https://community.articulate.com/discussions/articulate-storyline/resize-the-storyline-player#reply-557344

Cheers!

Tyler Shirai-Rielly

You only need to remove compound paths if they are grouped. then you can use pathfinder again. the point is each separate element in an icon cannot be grouped. and sure, it adds 5 steps, but they're quick steps, and it's your only damn option. 

With all of the significant advantages storyline offers over captivate, svg being the only hangup, I was absolutely delighted to figure this out. Use it only if you like... -_-

Still, storyline seriously dropping the ball on this, listen to your consumer!!

Danny Houk

My team just got set up with a handful of Articulate 360 licenses. I too am throwing my vote behind SVG support. As the "flat" style becomes more prevalent, and since I do much of my mockups in Illustrator and XD, being able to work with and manipulate SVGs is huge asset. 

For the reasons mentioned above, being able to scale SVGs up to any size with no quality loss and having access to their line and fill properties is just one huge perk they have compared to other image formats. 

Without knowing much about the back end of Storyline, I wouldn't be surprised if the native "shapes" were some sort of vector format similar to SVGs.

Katie Riggio

Hi, folks!

The feedback you've shared here is valuable. Your need for SVG support is heard, and we'll take all of this insight into consideration as we prioritize and plan for future enhancements.

If this feature gets added to a future update, this discussion will be the first to know. Everyone who commented here will be notified immediately since that automatically subscribes one to this conversation! 

Leslie McKerchie

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.

Ellen Carnahan

The advantages of animating SVGs (Scalable Vector Graphics) is analagous to using (now-defunct) Flash: vector-based, small footprint, easy to control with JavaScript (Flash: AS). Since Articulate uses JavaScript for much of its native functionality, it seems logical to look at support for SVGs. Although Greensock is a third-party toolkit developer, a browse through their site will show the beauty of SVG animations. EVERY animation on that site (as well the various showcases, though some are presented using Vimeo, etc.) is done using SVGs, CSS3 and JavaScript. https://greensock.com/gsap/ (It is not beyond the realm of imagination that they may be interested in collaborating with your developers... hint, hint....)

Since SVGs and their animation are essentially transparent like the bones of any HTML5 webpage, there are no security issues such as what Flash encountered. SVGs have been around for many, many years and are used by most high-end websites to add crisp, sleek beauty and functionality. It is unlikely they will ever go out of style.

It is possible that the "PPT engine" implied by Storyline's interface precludes the inclusion of any vector graphics besides emf/wmf cousins? If so that would be a shame, but understandable.

Please put me on this list if Articulate ever adds this functionality.... 

Math Notermans

Storyline already uses GSAP behind the curtains. All animations done in Storyline in fact use GSAP's tween engine to do the animation. Check my posts on that. So without any problem you can animate a shape, image or SVG directly in Storyline. Only your selector needs to be correct.

Some of my posts on that...
https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360
https://community.articulate.com/discussions/articulate-storyline/morphing-animation-in-storyline
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review

Ellen Carnahan

Thank you for the quick reply, Math Notermans!

Very cool — and very, very helpful! I will dig in ;)

EDIT: This post [https://community.articulate.com/discussions/articulate-storyline/fix-for-loss-of-jquery-and-gsap-in-new-update] seems to indicate support was removed recently? Not urgent on my end, just browsing for possibilities. 

Ellen