Inline SVG code display issues

Inline SVG code display issues

by Nick Gault -
Number of replies: 0

I am trying to get inline SVG display to work but it it only works for some files.

For example,  this code entered into the HTML editor displays correctly:

<p><svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red"></rect> <circle cx="150" cy="100" r="80" fill="green"></circle> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg></p>


Whereas this code will display correctly in preview but only shows a black outline in the page:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140">

  <defs><style>  .cls-1 { fill: #ff0;  }  .cls-2 {

        stroke: #ff0; stroke-miterlimit: 10;} </style>

  </defs>

  <title>Untitled-2</title>

  <circle class="cls-1" cx="70" cy="70" r="70"/>

  <circle class="cls-2" cx="39.28" cy="51.25" r="14.75"/>

  <circle class="cls-2" cx="100.75" cy="51.25" r="14.75"/>

</svg>

I presume Moodle is stripping out some of the code, my question is how do I stop it or how do I write SVG code that Moodle will allow in a course page?


Average of ratings: -