Forum Discussion
Svg files for SL360 on the roadmap?
Hi, wonder if and when you are planning to let SL360 support svg images?
Remember though that there are different types of SVG formats. For example an SVG has to be published in a specific way to work correctly with Whiteboarding tools such as Videoscribe. Might be useful if Articulate provided the recommend publishing formats from Illustrator to remove any confusion or frustration for people not familiar with it.
Hey Matthew,
I just responded to your other conversation, but I went ahead and submitted this on your behalf so that our team can start digging in.
I have to agree with Diarmaid. I use Illustrator to create graphics which I then bring into Storyline. Sometimes the SVGs don't work properly and I have to use a PNG (recently encountered again when trying to use parallax sliders).
If Storyline had robust drawing tools like Illustrator, I'd use them.
Hi, everyone, I have read this thread with interest. When I create an SVG in Illustrator and then import into SL360, it often shows with some clipping on the edges. Like this:
Does anybody know what I am doing wrong? How can I ensure that SVGs imported from Illustrator are not showing this clipping?
Many thanks!
Alex
Try changing the artboard width and height so that there's a buffer of 1 or 2 px around your artwork.
I'd agree with that, absolutely. Sometimes, a stroke can lie juuuuuuust beyond the artboard and then gets clipped - but I personally think it's an issue with Adobe in recent years.
I would also suggest scaling your Illustrator artwork up before saving/exporting it as an SVG. Even though SVGs are full of vectory goodness, and by law (if not principle), they should scale up or down without a hitch, I find that I get crisper, cleaner artwork when creating SVG shapes in Illustrator at 400%. It seems to cram more accurate mathematics into the vector, if that was possible.
And do not forget that if you use Illustrator on a PC, you can convert your Illustrator artwork into a Compound Path (CTRL+8) and simply copy and paste that shape into Storyline as... <drumroll>... a vector shape, which can be edited with fill and stroke within Storyline itself.
Diarmaid where did I miss that little known fact that I can get vectors into SL?
Hi Phil. It was a post started by one of the contributors in this thread, Reina - @Access Pointe, that mentioned the discovery. It's rather excellent.
https://community.articulate.com/discussions/articulate-storyline/struggling-with-graphics-in-storyline#reply-792659I forgot to mention in my response to Alex that once copied from Illustrator and then pasted into SL, it will appear in the timeline as an EMF file. Simply 'ungroup' the object, and it transforms into an editable shape.
One other question on the topic of SVGs if I may? When I export text from AI as an SVG, it doesn't play nice. See below - the graphic on the left is how it appears in AI before export. The graphic on the right is how it appears after export as an SVG - the text has changed font and bunched up in places. I am very aware that this is just a gap in my knowledge of AI, and not a bug, but I'd be really grateful for any help/guidance on how to stop this from happening.
Thank you!
Alex
The reason why it glitches has something to do with ... uh ... font coding or something. Some fonts work. Most don't. As your image illustrates, your nice sans-serif font (Myriad?) has been translated, or been interpreted/transmogrified, as a serif font (Times, probably). It's to do with the fact that the code of the font is being bundled into the code for the icons so when exported to SVG there is a ... glitch (I'm not completely au fait with the correct terminology (or actual process) here).
If you convert your text within Illustrator from editable text to outlines (SHIFT+CTRL+O), this will render your text elements as shapes. These will then display as intended once exported in the SVG.
Again, grouping your text shape object as a compound path will create a single shape element that can easily be copied and pasted into Storyline. But the benefit of grouping elements into distinct compound path entities is that it simplifies the vector mathematics that creates SVG files. Less individual objects = less code = smaller file size = fewer things to go awry.
Hope that helps. Apologies for the verbosity.
Thank you Diarmaid, your solution has fixed it! You have been very helpful!
