Thanks for reaching out, David! I also saw you submitted a support case and this is something our team has identified as a bug. We're looking into it now - but in the meantime, you'd need to use another image type to not see this behavior.
I've had this problem too since the beginning of Rise - interested to see if there's a solution! My SVG's are created in Illustrator - is there an export setting that is making it shrink?
Thanks for checking in, Dorte! Really sorry for the headaches this bug is causing.
Our team is still looking into the SVG image shrinking issue, and we’ll post all updates here once we have them. Thanks for hanging tight while we try to nail down what’s going on!
Further to this issue I've since had it brought to my attention that SVGs with text don't always display correctly, i.e. the kerning goes awry and text doesn't display as intended. To get around this I've had to convert the text to paths.
Thanks for letting us know this is impacting your courses as well, Steve. I'll add your findings to our report. As soon as this is sorted out, we'll notify everyone here!
I hope this gets resolved soon! I have a course coming up in the next week with detailed illustrations where it would be really good if the graphics looked good as blocks and zoomed in.
I figured out a work around where you can actually use high res images without quality loss.
I will also test out SVG's to see if there is a noticeable difference.
I wrote a post on this, here is a copy:
For all those experiencing this problem I found a straight forward workaround that's very easy and will give you 100% full quality image resolution without any loss at all.
Whether you save for scorm or tin can or web the zipped files that are produced contain:
If saved for scorm a folder named: scormcontent > assets
In this folder are all the images you used in your course simply find the image that was loosing quality and replace it with the original image - be sure to name it with the same name as the one your replacing. Simple as that.
If save for web, go into: content > assets
In this folder pretty much do the same as the above direction.
Quick update to the above post:
Make sure to use a (.jpg) extension for the new image which you paste in the folder. This is the extension that gets written in the final files. If you use an image that happens to be a (.png) for example it won't take it and the image will look broken or missing even though you named it the exact name and that's because in the code RISE writes a (.jpg) extension.
Thanks Daniel, that's a handy trick to keep up my sleeve if needs be.
I usually try to avoid post-publish mods where I can as it's more likely I'll introduce an error in to my work this way and it makes updates to content more long-winded. I guess there's a filesize consideration here too.
I don’t currently have any updates, but you are now subscribed to this conversation which means as we share updates here, you’ll automatically be notified.
I've managed to fix this for my workflow. I was saving svg file out of Adobe Illustrator and having the same problem with the SVG showing fine in an image with text, but shrinking to nothing when clicked on instead of zooming in.
Turning off the responsive option when saving the file worked to fix this, so the SVG would zoom to it's original/edited size.
The only real change I can see in the svg code in the file is it added id and width and height attributes in pixels to the svg tag.
23 Replies
Thanks for reaching out, David! I also saw you submitted a support case and this is something our team has identified as a bug. We're looking into it now - but in the meantime, you'd need to use another image type to not see this behavior.
I usually do use another file format but having seen how amazingly crisp SVGs are in Rise I'm desperate to be able to use them!
I've had this problem too since the beginning of Rise - interested to see if there's a solution! My SVG's are created in Illustrator - is there an export setting that is making it shrink?
Hi Nisha,
It's an issue in Rise, but our team is looking into it, so I'll let you know as soon as it's fixed.
In the meantime, if you were able to use another image file it wouldn't shrink.
Hi, we also use SVG in Rise and experienced this problem. Is there any solution to this?
Thanks for checking in, Dorte! Really sorry for the headaches this bug is causing.
Our team is still looking into the SVG image shrinking issue, and we’ll post all updates here once we have them. Thanks for hanging tight while we try to nail down what’s going on!
The only work around I've found so far is to disable the image zoom where possible.
Just discovered this problem myself. I will switch to a png for now. But would love to be able to use svg.
Further to this issue I've since had it brought to my attention that SVGs with text don't always display correctly, i.e. the kerning goes awry and text doesn't display as intended. To get around this I've had to convert the text to paths.
Converting the text to paths is one way around it.
You should be able to get the svg to call a web font but I've not gotten this to work in RISE
Thanks for letting us know this is impacting your courses as well, Steve. I'll add your findings to our report. As soon as this is sorted out, we'll notify everyone here!
I hope this gets resolved soon! I have a course coming up in the next week with detailed illustrations where it would be really good if the graphics looked good as blocks and zoomed in.
Hi Nisha,
Sorry, we don't have an update on this for you just yet! As soon as we do, we'll post here so that you're notified right away.
Hey David,
I figured out a work around where you can actually use high res images without quality loss.
I will also test out SVG's to see if there is a noticeable difference.
I wrote a post on this, here is a copy:
For all those experiencing this problem I found a straight forward workaround that's very easy and will give you 100% full quality image resolution without any loss at all.
Whether you save for scorm or tin can or web the zipped files that are produced contain:
If saved for scorm a folder named: scormcontent > assets
In this folder are all the images you used in your course simply find the image that was loosing quality and replace it with the original image - be sure to name it with the same name as the one your replacing. Simple as that.
If save for web, go into: content > assets
In this folder pretty much do the same as the above direction.
Quick update to the above post:
Make sure to use a (.jpg) extension for the new image which you paste in the folder. This is the extension that gets written in the final files. If you use an image that happens to be a (.png) for example it won't take it and the image will look broken or missing even though you named it the exact name and that's because in the code RISE writes a (.jpg) extension.
Hack #101 from Daniel - more hacks to come :)
Reach out to me if you need any help.
Daniel
https://community.articulate.com/discussions/rise/poor-image-quality-when-uploading-an-image-with-rise?page=3#reply-534999
That's interesting, I hadn't realised it was necessary to call fonts in SVGs until your post, thanks for that.
Thanks Daniel, that's a handy trick to keep up my sleeve if needs be.
I usually try to avoid post-publish mods where I can as it's more likely I'll introduce an error in to my work this way and it makes updates to content more long-winded. I guess there's a filesize consideration here too.
any update on SVG resize on zoom?
+1
Hi Craig and Jim,
I don’t currently have any updates, but you are now subscribed to this conversation which means as we share updates here, you’ll automatically be notified.
Thanks for your questions and feedback!
I've managed to fix this for my workflow. I was saving svg file out of Adobe Illustrator and having the same problem with the SVG showing fine in an image with text, but shrinking to nothing when clicked on instead of zooming in.
Turning off the responsive option when saving the file worked to fix this, so the SVG would zoom to it's original/edited size.
The only real change I can see in the svg code in the file is it added id and width and height attributes in pixels to the svg tag.
Code which didn't work:
Code which does work:
I've attached a couple of SVGs which demonstrate this.
Hi David, your fix works for me too, thanks so much for posting it!
Hi David, that's good to hear, I'm glad it was helpful :)
Thank you for this. I want to add that I was having very bad results with blend modes in my artwork until I found an illustrator article about using export for screens instead of 'Save as' at https://community.adobe.com/t5/illustrator/why-does-exporting-svgs-change-the-transparency-layer-s-to-normal/td-p/10438398. Keep it in your toolbox for future projects. To add it does support 'overlay' mode too.