Parcel: Inline SVGs are modified, stripping out accessibility features on production builds

[DCzajkowski]

🐛 bug report

When an HTML file is built for production, inline SVGs are modified. In the _Code Sample_ section I have provided an example input and its output. As you can see, the title tag and role attributes are removed, but they should be preserved for acccessibility.

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

.htmlnanorc (added due to #4649)

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

🤔 Expected Behavior

The inline SVG should not be tampered with, or at least accessibility features should not be stripped out.

😯 Current Behavior

Accessibility features (like <title> and role="presentation") in SVGs are removed in production builds.

💁 Possible Solution

There should be an option not to optimize inline SVGs when building for production.

🔦 Context

When building for production, I have noticed my accessibility score to drop compared to development builds. The gradients in SVGs were broken (due to #4649).

💻 Code Sample

NODE_ENV=production parcel build src/index.html

<!-- input index.html -->
<svg class="w-12 h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <title>Generic code icon</title>
  <path role="presentation" d="M0 0h24v24H0V0z" fill="none" />
  <path
    role="presentation"
    d="M8.7 15.9L4.8 12l3.9-3.9c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0 .39-.39.39-1.01 0-1.4zm6.6 0l3.9-3.9-3.9-3.9c-.39-.39-.39-1.01 0-1.4.39-.39 1.01-.39 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6c-.39.39-1.01.39-1.4 0-.39-.39-.39-1.01 0-1.4z"
  />
</svg>

<!-- output index.html -->
<svg class="w-12 h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.7 15.9L4.8 12l3.9-3.9a.984.984 0 000-1.4.984.984 0 00-1.4 0l-4.59 4.59a.996.996 0 000 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 000-1.4zm6.6 0l3.9-3.9-3.9-3.9a.984.984 0 010-1.4.984.984 0 011.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 01-1.4 0 .984.984 0 010-1.4z"/></svg>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.4 |
| Node | v12.16.1 |
| npm/Yarn | 1.22.4 |
| Operating System | macOS Catalina 10.15.4 |

[mischnic]

All of these SVG related minification issues are caused by htmlnano's "safe" preset not being safe: https://github.com/posthtml/htmlnano/blob/fdfa02465f37e72958f482f3976bd36ce0afef49/lib/presets/safe.es6#L20-L25

We should probably disable svg minification here by default and let the user reenable it with the (un)desired plugins, or disable some more svgo plugins by default.

(Rather incredible that removeTitle is enabled by default: https://github.com/svg/svgo#what-it-can-do)

[DCzajkowski]

Relevant issue: https://github.com/svg/svgo/issues/787