Forum Discussion
Svg files for SL360 on the roadmap?
Hi, wonder if and when you are planning to let SL360 support svg images?
94 Replies
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!
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.
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.
Thank you Maura! The simple solutions are often the best!
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.
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.
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.
Hi Luke. I have been using SVGs extensively in my recent modules and I have yet to run into the issue you are having. Here is an example where the shadow cast by the character contains a 30% Black and as you can see it retains the Alpha Transparency when overlayed on different coloured backgrounds (top is in editor/Storyline, the bottom is published output).
Not sure why you are encountering this issue. I have noticed that I need to edit a lot of SVG files in Illustrator myself to get rid of lots of extraneous paths, etc (Astute Graphic's Vector First Aid is invaluable for this) so my SVGs tend to be bare-bones minimum, with no masking paths, etc.
I could take a look at your SVG file for you and see if I can see what the issue may be if you'd like?
I know there is nothing worse than having an issue and someone chiming in with an utterly irrelevant "works fine for me!" post.
@Darren sorry my response was not trying to be fascitious, I have had no issues with transparency in SVGs. I did suggest raising a support case as the more use cases articulate get will help them to tailor the use of SVGs to their target market. I realised that I have been using drop shadows with transparency as well so agree with you it may be the way the SVG is created/generated. I would still raise a support case for this.
Aaaaarrrgh Phil. I was in no way suggesting you were being facetious! I was talking about my own response... I didn't at all mean to imply your response was dismissive. I was agreeing with you in that transparent SVGs work for me, but I know the pain of having folks respond to my queries with "but it works for me".
I am sorry if I gave you that impression. That is absolutely not what I meant at all.
ah! I am at 100% so that works, best to report as a bug
Here is the published version versus in the editor
I should mention this is when i set a background element of the SVG to say 80% transparent, it then becomes 0% transparent on publish.
