Overview
Are you looking to add attractive and scalable graphics to your courses? SVG, which stands for Scalable Vector Graphics, is a vector-based graphics format used to display images on the web. Unlike raster images (such as JPEG or PNG), SVG images are resolution-independent, meaning they can be scaled up or down without losing quality.
Adding SVG Image as a Course Block
You can add an SVG image as a content block to a course step as you would add any other allowed type of image.
Adjusting SVG Attributes (viewBox, height, width)
SVG images have a "viewBox" attribute that defines the coordinate system and dimensions of the SVG image. You can adjust the viewBox to specify which part of the SVG image to display. Additionally, you can set the height and width attributes to control the size of the SVG image.
Example:
<svg viewBox="0 0 100 100" height="100" width="100">
</svg>
In the example above, the viewBox is set to "0 0 100 100", which means the SVG image will be displayed at a size of 100x100 units. The height and width are set to "200" each, which means the displayed SVG image will be scaled to a size of 200x200 pixels on the web page.
Accessibility Considerations
To ensure accessibility, you can provide clear and descriptive alt text for your SVG images. This helps screen readers convey the content of the images to users with visual impairments.
Example of Alt Text:
<svg viewBox="0 0 100 100" height="200" width="200" alt="A descriptive text of the SVG image"> </svg>