cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Add SVG Images to Content Pages

Add SVG Images to Content Pages

(2)

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) 

6 Comments
mmoore1
Community Contributor

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

Stefanie
Community Team
Community Team
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

Awesome!

Stefanie
Community Team
Community Team
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

Stefanie
Community Team
Community Team

@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 

About Idea Conversations
In the Instructure Community Ideas space, you can share, converse, and rate idea conversations related to software improvements to Instructure products.