Inlined SVG rewritten and broken

[Warwick Molloy]

My html has hand written, inlined SVG. I'm using parcel to build (which invokes posthtml). posthtml is rewriting the svg content and:

• strips out the viewBox
• converts rect to path (why?)

And thus breaks the effect I'm trying to achieve.

Details

Here's a before and after...

Source

      <svg preserveAspectRatio="none" class="strip-svg" viewBox="0 0 10 40">
        <rect x="0" y="0" width="10" height="40" class="logo-main" />
        <rect x="0" y="17" width="10" height="6" class="logo-bkgnd" />
      </svg>

Result of build

      <svg class="strip-svg">
        <path class="logo-main" d="M0 0h10v40H0z" />
        <path class="logo-bkgnd" d="M0 17h10v6H0z" />
      </svg>

I'm quite happy with my hand-written svg and really don't need posthtml rewriting it, breaking my effect. I can't find any way to configure posthtml to avoid this and I haven't found a similar issue, hence this issue.

I'm going to try writing a plug-in for an svg pass-through.

Error (Logs|Stacks)

No errors logged. It cheerfully re-writes, minifies and, in the process, breaks my intended effect.

Reproduction (Code)

See above.

Environment

Windows 10

$ node --version
v10.11.0

$ npm --version
6.9.0

From package.json

"posthtml": "^0.11.3",
"posthtml-include": "^1.2.0",
"posthtml-modules": "^0.4.2"

[Ivan Demidov]

@WazzaMo Hi, I'm trying to run your script on https://npm.runkit.com/posthtml and I do not play, describe in more detail or give a link to the repository where it is played

const posthtml = require("posthtml")

const html = `
<svg preserveAspectRatio="none" class="strip-svg" viewBox="0 0 10 40">
        <rect x="0" y="0" width="10" height="40" class="logo-main" />
        <rect x="0" y="17" width="10" height="6" class="logo-bkgnd" />
      </svg>
`

const result = posthtml()
  .use(require('posthtml-include')())
  .use(require('posthtml-modules')())
  .process(html, { sync: true })
  .html

console.log(result)

result

<svg preserveAspectRatio="none" class="strip-svg" viewBox="0 0 10 40">
  <rect x="0" y="0" width="10" height="40" class="logo-main"></rect>
  <rect x="0" y="17" width="10" height="6" class="logo-bkgnd"></rect>
</svg>

[Warwick Molloy]

Hi @Scrum, I found the problem. It's actually from htmlnano and it's use of svgo.

To fix the problem, I had to add the following .htmlnanorc.js file, delete the .cache directory and do a re-build:

module.exports = {
  "minifySvg": false
}

posthtml was being invoked by parcel. The thing is that I only learned about the dependency on htmlnano and svgo by looking through the package-lock.json and finding the dependencies and learning how parcel uses htmlnano that uses posthtml etc.

I'll raise a documentation issue for parcel as that should help others as well and I will close this issue.
Thanks a lot for your time taking a look at it.

[Ivan Demidov]

you're welcome