Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVGLoader: Holes in svg are sometimes rendered and sometimes not

See original GitHub issue

I’m using the SVGLoader to load a svg file and add it to my scene. In this svg I got text which has been transformed to paths in order for the SVGLoader to be able to display it properly. However some of the letters which have holes in them (e.g. ‘O’, ‘R’, ‘A’ or ‘B’) are inversed. This means the hole (or one of the holes, if there are two) is displayed as filled while the rest of the letter is transparent. Strangely this doesn’t happen to every letter.

I reduced the original svg to one with only two 'O’s in it, which appear to be rendered differently. In the image below you can see the correctly rendered letter in the top left corner and the bad one in the bottom right:

This is the svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="100%"
   height="100%"
   viewBox="0 0 2481 3508"
   version="1.1"
   xml:space="preserve"
   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
   id="svg260">
<g
   transform="matrix(149.696,0,0,149.696,1062.31,1180.11)"
   id="g114">
    <!-- The incorrectly rendered letter -->
    <path 
    d="
            M0.195,-0.354C0.195,-0.385 0.199,-0.416 0.206,-0.445
            C0.213,-0.474 0.224,-0.501 0.239,-0.524
            C0.254,-0.547 0.274,-0.565 0.299,-0.579
            C0.324,-0.592 0.354,-0.599 0.389,-0.599
            C0.424,-0.599 0.454,-0.592 0.479,-0.579
            C0.504,-0.565 0.524,-0.547 0.539,-0.524
            C0.554,-0.501 0.566,-0.474 0.573,-0.445
            C0.58,-0.416 0.583,-0.385 0.583,-0.354
            C0.583,-0.324 0.58,-0.295 0.573,-0.267
            C0.566,-0.238 0.554,-0.213 0.539,-0.19
            C0.524,-0.167 0.504,-0.149 0.479,-0.136
            C0.454,-0.122 0.424,-0.115 0.389,-0.115
            C0.354,-0.115 0.324,-0.122 0.299,-0.136
            C0.274,-0.149 0.254,-0.167 0.239,-0.19
            C0.224,-0.213 0.213,-0.238 0.206,-0.267
            C0.199,-0.295 0.195,-0.324 0.195,-0.354Z
            
            M0.038,-0.354
            C0.038,-0.302 0.046,-0.254 0.062,-0.209
            C0.078,-0.164 0.101,-0.124 0.131,-0.091
            C0.161,-0.058 0.198,-0.032 0.242,-0.013
            C0.285,0.007 0.334,0.016 0.389,0.016
            C0.444,0.016 0.494,0.007 0.537,-0.013
            C0.58,-0.032 0.617,-0.058 0.647,-0.091
            C0.677,-0.124 0.7,-0.164 0.716,-0.209
            C0.732,-0.254 0.74,-0.302 0.74,-0.354
            C0.74,-0.407 0.732,-0.457 0.716,-0.503
            C0.7,-0.548 0.677,-0.588 0.647,-0.622
            C0.617,-0.656 0.58,-0.683 0.537,-0.702
            C0.494,-0.721 0.444,-0.731 0.389,-0.731
            C0.334,-0.731 0.285,-0.721 0.242,-0.702
            C0.198,-0.683 0.161,-0.656 0.131,-0.622
            C0.101,-0.588 0.078,-0.548 0.062,-0.503
            C0.046,-0.457 0.038,-0.407 0.038,-0.354Z
            "
    style="fill:white;fill-rule:nonzero;"
    id="path112" />
</g>
<g
   transform="matrix(149.696,0,0,149.696,704.696,1055.79)"
   id="g48">
     <!-- The correctly rendered letter -->
    <path 
    d="
            M0.07,-0.257C0.07,-0.226 0.074,-0.197 0.083,-0.169
            C0.092,-0.14 0.104,-0.115 0.121,-0.093
            C0.138,-0.071 0.158,-0.054 0.183,-0.041
            C0.208,-0.028 0.236,-0.021 0.268,-0.021
            C0.3,-0.021 0.328,-0.028 0.353,-0.041
            C0.378,-0.054 0.398,-0.071 0.415,-0.093
            C0.432,-0.115 0.444,-0.14 0.453,-0.169
            C0.462,-0.197 0.466,-0.226 0.466,-0.257
            C0.466,-0.288 0.462,-0.317 0.453,-0.346
            C0.444,-0.374 0.432,-0.399 0.415,-0.421
            C0.398,-0.443 0.378,-0.46 0.353,-0.474
            C0.328,-0.487 0.3,-0.493 0.268,-0.493
            C0.236,-0.493 0.208,-0.487 0.183,-0.474
            C0.158,-0.46 0.138,-0.443 0.121,-0.421
            C0.104,-0.399 0.092,-0.374 0.083,-0.346
            C0.074,-0.317 0.07,-0.288 0.07,-0.257Z
            
            M0.032,-0.257
            C0.032,-0.294 0.037,-0.328 0.048,-0.361
            C0.058,-0.393 0.073,-0.421 0.093,-0.446
            C0.113,-0.471 0.138,-0.49 0.167,-0.505
            C0.196,-0.519 0.23,-0.526 0.268,-0.526
            C0.306,-0.526 0.34,-0.519 0.369,-0.505
            C0.398,-0.49 0.423,-0.471 0.443,-0.446
            C0.463,-0.421 0.478,-0.393 0.489,-0.361
            C0.499,-0.328 0.504,-0.294 0.504,-0.257
            C0.504,-0.22 0.499,-0.186 0.489,-0.153
            C0.478,-0.12 0.463,-0.092 0.443,-0.068
            C0.423,-0.043 0.398,-0.024 0.369,-0.01
            C0.34,0.005 0.306,0.012 0.268,0.012
            C0.23,0.012 0.196,0.005 0.167,-0.01
            C0.138,-0.024 0.113,-0.043 0.093,-0.068
            C0.073,-0.092 0.058,-0.12 0.048,-0.153
            C0.037,-0.186 0.032,-0.22 0.032,-0.257Z
            "
    style="fill:white;fill-rule:nonzero;"
    id="path46" />
</g>
</svg>

Probably helpful to know: The problem still is there if you swap the contents of the ‘m’ parameters of both paths. Meaning that it probably isn’t caused by the transformation matrices of the groups. Also the svg is rendered perfectly fine in Inkscape or when opened directly in chrome.

The behaviour is the same on all platforms and browser I tested which are: