Since it's not one of the supported image types, I'd say converting it to another type would be your best bet, although unlikely what you want to hear.
You can insert an svg image in a web object. The SVG will have to be hosted either on a CMS or on the cloud somewhere if you have cloud storage and referenced as a URL:
The downside to this would be that the preview is not going to show you the svg image so the whole project has to be published. However the SVG will be displayed properly once the whole project is viewed from its published position
This technique was tried with a trial version of Articulate Storyline 2 (for storyline 1 this might not be a valid workaround).
After 2 years of people asking about this and other staff saying this would be a cool feature, I'm wondering what the progress is on adding static SVG files? I've been forced to use Captivate and they are allowing direct import to the stage for SVG's, and today I tested an Animated.svg created with Adobe Animate and exported with an "Add-on" - Very cool, but all browsers can not do the animated part (IE). Google Chrome and Firefox play the animation, while IE simply shows the first frame.
Either way, Storyline is getting behind the competition on this.
I don't like Resonsive eLearning for the Majorirty of my projects, so I want to keep using Storyline over Captivate, but if IE could play the animated .SVG - it could be a game changer, and is just a mater of time.
We're unable to share product roadmaps or timelines in regards to new features, so I can't say where the progress is on adding this type of image to the supported options. Were you able to investigate the option Dimitri shared above in terms of inserting it as a web object?
Are there any performance penalties from using web objects in a course? Is there a maximum amount of web objects that one can use in a course before it becomes heavy (by heavy I mean slow to respond and using too many resources, mainly memory and CPU)?
We don't have any official documentation of issues, as it'll be dependent on the system for which you're running the course and the browser used, wifi speed, etc.
Sure thing James! I know we were able to add support for SVG images within Rise, but since it's totally different tool than Storyline I'm not sure how the difference in images is dealt with. I'll leave that in the hands of our Engineers - but if you're using Articulate 360 you've got access to Rise, and then you could look at the use of SVGs there. If you haven't taken a look at Rise yet, take some time to test out the trial here.
In the list of supported types it says it can do EMF and WMF files which are both older vetor formats. I am wanting to do the same (use SVG), but this could be an option for now. As far as I know, some transparency could be an issue, but its probably better to do some tests. I plan to in the next week or so, so will let you know how I go with it.
Pretty sure it would. I use inkscape, so will see how it goes on that. I think different tools might give slightly different results - that's what standards-based formats are for after all:)
looking at the Storyline 360 trial and I am not understanding why svg files are not acceptable? The output can be html so it would seem to make sense, to me, that svg is a html format so......why not?
I am not a fan of microsoft so I was hoping to jump over articutlate so I am not interested in converting svg to emf, nor wmf.
I guess I will continue with adobe captivate as it can use svg very well....
I'm not an expert on media file types, so I did a bit of searching through the E-Learning Heroes forums here, and haven't seen a lot of requests for this file type. Could you tell us a bit more about how this specific type would fit best with your content (vs. the other file types available)? You could also tell our product team about it here directly!
The SVG file format pioneered by Adobe in the late '90 and now taken into the W3C is ideally a vector file. Where size is low and output is crisp... Always. Modern browser all support the file format now.
This file format is a set of xml instructions to draw a form/picture/logo/image. The point of using a svg file format is actually size independent. the file can be 5% in size or 1000% in size, the result will always be crisp.
For example a client's logo, used on a intro splash page will render good on small screen and good on big screen, even on retina display when player is set to 'scale player to fill browser window'. Since this file format is lightweight, I would greatly use it as the main file format for everything graphics : background, diagram, objects, navbar, caption, ... Result would be crisp and no complaint would come from learners on iPad or big screen saying : it is blurry on my iPad pro or on my screen! it would need to be honored in the SL publishing primarly.
It would counter the blur that scale to fit does when going over the original pixel size of your course.
Great explanation and examples. Being able to use SVG files natively would be super useful. It would likely reduce published files size resulting in better performance in addition to all the advantages of vector output scalability.
I've never heard of an SVG (despite using a lot of Adobe products)....but having read this, I want them!
I've always used PNG files (don't ask why....I just decided one day I preferred them) and the issue around sizing and clarity has always been a problem.
Given that we create material which will ultimately be consumed on devices of different screen sizes and resolutions, having the ability to insert an image file which scales perfectly and retains all of it's clarity would be a real game changer.
Yes, please! This is an important functionality that will help with many issues we run into in SL, especially for advanced math symbols. The ability to push content to a variety of devices with different screen sizes will be greatly enhanced when this feature is added.
Having recently returned to Storyline for a project I was surprised that it did not support SVGs. Primarily for the scalability as noted. However, it is also possible to dynamically change svg graphics with variables This is particularly helpful when building an interactive lab environment where you have to fill a beaker or show temperature changes. Instead of changing states with multiple graphic files it is possible to change the properties of the graphic via a variable and JavaScript. Creates a much smaller footprint and makes it easier to modify without returning to a graphic editor.
Thanks Mark - that's an interesting idea I hadn't heard before! If you've got more time to share a write up, I'm sure others in the community would appreciate it!
93 Replies
Hi Bruce,
Since it's not one of the supported image types, I'd say converting it to another type would be your best bet, although unlikely what you want to hear.
You can insert an svg image in a web object. The SVG will have to be hosted either on a CMS or on the cloud somewhere if you have cloud storage and referenced as a URL:
ie http://mycloudstorage.com/svgs/image.svg
The downside to this would be that the preview is not going to show you the svg image so the whole project has to be published. However the SVG will be displayed properly once the whole project is viewed from its published position
This technique was tried with a trial version of Articulate Storyline 2 (for storyline 1 this might not be a valid workaround).
After 2 years of people asking about this and other staff saying this would be a cool feature, I'm wondering what the progress is on adding static SVG files? I've been forced to use Captivate and they are allowing direct import to the stage for SVG's, and today I tested an Animated.svg created with Adobe Animate and exported with an "Add-on" - Very cool, but all browsers can not do the animated part (IE). Google Chrome and Firefox play the animation, while IE simply shows the first frame.
Either way, Storyline is getting behind the competition on this.
I don't like Resonsive eLearning for the Majorirty of my projects, so I want to keep using Storyline over Captivate, but if IE could play the animated .SVG - it could be a game changer, and is just a mater of time.
- Kyle
Hi Kyle,
We're unable to share product roadmaps or timelines in regards to new features, so I can't say where the progress is on adding this type of image to the supported options. Were you able to investigate the option Dimitri shared above in terms of inserting it as a web object?
Hey Ashley,
Just out of curiosity:
Are there any performance penalties from using web objects in a course? Is there a maximum amount of web objects that one can use in a course before it becomes heavy (by heavy I mean slow to respond and using too many resources, mainly memory and CPU)?
Thank you for your response.
Hi Dimitris,
We don't have any official documentation of issues, as it'll be dependent on the system for which you're running the course and the browser used, wifi speed, etc.
Throwing my hat in the ring also asking for native SVG support. The other options are viable work arounds, but shouldn't be needed anymore.
Thanks Shane - and since you've responded here in the forum discussion you'll get an update once we've got additional information to share here!
Count me in on this too, I'd love to know if this feature is added. I'm crying out for SVG support!
Sure thing James! I know we were able to add support for SVG images within Rise, but since it's totally different tool than Storyline I'm not sure how the difference in images is dealt with. I'll leave that in the hands of our Engineers - but if you're using Articulate 360 you've got access to Rise, and then you could look at the use of SVGs there. If you haven't taken a look at Rise yet, take some time to test out the trial here.
In the list of supported types it says it can do EMF and WMF files which are both older vetor formats. I am wanting to do the same (use SVG), but this could be an option for now. As far as I know, some transparency could be an issue, but its probably better to do some tests. I plan to in the next week or so, so will let you know how I go with it.
Interesting... I would love to hear how you get on! I might try it out myself as well.
Can you create WMF and EMF in Illustrator?
Pretty sure it would. I use inkscape, so will see how it goes on that. I think different tools might give slightly different results - that's what standards-based formats are for after all:)
Yes, you can export EMF and WMF from Illustrator.
Count me in!
I want SVG in SL. It should be a no brainer now.
Hello All,
looking at the Storyline 360 trial and I am not understanding why svg files are not acceptable? The output can be html so it would seem to make sense, to me, that svg is a html format so......why not?
I am not a fan of microsoft so I was hoping to jump over articutlate so I am not interested in converting svg to emf, nor wmf.
I guess I will continue with adobe captivate as it can use svg very well....
Hi Richard,
I'm not an expert on media file types, so I did a bit of searching through the E-Learning Heroes forums here, and haven't seen a lot of requests for this file type. Could you tell us a bit more about how this specific type would fit best with your content (vs. the other file types available)? You could also tell our product team about it here directly!
We always love to hear feedback from our customers, and we take all of these suggestions into account. In case you're wondering, here's how we manage all of the ideas we receive!
Here's my take :
The SVG file format pioneered by Adobe in the late '90 and now taken into the W3C is ideally a vector file. Where size is low and output is crisp... Always. Modern browser all support the file format now.
This file format is a set of xml instructions to draw a form/picture/logo/image. The point of using a svg file format is actually size independent. the file can be 5% in size or 1000% in size, the result will always be crisp.
For example a client's logo, used on a intro splash page will render good on small screen and good on big screen, even on retina display when player is set to 'scale player to fill browser window'. Since this file format is lightweight, I would greatly use it as the main file format for everything graphics : background, diagram, objects, navbar, caption, ... Result would be crisp and no complaint would come from learners on iPad or big screen saying : it is blurry on my iPad pro or on my screen! it would need to be honored in the SL publishing primarly.
It would counter the blur that scale to fit does when going over the original pixel size of your course.
Cheers
Great explanation and examples. Being able to use SVG files natively would be super useful. It would likely reduce published files size resulting in better performance in addition to all the advantages of vector output scalability.
Thanks Rich - that explanation was really helpful. I appreciate you sharing here and I'll get this into the hands of my team!
I've never heard of an SVG (despite using a lot of Adobe products)....but having read this, I want them!
I've always used PNG files (don't ask why....I just decided one day I preferred them) and the issue around sizing and clarity has always been a problem.
Given that we create material which will ultimately be consumed on devices of different screen sizes and resolutions, having the ability to insert an image file which scales perfectly and retains all of it's clarity would be a real game changer.
Thanks Glenn for the additional feedback! It's much appreciated.
Yes, please! This is an important functionality that will help with many issues we run into in SL, especially for advanced math symbols. The ability to push content to a variety of devices with different screen sizes will be greatly enhanced when this feature is added.
Having recently returned to Storyline for a project I was surprised that it did not support SVGs. Primarily for the scalability as noted. However, it is also possible to dynamically change svg graphics with variables This is particularly helpful when building an interactive lab environment where you have to fill a beaker or show temperature changes. Instead of changing states with multiple graphic files it is possible to change the properties of the graphic via a variable and JavaScript. Creates a much smaller footprint and makes it easier to modify without returning to a graphic editor.
Thanks Mark - that's an interesting idea I hadn't heard before! If you've got more time to share a write up, I'm sure others in the community would appreciate it!