Parcel: Building a .html file strips "viewbox" property from SVG tags

Created on 21 Apr 2020  路  2Comments  路  Source: parcel-bundler/parcel

馃悰 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

Question

Most helpful comment

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

.htmlnanorc with

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

All 2 comments

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

.htmlnanorc with

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

Neat! thank you!

Was this page helpful?
0 / 5 - 0 ratings