critical: SVG Images in the HTML Broken After Critical
Hello all,
I am having an interesting issue in my latest project. When I trigger Critical to inject the critical styles in my html (dest: ‘_site/index.html’) it breaks my SVG logo image. Here is the image before:
<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 563 87.9" enable-background="new 0 0 563 87.9" xml:space="preserve" width="167px" height="26px" fill="#fff">
<g>
<g>
<path d="M137.6,23.6h-15.7v-3.1h34.8v3.1H141v42h-3.3V23.6z"/>
<path d="M173.3,20.5h18.9c5.5,0,10,1.7,12.7,4.4c2.1,2.1,3.4,5.1,3.4,8.4v0.1c0,7.5-5.6,11.8-13.2,12.9L210,65.6h-4.2l-14.4-18.7h-0.1h-14.6v18.7h-3.3V20.5z M191.8,43.9c7.5,0,13.1-3.8,13.1-10.3v-0.1c0-6-4.8-9.8-12.9-9.8h-15.4v20.3H191.8z"/>
<path d="M225.6,46.9V20.5h3.3v26c0,10.6,5.7,16.7,15.3,16.7c9.1,0,15-5.5,15-16.4V20.5h3.3v25.9c0,12.9-7.5,19.8-18.5,19.8C233.2,66.3,225.6,59.5,225.6,46.9z"/>
<path d="M281.6,20.5h32.1v3.1H285v17.7h25.8v3.1H285v18.1h29v3.1h-32.4V20.5z"/>
<path d="M326.1,20.5H337l11.8,31.7l11.8-31.7h10.7L353,65.9h-8.8L326.1,20.5z"/>
<path d="M393.6,20.2h9.1l19.3,45.4h-10.4l-4.1-10.1h-19.1l-4.1,10.1h-10.1L393.6,20.2z M404.1,46.7l-6-14.6l-6,14.6H404.1z"/>
<path d="M433.2,46.3V20.5h9.9V46c0,7.3,3.7,11.1,9.7,11.1c6.1,0,9.7-3.7,9.7-10.8V20.5h9.9V46c0,13.6-7.7,20.3-19.8,20.3C440.6,66.3,433.2,59.5,433.2,46.3z"/>
<path d="M489,20.5h9.9v36h22.5v9H489V20.5z"/>
<path d="M539.3,29.7h-13.7v-9.1H563v9.1h-13.7v35.9h-9.9V29.7z"/>
</g>
<g>
<path d="M63.9,17.6H35.5L22.8,36.5l26.8,26.5l26.8-26.6L63.9,17.6z M60.1,41.1l-0.5,1l-0.4,0.6l-0.7-0.4l-6.7-3.7c-0.6,0.6-1.4,0.9-2.3,0.9c-0.9,0-1.7-0.3-2.3-0.9l-6.7,3.7L40,42.7l-0.4-0.6l-0.5-1l-0.4-0.7l0.7-0.4l6.9-3.8c0,0,0,0,0,0c0-1.3,0.8-2.5,2-3v-7v-0.7H49h1.1h0.7v0.7v7c1.2,0.5,2.1,1.7,2.1,3.1c0,0,0,0,0,0l6.9,3.8l0.7,0.4L60.1,41.1z"/>
<path d="M73.3,0H26.1L0,38.8l49.6,49.1L99,38.8L73.3,0zM49.6,67.8L18.5,37l15.3-22.7h31.9l15,22.6L49.6,67.8z"/>
</g>
</g>
</svg>
And here is the image after:
<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 563 87.9" enable-background="new 0 0 563 87.9" xml:space="preserve" width="167px" height="26px" fill="#fff">
<g>
<g>
<path d="M137.6,23.6h-15.7v-3.1h34.8v3.1H141v42h-3.3V23.6z">
<path d="M173.3,20.5h18.9c5.5,0,10,1.7,12.7,4.4c2.1,2.1,3.4,5.1,3.4,8.4v0.1c0,7.5-5.6,11.8-13.2,12.9L210,65.6h-4.2l-14.4-18.7h-0.1h-14.6v18.7h-3.3V20.5z M191.8,43.9c7.5,0,13.1-3.8,13.1-10.3v-0.1c0-6-4.8-9.8-12.9-9.8h-15.4v20.3H191.8z">
<path d="M225.6,46.9V20.5h3.3v26c0,10.6,5.7,16.7,15.3,16.7c9.1,0,15-5.5,15-16.4V20.5h3.3v25.9c0,12.9-7.5,19.8-18.5,19.8C233.2,66.3,225.6,59.5,225.6,46.9z">
<path d="M281.6,20.5h32.1v3.1H285v17.7h25.8v3.1H285v18.1h29v3.1h-32.4V20.5z">
<path d="M326.1,20.5H337l11.8,31.7l11.8-31.7h10.7L353,65.9h-8.8L326.1,20.5z">
<path d="M393.6,20.2h9.1l19.3,45.4h-10.4l-4.1-10.1h-19.1l-4.1,10.1h-10.1L393.6,20.2z M404.1,46.7l-6-14.6l-6,14.6H404.1z">
<path d="M433.2,46.3V20.5h9.9V46c0,7.3,3.7,11.1,9.7,11.1c6.1,0,9.7-3.7,9.7-10.8V20.5h9.9V46c0,13.6-7.7,20.3-19.8,20.3C440.6,66.3,433.2,59.5,433.2,46.3z">
<path d="M489,20.5h9.9v36h22.5v9H489V20.5z">
<path d="M539.3,29.7h-13.7v-9.1H563v9.1h-13.7v35.9h-9.9V29.7z">
</g>
<g>
<path d="M63.9,17.6H35.5L22.8,36.5l26.8,26.5l26.8-26.6L63.9,17.6z M60.1,41.1l-0.5,1l-0.4,0.6l-0.7-0.4l-6.7-3.7c-0.6,0.6-1.4,0.9-2.3,0.9c-0.9,0-1.7-0.3-2.3-0.9l-6.7,3.7L40,42.7l-0.4-0.6l-0.5-1l-0.4-0.7l0.7-0.4l6.9-3.8c0,0,0,0,0,0c0-1.3,0.8-2.5,2-3v-7v-0.7H49h1.1h0.7v0.7v7c1.2,0.5,2.1,1.7,2.1,3.1c0,0,0,0,0,0l6.9,3.8l0.7,0.4L60.1,41.1z">
<path d="M73.3,0H26.1L0,38.8l49.6,49.1L99,38.8L73.3,0zM49.6,67.8L18.5,37l15.3-22.7h31.9l15,22.6L49.6,67.8z">
</g>
</g>
</svg>
Notice how by the end of each path element in the input we have a self closing tag “/>”. However in the output the self closing tag is transformed to just “>”, without the “/” and unfortunately the SVG is messed up 😦
Can somebody help me?
Thanks in advance, Kalo.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 34 (7 by maintainers)
Commits related to this issue
- Added tests for #63 & #64 — committed to addyosmani/critical by bezoerb 9 years ago
- Add test for #63 — committed to addyosmani/critical by bezoerb 6 years ago
Yay 😁
I will check this weekend
@catalinred: i think i managed to get rid of the memory error 😃 Would you mind trying again? (Critical should be in version v2.0.0-12)
Currently this looks like another issue in
inline-criticalorcheerio. In my tests everything works fine if i remove the<title>Title</title>tag. As soon as there’s a<title>inside the svg things get messy.I’ll investigate further to see if this can be fixed in inline-critical or if we have to file a bug over at cheerio/htmlparser2
Hi,
Not sure if it’s ok to resurrect this, but I think this issue “is happening” again.
I had to remove
criticalthis morning from within a project at work because the inline SVG’s got broken after thecriticaltask ran.As far as I tested, is the same behavior as @superKalo described above.
My setup includes critical w/ Gulp
Looking forward to hearing from you. Thanks!
Edit:
In case this helps, here’s what happens exactly in my case:
becomes