Building a .html file strips “viewbox” property from SVG tags

🐛 bug report

When “just” developing locally my SVG looks perfect. When I build the code the SVG gets all strange. It turns out that during build the property “viewbox” is removed from the element. Instering it manually in the builder file makes the svg be OK again.

🎛 Configuration (.babelrc, package.json, cli command)

I use pretty plain parceljs so no babelrc.

.posthtmlrc looks like

{
  "plugins": {
    "posthtml-md": {
			"root": "src"
		}
  }
}

In parcel we have `”main”: “dist/index.html”,“

The command is parcel build src/index.html –no-source-maps

🤔 Expected Behavior

When having

<svg
	style="position: relative; top: 2px;"
	xmlns="http://www.w3.org/2000/svg"
	width="14"
	height="14"
	viewBox="0 0 24 24"
>
	<path
		fill="#af7d5c"
		d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"
	></path>
</svg>

in a file I expect the viewBox="0 0 24 24" to be part of the builded file.

😯 Current Behavior

The builded file does not contain viewBox="0 0 24 24" (prettified the minified output to make it easy to see)

<svg
	style="position: relative; top: 2px;"
	xmlns="http://www.w3.org/2000/svg"
	width="14"
	height="14"
>
	<path
		fill="#af7d5c"
		d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6 13h-5v5h-2v-5H6v-2h5V6h2v5h5v2z"
	/>
</svg>

💁 Possible Solution

Not sure

🔦 Context

I cant use SVGs in my design

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-alpha.3.2
Node v12.14.0
npm/Yarn yarn 1.22.4
Operating System macOS Mojave

1 possible answer(s) on “Building a .html file strips “viewbox” property from SVG tags

  1. svgo should only do this when the viewbox attribute isn’t needed, but this should disable it nevertheless:

    .htmlnanorc with

    { "minifySvg": { "plugins": [{ "removeViewBox": false }] } }