This thread is almost 5 years old. My wild guess is "its not gonna happen". There are many many challenges for Articulate and Storyline. SVG doesn't seem to be one of them... Sadly.
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.
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.
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”.
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.
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!!
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.
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!
Thanks a lot for your interest and the information - I really have to say, that the support and willing to help is very impressive. Form e it ist he first time, that I would rate the support much better than the product itself.
So glad to hear it, Guido :) I've shared your kind sentiments with our support team.
It looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
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.
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....
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.
93 Replies
Mark, it is all good stuff we know.
This thread is almost 5 years old. My wild guess is "its not gonna happen". There are many many challenges for Articulate and Storyline. SVG doesn't seem to be one of them... Sadly.
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.
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.
SVG is an open standard
I gave you guys the answer. use it
This post was removed by the author
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.
You are right! Flash isn't, sadly, neither shockwave. Read the entire thread, I am active on the matter, but losing hope slowly.
What I meant is the fact that SL is shockwave/flash base is the real challenge. Not that svg has been created from flash.
Cheers!
I use .svg files in storyline through javascript.
Just change the url of a image file to a url of a .svg file. put the .svg file into the attachment document .
Hey rich,
If so what is the html alternative? There must be a file format that true
vector based files?
Steve
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!
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!!
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.
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!
Thanks a lot for your interest and the information - I really have to say, that the support and willing to help is very impressive. Form e it ist he first time, that I would rate the support much better than the product itself.
Best wishes
So glad to hear it, Guido :) I've shared your kind sentiments with our support team.
It looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.
I just wanted to chime in with all the people requesting SVG to be supported in SL.
It would be a really important feature!
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.
This is great news, thanks for the update! Are there future plans to support .svg's directly in Storyline?
Thanks!
The feature request is still open with our team, but this was a welcome surprise to me:)
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....
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
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
JQuery is removed. But you do not need it to work with GSAP. Vanille selectors work as well.