Add SVG Images to Content Pages

[swolf]

It would be great to have the ability to embed SVG image types using the rich content editor for content pages, assignment instructions, quiz questions, etc. Since SVGs are vector-based they perform nicely on mobile and web-browsers, without having to worry about images becoming pixelated. They are also potentially more accessible, as virtually any element within an SVG image can be given alt text via title and aria attributes. Plus, they are generally smaller and faster when it comes to webpage load times. 

This idea has been developed and deployed to Canvas

For more information, please read through the Canvas Deploy Notes (2020-07-01) 

[mmoore1]

In addition, there are math teaching applications and creations that could benefit from this ability.  

[Stef_retired]

Comments from Instructure

SVG files are treated as images in the New Rich Content Editor. For more information, please read through the https://community.canvaslms.com/docs/DOC-26933-canvas-deploy-notes-2020-07-01 

[swolf]

Awesome!

[danaleeling]

The HTML view in the RCE cannot directly consume SVG code on a copy and paste of HTML5+SVG. The work around is to copy out the SVG code, add an xml namespace, upgrade the code to SVG 2.0 compliance, and then save the file as an SVG file. That file can then be brought in as an image into the RCE. Note the RCE does now render MathML via the MathJax library, so MathML can be copied and pasted in with HTML provided both are valid as per HTML5 and MathML standards. A video on the process of moving SVG code into Canvas RCE is available at:
https://www.youtube.com/watch?v=5x9a7wYTSp8

[Stef_retired]

@danaleeling  The completed idea allows SVG images to uploaded to the RCE in the same manner as other supported image files. If you're interested in seeing SVG code support added to the RCE HTML editor, please add your comment and rating to Allow inline SVG - Canvas Community