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.

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

See original GitHub issue

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>

Issue Analytics

State:
Created 8 years ago
Comments:6

Top GitHub Comments

2reactions

timfishcommented, Aug 11, 2016

recognizeSelfClosing: true appears to work

1reaction

YouHan26commented, Aug 10, 2016

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

Top Results From Across the Web

Avoid self-closing tags in cheerio

Show activity on this post. Try using selfClosingTags: false. const $ = cheerio.load(content, { xmlMode: true, selfClosingTags: false });.

Icon System with SVG Sprites

I've been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn...

SVG defs are rendered, despite the svg being hidden as well

Status: WontFix (Closed) Components: Blink>SVG ... height: auto; ... the `g` being in a `defs` tag in a hidden svg with `display: none`....

microeconomics ( chapter 6 and 7) Flashcards

Study with Quizlet and memorize flashcards containing terms like if a 16 percent increase in the price of Cheerios causes a 25 percent...

Untitled

See all open sight dovetail. Srt 5505 mhp? Saab 9-5 aero hirsch exhaust, Homer ilijada 1 pjevanje analiza, Encyklopedia wiem 2007, Transcript broward ......