SVG self-closing elements are not handled correctly

[Michionlion]

SVG and MathML self-closing elements have their self-close slash removed when keepClosingSlash is false (the default), which results in functionally different output, since SVG and MathML tags can be closed only in two ways: <path ...contents... /> or <path ...contents...></path> (see https://stackoverflow.com/a/24301479 for a discussion on this). <path ...contents...> is invalid and an unclosed tag, which results in anything following the tag being placed inside the preceding element, substantially changing rendered output.

As an example, I discovered this issue by noticing a difference in document structure due to minification with html-minifier:

Without html-minifier in my build process, I receive minified HTML that looks like:

      <g class="dataset">
        <path class="dataset-path"
          stroke="${e.color}"
          d="${He(e.points)}"
        />
        <g class="dataset-points" stroke=${e.color} fill=${e.color}>
          ${k(e.points,(e=>e),this.renderPoint.bind(this))}
        </g>
      </g>

But with html-minifier included and running, I receive minified HTML that looks like:

<g class="dataset"><path class="dataset-path" stroke="${e.color}" d="${Oe(e.points)}"><g class="dataset-points" stroke="${e.color}" fill="${e.color}">${k(e.points,(e=>e),this.renderPoint.bind(this))}</g></g>

Note that this code is minified, but the path element is no longer closed and results in the following g elements being children of the path, and not siblings.

[j9t]

The problem here is the missing svg element. When that is there, HTML Minifier treats this correctly.

HTML Minifier doesn’t offer this functionality, but see your code in HTML Minifier Next (enhanced compatible successor). When you copy the code to the respective version for this original HTML Minifier, you see it works as well.

(A side note, when investigating I noticed MathML support was flaky, so in HMN I’m currently improving that support.)