Add SVG Images to Content Pages

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) 

8 Comments
mmoore1
Community Contributor

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

Stef_retired
Instructure Alumni
Instructure Alumni
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
Community Participant
Author

Awesome!

Stef_retired
Instructure Alumni
Instructure Alumni
Status changed to: Completed
 
danaleeling
Community Participant

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
Instructure Alumni
Instructure Alumni

@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 

KristinL
Community Team
Community Team
Status changed to: New
 
KristinL
Community Team
Community Team
Status changed to: Completed