[ARCHIVED] Math Equations renders incompatible SVG?

philip_brands
Community Member
‎10-02-2020 05:49 PM

We created an LTI provider that renders the Canvas Course modules (Quizzes, Assignments, etc.) to PDF. There seems to be a compatibility problem with the rendered SVG images from Math Equations from the Rich HTML Editor.

What we do:

  • Fetch the Course modules from API in our back end
  • Resolve all image (including svg) content from the returned output
  • Save them to temporary files and alter the image-tag's src attribute to match the local file
  • Render the altered HTML output to PDF (with php tcpdf)
  • Upload the PDF to Canvas Course Files
  • And offer a link to that PDF as download

Problem:

  • Math equation SVG's from Canvas API output are not rendered correctly in HTMLtoPDF
  • Math equation SVG's from Canvas API output are not opened correctly in Adobe Illustrator
  • Math equation SVG's from Canvas API output are not rendered correctly converted to bitmap by rsvg-convert

Schermafbeelding 2020-10-03 om 01.33.37.png

 

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="8.537ex" height="6.176ex" style="vertical-align: -2.838ex;"
     viewBox="0 -1437.2 3675.8 2659.1" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path stroke-width="1" id="E1-MJMAIN-32"
              d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-34"
              d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-F7"
              d="M318 466Q318 500 339 518T386 537Q418 537 438 517T458 466Q458 438 440 417T388 396Q355 396 337 417T318 466ZM56 237T56 250T70 270H706Q721 262 721 250T706 230H70Q56 237 56 250ZM318 34Q318 68 339 86T386 105Q418 105 438 85T458 34Q458 6 440 -15T388 -36Q355 -36 337 -15T318 34Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-221A"
              d="M95 178Q89 178 81 186T72 200T103 230T169 280T207 309Q209 311 212 311H213Q219 311 227 294T281 177Q300 134 312 108L397 -77Q398 -77 501 136T707 565T814 786Q820 800 834 800Q841 800 846 794T853 782V776L620 293L385 -193Q381 -200 366 -200Q357 -200 354 -197Q352 -195 256 15L160 225L144 214Q129 202 113 190T95 178Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-33"
              d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-31"
              d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-D7"
              d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-3D"
              d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
    </defs>
    <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
        <g transform="translate(120,0)">
            <rect stroke="none" width="2379" height="60" x="0" y="220"></rect>
            <g transform="translate(88,583)">
                <use transform="scale(0.574)" href="#E1-MJMAIN-33" x="209" y="553"></use>
                <use transform="scale(0.707)" href="#E1-MJMAIN-221A" x="0" y="4"></use>
                <rect stroke="none" width="1612" height="42" x="589" y="527"></rect>
                <g transform="translate(589,0)">
                    <use transform="scale(0.707)" href="#E1-MJMAIN-32"></use>
                    <use transform="scale(0.707)" href="#E1-MJMAIN-34" x="500" y="0"></use>
                    <use transform="scale(0.707)" href="#E1-MJMAIN-F7" x="1001" y="0"></use>
                    <use transform="scale(0.707)" href="#E1-MJMAIN-32" x="1779" y="0"></use>
                </g>
            </g>
            <g transform="translate(60,-700)">
                <use transform="scale(0.707)" href="#E1-MJMAIN-31"></use>
                <use transform="scale(0.707)" href="#E1-MJMAIN-33" x="500" y="0"></use>
                <use transform="scale(0.707)" href="#E1-MJMAIN-D7" x="1001" y="0"></use>
                <use transform="scale(0.707)" href="#E1-MJMAIN-32" x="1779" y="0"></use>
                <g transform="translate(1612,0)">
                    <g transform="translate(120,0)">
                        <rect stroke="none" width="407" height="60" x="0" y="146"></rect>
                        <use transform="scale(0.574)" href="#E1-MJMAIN-31" x="104" y="647"></use>
                        <use transform="scale(0.574)" href="#E1-MJMAIN-33" x="104" y="-697"></use>
                    </g>
                </g>
            </g>
        </g>
        <use href="#E1-MJMAIN-3D" x="2897" y="0"></use>
    </g>
</svg>

 

 

 

Workaround:

  • replace all `href="#..."` attributes to `xlink:href="#..."` 

Schermafbeelding 2020-10-03 om 01.33.57.png

 

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="8.537ex" height="6.176ex" style="vertical-align: -2.838ex;"
     viewBox="0 -1437.2 3675.8 2659.1" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path stroke-width="1" id="E1-MJMAIN-32"
              d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-34"
              d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-F7"
              d="M318 466Q318 500 339 518T386 537Q418 537 438 517T458 466Q458 438 440 417T388 396Q355 396 337 417T318 466ZM56 237T56 250T70 270H706Q721 262 721 250T706 230H70Q56 237 56 250ZM318 34Q318 68 339 86T386 105Q418 105 438 85T458 34Q458 6 440 -15T388 -36Q355 -36 337 -15T318 34Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-221A"
              d="M95 178Q89 178 81 186T72 200T103 230T169 280T207 309Q209 311 212 311H213Q219 311 227 294T281 177Q300 134 312 108L397 -77Q398 -77 501 136T707 565T814 786Q820 800 834 800Q841 800 846 794T853 782V776L620 293L385 -193Q381 -200 366 -200Q357 -200 354 -197Q352 -195 256 15L160 225L144 214Q129 202 113 190T95 178Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-33"
              d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-31"
              d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-D7"
              d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path>
        <path stroke-width="1" id="E1-MJMAIN-3D"
              d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
    </defs>
    <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
        <g transform="translate(120,0)">
            <rect stroke="none" width="2379" height="60" x="0" y="220"></rect>
            <g transform="translate(88,583)">
                <use transform="scale(0.574)" xlink:href="#E1-MJMAIN-33" x="209" y="553"></use>
                <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-221A" x="0" y="4"></use>
                <rect stroke="none" width="1612" height="42" x="589" y="527"></rect>
                <g transform="translate(589,0)">
                    <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32"></use>
                    <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-34" x="500" y="0"></use>
                    <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-F7" x="1001" y="0"></use>
                    <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="1779" y="0"></use>
                </g>
            </g>
            <g transform="translate(60,-700)">
                <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-31"></use>
                <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-33" x="500" y="0"></use>
                <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-D7" x="1001" y="0"></use>
                <use transform="scale(0.707)" xlink:href="#E1-MJMAIN-32" x="1779" y="0"></use>
                <g transform="translate(1612,0)">
                    <g transform="translate(120,0)">
                        <rect stroke="none" width="407" height="60" x="0" y="146"></rect>
                        <use transform="scale(0.574)" xlink:href="#E1-MJMAIN-31" x="104" y="647"></use>
                        <use transform="scale(0.574)" xlink:href="#E1-MJMAIN-33" x="104" y="-697"></use>
                    </g>
                </g>
            </g>
        </g>
        <use xlink:href="#E1-MJMAIN-3D" x="2897" y="0"></use>
    </g>
</svg>

 

 

The incorrect rendering seems to be due to an svg/xml internal reference that most web-browsers accept, but applications that enforce w3c SVG standards  will not.

Labels (2)
Labels
0 Likes