Configuring Scoring Icons

When rendering Learnosity reports, you can choose to render the scoring icons with the SVG format, instead of the default HTML5 icons. This provides a number of advantages:

  • The icons are slightly larger,
  • The icons are a visual graphic to indicate the scoring status, which is not dependent on the user's color perception, 
  • The icons will scale up and down smoothly at different zoom levels, 
  • SVG fully supports screen readers, so that the names of each scoring status can be extracted from the page data and read by the screen reader, and
  • There can be a rendering performance improvement when using SVG over HTML5 canvas elements.

The following table explains the possible states that can be used in this report, and what the icon will look like depending on whether you have the useSVG configuration option set to true. 


Table 1: visual chart of the SVG and HTML5 scoring icon appearance.

Screenshot 2024-04-29 at 12.30.20 PM.png


This affects the the following report types:


For more information on selecting this option, see the article on the useSVG configuration option.

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.