I have a quick question for you. I was also on the bandwagon for this update, and now that they have incorporated it, my workload has doubled! I used to use the workaround with PPT and got very good at it. Now I cannot use that method any longer, and all SVGs come in as un-manipulatable (sorry for that word!) objects! I cannot change colors, break them apart, or anything that I could do before with a PPT > SL SVG. Any ideas on what I can do? Do you know any way to get these images to be changeable once in SL? Any ideas welcomed!
Thing to remember here is that you are bringing an svg into PowerPoint, which then converts it to a PowerPoint editable graphic, which you then can recolor, then save out as a png for SL360. So the SVG is not being imported into SL360 but you are using PowerPoint simply as an image editor and convertor. If you use illustrator on a daily basis then using PowerPoint is pointless. Using an SVG directly in SL360 would mean resizing in the slide and no loss of quality at any size or resolution. Once in SL360 you cannot edit the png files colors.
Thing to remember here is that you are bringing an svg into PowerPoint, which then converts it to a PowerPoint editable graphic, which you then can recolor, then save out as a png for SL360. So the SVG is not being imported into SL360 but you are using PowerPoint simply as an image editor and convertor. If you use illustrator on a daily basis then using PowerPoint is pointless. Using an SVG directly in SL360 would mean resizing in the slide and no loss of quality at any size or resolution. Once in SL360 you cannot edit the png files colors.
Hi Darren. That's not at all what happens (happened) with SVGs and Powerpoint. You mention in your next point that the example I use could easily have been created in Storyline, and yes, that is true, but that is not what the example was about.
The example clearly illustrated that, at the time, SVGs could be imported into Powerpoint and then the Powerpoint slide could then be imported into Storyline and all the vector goodness of the SVG could be retained, and, more importantly, edited within Storyline EXACTLY like a shape because that's what it was. It was most definitely NOT a 'save as PNG' option as you describe.
This was a methodology actually endorsed and described by Articulate, so you're not really helping Access Pointe with your suggestion.
The problem Reina is describing is the unfortunate by-product of Articulate attempting to be super-clever and simply adopt native SVG file insertion but it breaks so many useful functionalities that is not an 'acceptable' solution, compared to what was offered before.
I don't wish to over-labour the point here but again, yes, I am clearly showing an example, and yes, a simulation of that example logo could easily be created within Storyline, but not if the client wanted a 7 pointed star or a rounded-edged star, or anything else even remotely not within the basic shape palette that is woefully bundled as if it's somehow an acceptable assortment of 'shapes' everyone loves to use.
The draw tools are beyond lamentable and trying to create anything beyond the basics is laughable. One cannot join shapes (without grouping) or knockout chunks. Or draw 'accurate' squiggly lines.
As a graphic designer, I am appalled that ANYONE, but most especially Articulate, consider any of their built-in shape tools as being worthwhile.
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?
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.
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.
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.
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.
I 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.
90 Replies
Hi Gerry,
I have a quick question for you. I was also on the bandwagon for this update, and now that they have incorporated it, my workload has doubled! I used to use the workaround with PPT and got very good at it. Now I cannot use that method any longer, and all SVGs come in as un-manipulatable (sorry for that word!) objects! I cannot change colors, break them apart, or anything that I could do before with a PPT > SL SVG. Any ideas on what I can do? Do you know any way to get these images to be changeable once in SL? Any ideas welcomed!
Thanks,
Reina
Thing to remember here is that you are bringing an svg into PowerPoint, which then converts it to a PowerPoint editable graphic, which you then can recolor, then save out as a png for SL360. So the SVG is not being imported into SL360 but you are using PowerPoint simply as an image editor and convertor. If you use illustrator on a daily basis then using PowerPoint is pointless. Using an SVG directly in SL360 would mean resizing in the slide and no loss of quality at any size or resolution. Once in SL360 you cannot edit the png files colors.
I know you are showing an example, but simply with the Shapes tools in Storyline you could just create that same logo in Storyline directly.
Hi Darren. That's not at all what happens (happened) with SVGs and Powerpoint. You mention in your next point that the example I use could easily have been created in Storyline, and yes, that is true, but that is not what the example was about.
The example clearly illustrated that, at the time, SVGs could be imported into Powerpoint and then the Powerpoint slide could then be imported into Storyline and all the vector goodness of the SVG could be retained, and, more importantly, edited within Storyline EXACTLY like a shape because that's what it was. It was most definitely NOT a 'save as PNG' option as you describe.
This was a methodology actually endorsed and described by Articulate, so you're not really helping Access Pointe with your suggestion.
The problem Reina is describing is the unfortunate by-product of Articulate attempting to be super-clever and simply adopt native SVG file insertion but it breaks so many useful functionalities that is not an 'acceptable' solution, compared to what was offered before.
I don't wish to over-labour the point here but again, yes, I am clearly showing an example, and yes, a simulation of that example logo could easily be created within Storyline, but not if the client wanted a 7 pointed star or a rounded-edged star, or anything else even remotely not within the basic shape palette that is woefully bundled as if it's somehow an acceptable assortment of 'shapes' everyone loves to use.
The draw tools are beyond lamentable and trying to create anything beyond the basics is laughable. One cannot join shapes (without grouping) or knockout chunks. Or draw 'accurate' squiggly lines.
As a graphic designer, I am appalled that ANYONE, but most especially Articulate, consider any of their built-in shape tools as being worthwhile.
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?
Thank you Maura! The simple solutions are often the best!
Love this info Diarmaid! And this is just GOLD!!:
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.
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.
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-792659
I 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.
Thank you Diarmaid, your solution has fixed it! You have been very helpful!