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
Olga Konstantinidou

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?


Tim St. Clair

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

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.

<svg version="1.1" width="800" height="600" ...