SVG images with animation won't animate

[a_symons]

Many of the ideas tutors attempt to communicate to students have a temporal element that is not easily included in static images.  While you have now allowed svg images to be embedded using the rich content editor, the way you have done this using a 'preview' stops any animation from taking place within the browser.  Animation within SVG images is now extremely well supported across browsers, so could you please simply embed the image as it is in a Canvas page?

[ProfessorBeyrer · Accepted solution]

I don't think Canvas will support animating SVG files, @a_symons. The <svg> tag is not on the Canvas HTML Editor Allowlist, and any scripting within the Rich Content Editor is also not allowed. If creating an animated GIF is not an option, consider hosting those files elsewhere and making them appear in Canvas using an <iframe>.

[a_symons]

I have tried this, but files shared from my OneDrive account are blocked so I cannot host them from there.  I have also attempted to use the Files area for the course and use an iFrame to view the html file that contains the svg, but it keeps embedding the page within a canvas page within the outer canvas page.  This behaviour was noted by the following.

marchermon

Community Participant

 ‎01-13-2022 09:59 AM

Does this not work anymore? I completely understand everything here but I never can get just the html file to be embedded. It's always the canvas page embedded within the canvas page. I'm thinking that there has been a change in Canvas that doesn't let this work as expected anymore?

Is there a way of having a html document in the Canvas course files area included within an iframe without the canvas header and menu etc included?

Any help will be much appreciated

[ProfessorBeyrer]

It used to be possible to do what you describe -- put an HTML file inside the /files area of a course and then <iframe> elsewhere -- but I believe that Instructure has also limited our ability to do that. Scripts have to be hosted elsewhere and then an <iframe> can be used to embed them inside Canvas. A retired colleague of ours (@lauragibbs) is an expert on this, and her publicly viewable Canvas course has details and lots of examples:

Laura's Widget Warehouse

[a_symons]

Spoiler

Can you tell me why Instructure has blocked files on an Institutional OneDrive as a src for an iFrame, even though it is secure (https); or is this a setting of my own institution?  Can you tell me why Instructure stops users from effectively using the file storage and web-serving features of Canvas, that our students ultimately pay for, to host learning resources such as SVG's within a basic html page?  Can you tell me why SVG's are not treated as first-class citizens on a web-page that is served by Canvas?  If there are pertinent security issues, then I would understand that, but for the life of me I cannot, for example, see any security differences between a .html file stored and served from the files area of a course on Canvas and one stored and served from 'elsewhere'?  

I really would appreciate any help that will solve this problem, without the need to increase the costs of an institution by causing them to buy a further web hosting service.

Best wishes

Andy

[ProfessorBeyrer]

I wish I could answer those questions but unfortunately don't know enough about the security policies of Instructure or Microsoft. I think contacting your local Canvas admin and/or customer success manager is the best option.