Cheerio: Cheerio moves self closing defs tags in SVG causing nothing to display

[timfish]

All my SVG images no longer display in Chrome once inlined into HTML with cheerio 0.19.

The self closing empty defs tag <defs id="defs14" /> has been closed after all the paths. With all the paths now contained in the defs tag they are no longer displayed.

Before:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   height="135.41896"
   width="135.41896"
   id="svg2"
   xml:space="preserve"
   enable-background="new 0 0 60 100"
   viewBox="0 0 135.41896 135.41896"
   y="0px"
   x="0px"
   version="1.1">
<metadata id="metadata16"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
<defs id="defs14" />
<path id="path4" d="M 68.589358,96.528086 86.974134,78.143309 c 1.561999,-1.561998 1.561999,-4.094855 0,-5.656854 -1.561999,-1.561999 -4.094855,-1.561999 -5.656854,0 L 62.932504,90.871232 44.547727,72.486455 62.932504,54.101679 c 1.561999,-1.561999 1.561999,-4.094856 0,-5.656854 -1.561999,-1.561999 -4.094856,-1.561999 -5.656854,0 L 38.890873,66.829601 32.526912,60.46564 21.213204,71.779348 C 10.950256,82.042296 9.6788776,97.889973 17.396241,109.53744 L 0,126.93368 8.4852813,135.41896 25.881523,118.02272 c 11.647463,7.71736 27.49514,6.44598 37.758088,-3.81697 l 11.313708,-11.3137 -6.363961,-6.363964 z" />
<path id="path6" d="m 102.89204,74.953321 11.31372,-11.313712 c 10.26295,-10.262948 11.53433,-26.110625 3.81696,-37.758088 L 135.41896,8.48528 126.93368,0 109.53744,17.396239 C 97.889972,9.67888 82.042292,10.95025 71.779342,21.213202 l -11.3137,11.313708 c 41.502088,41.502087 0.33001,0.330023 42.426398,42.426411 z" />
</svg>

And after

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" 
   xmlns:cc="http://creativecommons.org/ns#" 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   height="135.41896" 
   width="100px"
   id="smthn" 
   xml:space="preserve" 
   enable-background="new 0 0 60 100" 
   viewbox="0 0 135.41896 135.41896" 
   y="0px" 
   x="0px" v
   version="1.1" 
   class="svg">
<metadata id="metadata16"><rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"><dc:title/></dc:type></cc:work></rdf:rdf></metadata>
<defs id="defs14">
<path id="path4" d="M 68.589358,96.528086 86.974134,78.143309 c 1.561999,-1.561998 1.561999,-4.094855 0,-5.656854 -1.561999,-1.561999 -4.094855,-1.561999 -5.656854,0 L 62.932504,90.871232 44.547727,72.486455 62.932504,54.101679 c 1.561999,-1.561999 1.561999,-4.094856 0,-5.656854 -1.561999,-1.561999 -4.094856,-1.561999 -5.656854,0 L 38.890873,66.829601 32.526912,60.46564 21.213204,71.779348 C 10.950256,82.042296 9.6788776,97.889973 17.396241,109.53744 L 0,126.93368 8.4852813,135.41896 25.881523,118.02272 c 11.647463,7.71736 27.49514,6.44598 37.758088,-3.81697 l 11.313708,-11.3137 -6.363961,-6.363964 z"/>
<path id="path6" d="m 102.89204,74.953321 11.31372,-11.313712 c 10.26295,-10.262948 11.53433,-26.110625 3.81696,-37.758088 L 135.41896,8.48528 126.93368,0 109.53744,17.396239 C 97.889972,9.67888 82.042292,10.95025 71.779342,21.213202 l -11.3137,11.313708 c 41.502088,41.502087 0.33001,0.330023 42.426398,42.426411 z"/>
</defs></svg>

[timfish]

I also see that xmldom is doing the same breaking modifications to my SVG's so I need to check how valid they are. They're all unmodified plain SVG straight out of Inkscape.

[timfish]

ps. I've tried xmlMode and it didn't make a difference

[gka]

same problem with other self-closing svg elements

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 720 1016.392" style="enable-background:new 0 0 720 1016.392;" xml:space="preserve">
<g id="Layer_1">
    <g>
        <circle style="fill:#EB3D1A;" cx="250.869" cy="453.552" r="3.186"/>
        <line style="fill:none;stroke:#EB3D1A;stroke-width:0.843;" x1="250.869" y1="451.904" x2="393.405" y2="415.265"/>
        <line style="fill:none;stroke:#EB3D1A;stroke-width:0.843;" x1="250.869" y1="458.276" x2="250.869" y2="476.727"/>
    </g>
</g>
</svg>

result of cheerio.load(svgText).html():

</svg>"L</g>_1"><line style="fill:none;stroke:#EB3D1A;stroke-width:0.843;" x1="250.869" y1="458.276" x2="250.869" y2="476.727"/>0 1016.392" style="enable-background:new 0 0 720 1016.392;" xml:space="preserve">

version 0.19.0

[gka]

actually, I take it back. was just too stupid to realize that I need { xmlMode: true }

[YouHan26]

@gka @timfish I tried to set xmlMode true, It failed also. after find the options api of htmlpaser2,
add recognizeSelfClosing: true will work

[timfish]

recognizeSelfClosing: true appears to work