<g> tag being stripped from inline SVG

[Rob Calcroft]

I'm using parcel, and when im parsing the following SVG htmlnano is stripping out the <g> tag when I do a minified production build, is this a bug or is there some extra SVG attributes I need to add to ensure htmlnano doesn't strip anything out.

<svg class="rounded-top" preserveAspectRatio="none" height="50" viewBox="0 0 1440 40" xmlns="http://www.w3.org/2000/svg">
      <g>
        <defs>
          <filter id="glow">
            <fegaussianblur class="blur" result="coloredBlur" stddeviation="3.5"></fegaussianblur>
            <femerge>
              <femergenode in="coloredBlur"></femergenode>
              <femergenode in="coloredBlur"></femergenode>
              <femergenode in="coloredBlur"></femergenode>
              <femergenode in="SourceGraphic"></femergenode>
            </femerge>
          </filter>
        </defs>
        <path d="M0 30.013C239.659 10.004 479.143 0 718.453 0S1198.28 10.004 1440 30.013V40H0v-9.987z" fill="#FFF" fill-rule="evenodd"/>
      </g>
    </svg>

It outputs

<svg class="rounded-top" preserveAspectRatio="none" height="50" viewBox="0 0 1440 40"><path d="M0 30.013C239.659 10.004 479.143 0 718.453 0S1198.28 10.004 1440 30.013V40H0v-9.987z" fill="#FFF" fill-rule="evenodd"/></svg>

[Kirill Maltsev]

Thanks for submitting the issue, @robcalcroft!

Does the minified SVG look different from the original one (for some reason I see just a white screen in both cases)? If yes, then sure, it's a bug. Because by default htmlnano shouldn't break anything.

I'm currently on vacation, so I can look into the issue only in a couple of weeks. So for now I suggest you check SVGO documentation (that's what htmlnano uses for the minification) for an option which would disable <g> removal or disable minifySvg minification in htmlnano at all.

[Rob Calcroft]

@maltsev thanks very much for the response! The SVG itself is white so yes haha you'd have trouble viewing it 😄 Ok cool enjoy your holiday! I shall look at the SVGO docs.

[Anders Kleve]

I'm having a similar issue with Parcel, where the viewbox attribute is being stripped from an inline SVG that resides inside a button element. However, I have two other SVG:s in the document that have their respective viewbox attributes preserved after minification.

[Anders Kleve]

Ok, so I had a typo in my HTML - veiwbox instead of viewBox.

@robcalcroft Seems to be the collapseGroups plugin that removes the <g> tag, but I guess you probably found out already: https://github.com/svg/svgo/blob/master/plugins/collapseGroups.js

Guessing a bit here, but judging by this thread, something like this might work for you:

Create a .htmlnanorc file in the root of your parcel project with the following contents:

{
  collapseGroups: false
}

[Rob Calcroft]

@anderskleve thanks for the suggestion, unfortunately that still removed the g tags, so i've just used minifySvg: false

[Anders Kleve]

Yeah, I tried it out yesterdayas well and it did not work. I think the config is ivalid though. Can't try it out at the moment, but this might actually work:

{
minifySvg: {
    plugins: [ 
        { collapseGroups: false }
    ]
}
}

[Kirill Maltsev]

@anderskleve, thanks for the suggestion! Yes, the code in your latest message should disable <g> stripping. I've added that example to htmlnano docs.

[Kirill Maltsev]

The SVG itself is white so yes haha you'd have trouble viewing it 😄

Right :-) @robcalcroft, I tried it with a black background, and although I see the white shape now, I don't see any differences between the original and minified version. Am I missing something?

[Rob Calcroft]

The bit that was missing was a glow that I used, so I would be styling the svg with filter: url(#glow)

[Kirill Maltsev]

@robcalcroft I'm planning to fix that because I consider it as a bug. htmlhano should never break the layout if used with safe preset.

[Kirill Maltsev]

I released the fix: 0.2.3