Rise - Labelled graphic and SVG?

Mar 18, 2021

Rise lets you use SVG graphics in most places which are great for crisp graphics on more platforms - but there are problems using them in the editor. For instance on a labelled graphic, my currently workflow is to make a jpeg version and put this into the editor to move the markers around, then replace the jpeg with the svg version. If I then need to go back in to edit a marker, Rise doesn't know how to render the SVG and so draws it as a 1 pixel image. Is there a way to get it working with SVG images?

7 Replies

Lea Agato
Staff

3 years ago03/18/21 at 2:18 pm (UTC)

Hi there Tim! We'd love to help you troubleshoot this issue. Would you mind sharing your SVG file here? Thanks!

Olga Konstantinidou

over 1 year ago08/12/22 at 6:54 pm (UTC)

Hello, I also have the same issue. Once I upload the svg file as a background, I get a 503 error and this message when inspecting the page:

Access to image at 'https://images.articulate.com/f:png,w:1920,s:cover,q:65/rise/courses/hbVbalX1QHGyOWw-iy8bc9r8zD7kxoqf/transcoded-HADamntBWm2IPFDR-Equipment-00001.png' from origin 'https://rise.articulate.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there any solution?

Thanks.

over 1 year ago08/25/22 at 6:03 am (UTC)

Hi Olga! Would you be able to share the image with us here? Or you can also open a case with us through this link.

Olga Konstantinidou

over 1 year ago08/26/22 at 3:05 pm (UTC)

Hi Hazel,

Here is the image.

FYI: This image was created in Illustrator and exported to SVG.

Thanks for your help.

Artboard_1.svg

over 1 year ago09/07/22 at 6:01 am (UTC)

Thanks Olga for sharing the .svg file. I am getting the same error. When I try to open the file to edit it, it says it is not a valid .svg file.

Tim St. Clair
Author

1 year ago02/05/23 at 5:37 am (UTC)

I came back to this months later after using more and more SVG in my courses and kept getting random problems with SVG's. Sometimes they would shrink. Sometimes some of the content within them would disappear.

I eventually discovered that Rise applies "image compression" to things you upload, and their compressor sometimes utterly trashes SVG contents. For instance, if an element has an opacity of 0 then the whole element is deleted from the resulting svg, even if that element was going to be animated to be opacity 1 at some point (the workaround being to set attribute values to "0.001" instead of "0"). Sometimes if the file has no viewBox and instead uses width/height the file shrinks to 1 pixel. Sometimes if you have used transform on a node the attribute is simply removed, ruining the layout.

Adding _NOPROCESS_ to the filename (e.g. map.svg becomes map_NOPROCESS_.svg) prevents the "optimiser / file-content-destroyer" from running on the svg upload and therefore the file tends to work.

Phil Foss

1 year ago02/27/23 at 3:24 pm (UTC)

Thats good to know @Tim thanks for the info. I was pleasantly surprised I was able to upload an animated svg file.

Concerning the occasional sizing issue where the svg becomes a 1x1 pixel, in your svg file you could try editing the code and making sure there is a native size specified in the first line of code. If this is not in your file, some browsers will not know what size it should be, so it becomes a 1x1 image.