Parcel: SVG `viewBox` attribute getting stripped in HTML

[cwardzala]

🐛 bug report

I am having issues with viewBox being removed from inline SVG in my HTML file. I have passed my own options via .posthtmlrc but I am still seeing the attribute removed on production build?

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

// .posthtmlrc
{
    "xmlMode": true,
    "lowerCaseAttributeNames": false
}

🤔 Expected Behavior

When running parcel build the HTML output should include SVG code with the viewBox attribute.

<svg width="1em" height="1em" viewBox="0 0 360 512"></svg>

😯 Current Behavior

Output from parcel build results in HTML SVG with out the viewBox attribute as expected.

<svg width="1em" height="1em"></svg>

💁 Possible Solution

I have looked into it and it appears HTMLAsset.js is calling posthtml-parser with its own config of {lowerCaseAttributeNames: true} which causes viewBox to be removed. HTMLAsset.js should use the config provided in .posthtmlrc or no config.

🔦 Context

I am building a static HTML page with inline SVG code. This breaks the rendering of my SVG because the width and height attributes do not match the viewBox positioning.

💻 Code Sample

Example Gist.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.8.1
| Node | 8.11.1
| npm/Yarn | Yarn 1.7.0
| Operating System | OSX 10.13.5

[cwardzala]

This was fixed in #1316 but when I install with Yarn it still has the old unfixed code.

[plrenaudin]

Same issue here, without using .posthtmlrc, viewBox gets stripped in the build mode (not in normal mode)

[plrenaudin]

I just fixed my issue by updating to 1.9.1 and removing the .cache folder :+1:

[r3fio]

The problem still persists in 1.9.3 using build mode with and without a .posthtmlrc file being present.

[andrewbanchich]

Same here... This is very troublesome.

[zremboldt]

I am having this problem as well...

[andrewbanchich]

@zacaree Someone in another issue mentioned a different .posthtmlrc option that worked. This config solves both Parcel bugs for me:

{
"recognizeSelfClosing": true,
"lowerCaseAttributeNames": false
}

[DeMoorJasper]

Perhaps a good idea to open up an issue in posthtml to ask for safer transforms by default.

[andrewbanchich]

@DeMoorJasper The issue isn't PostHTML's defaults; it's that Parcel applies different PostHTML settings to parcel serve than it does to parcel build.

[carlbennettnz]

Even with the .posthtmlrc config above, I still can't stop a stroke-width attribute from being stripped.

<svg viewBox="22 22 44 44">
  <circle cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle>
</svg>

Can only get this working by moving the stroke-width to CSS.

But yeah, I agree @andrewbanchich, the different settings for parcel build are the main issue.

[DeMoorJasper]

@andrewbanchich Can't find where serve and prod config differ? Can you point me to the code where this happens? Not sure why this would happen, the only thing I can think about is htmlnano but that is a seperate step apart from the posthtml config, but you can simply disable the svg minification like @zacaree just mentioned, already found it strange you were changing posthtmlrc for svg minification.

[zremboldt]

@andrewbanchich Awesome!
Yes that solves my issue with viewBox being stripped!

Solution:

1. Create a .posthtmlrc file in the project root.
2. Include the following:

{ "recognizeSelfClosing": true, "lowerCaseAttributeNames": false }

Thank you!

[hacknug]

Not working for me for some kind of reason 😩

https://github.com/parcel-bundler/parcel/blob/038ade609e8dcd89ac21548adea541ca99e6a7ba/src/transforms/posthtml.js#L10

[andrewbanchich]

@hacknug your snippet has it set to true when it should be false.

[andrewbanchich]

@DeMoorJasper None of those things fixed any issues for me. I don't know where in Parcel's code it is because I'm not a Parcel dev, but I know it is applying different configs to production vs dev builds because parcel build completely breaks the site when parcel serve is 100% okay under the same conditions. If you add these two config settings to .posthtmlrc then it works the same on both production and dev.

[DeMoorJasper]

Alright, I actually just tried to explain that this is probably caused by htmlnano, as that's the only thing that differs between dev and prod (for html)

Well as the config solves this issue I guess we can close it, or open an issue in posthtml, as I don't think we should be changing the defaults

[hacknug]

The thing is this only works when it's inside .posthtmlrc but not when inside posthtml.config.js. The reason un using the later is because I wanna have custom functions available for posthtml-expressions and I found that to be the most straightforward way to do so.

{
    "recognizeSelfClosing": true,
    "lowerCaseAttributeNames": true
}

module.exports = {
  recognizeSelfClosing: true,
  lowerCaseAttributeNames: false,
  plugins: [
    require('posthtml-include')({ root: 'src' }),
    require('posthtml-expressions')({}),
  ],
}

[hacknug]

@DeMoorJasper should this also work when using posthtml.config.js? The only thing working for me right now is having a .htmlnanorc file in my project folder with the following content:

{
    "minifySvg": false
}

[lkaratun]

I have the same problem with the id property in an svg tag. The only thing that helped was not minifying svgs at all :(

[benavern]

Hi,

I'm working on a little side project with vuejs and decided to give a try to parcel.
I think it is awesome, but found this particular problem annoying.

I first tried this file:

[.posthtmlrc]

{
"recognizeSelfClosing": true,
"lowerCaseAttributeNames": false
}

It worked with parcel index.html but once I got to release it with parcel build index.html, the final version was all broken... (SVGs especialy)

Then I added this file:

[.htmlnanorc]

{
    "minifySvg": false
}

Would it be possible to make the first file options default in parcel ? I think it should :)

Thanks a lot for the answeres above!

[michaelbazos]

The only thing working for me right now is having a .htmlnanorc file in my project folder with the following content:

{
    "minifySvg": false
}

👍Perfect, but I also needed to clear the build cache: rm -rf .cache

[benfrain]

I also had to add both as per @benavern example. Otherwise all path elements were getting nested in SVGs. This is on v1.12.2.

[cdaringe]

https://github.com/parcel-bundler/parcel/blob/d24e09a9797af41a9d2c6c733b1c6cf6671d60c7/packages/core/parcel-bundler/src/transforms/htmlnano.js#L13-L14

we probably ought drop a little minifySvg: false there, even if temporary. minifySvg is clearly doing _much more_ than just minifying ;)

[skladany]

@zacaree Someone in another issue mentioned a different .posthtmlrc option that worked. This config solves both Parcel bugs for me:

{
"recognizeSelfClosing": true,
"lowerCaseAttributeNames": false
}

This fix didn't work for me (using Parcel 2), however this one does: https://gitmemory.com/issue/posthtml/posthtml/283/493249105

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
}