Why does svgo remove everything when minimizing an svg with symbols?

Question

Looking at svg minimization options, I found svgo https://github.com/svg/svgo . I successfully tried it with svg generated from illustrator, however, when I run it against the following, the resulting file is completely blank.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

I haven't been able to find a reason why this occurs.

They are not referenced, but they don't have to be referenced if this is an external file. I guess it's probably a bug on svgo. — user3792159, Feb 14 '16 at 23:34
How is svgo going to know they are referenced from an external file? — Robert Longson, Feb 15 '16 at 06:57
Disable `removeHiddenElements` plugin, it's the one responsible for stripping `display: none` svg elements — Maometto, May 13 '19 at 16:31

score 2 · Answer 1 · answered Jun 28 '17 at 00:54

2

style="display: none;"

This is causing SVGO to think you don't need the block which mean it will empty the entire file. I'm not sure how to prevent this either

answered Jun 28 '17 at 00:54

zzarbi

1,832
3
15
29

score 1 · Answer 2 · answered Oct 02 '19 at 03:34

1

It can be prevented by passing an option to the plugin removeHiddenElems, displayNone: false

answered Oct 02 '19 at 03:34

Kevin

11
1

Why does svgo remove everything when minimizing an svg with symbols?

2 Answers2