use of SVG image in Rise behaving strangely in different device and browser

Apr 13, 2022

SibaPrasad Padhi
By SibaPrasad Padhi

Can Articulate fix the issue of rendering SVG images in Rise, as its show differently in differently in iOS devices and browsers. The text formats in the SVG images do not show properly in the devices and also the bullet points also do not render properly and shows as boxes. Is there any standard/guide how to fix this?

4 Replies
Nisha Makan
2 years ago04/13/22 at 5:21 pm (UTC)

Like the article above says, you need to outline your text (so it becomes a shape) instead of putting the editable version in. 

A few tips for SVGs in Adobe Illustrator:

  • Copy the editable text to a separate layer in illustrator and then hide the layer. This means that the editable text won’t be exported to the SVG but you still have a copy you can change if you need to edit the text later on.
  • If you have any images i.e. photos in your SVG (which is unlikely, but on the off chance you do) make sure they are embedded in the document - not linked.
  • When you export your image ensure you uncheck the 'Minify' box so that the 'Enable zoom on image click' behaves correctly in Rise.
  • Test your module (when it comes to testing after initial build) in an incognito browser window to ensure all of the text is outlined and there isn’t any parts that you’ve missed. 
Sign In to Reply