svgoでのSVG圧縮時にviewBoxが消えてしまう問題を検証してみた

効率化ツール 作業環境 フロントエンド

こんにちは、中村です。
SVGの圧縮時にviewBoxが消えてしまうことがあったので検証してみました。

起こったこと

アームズの作業環境については別の記事で紹介されています。
この仕様の中で、SVGの圧縮でつまずいたところがありました。

tech.arms-soft.co.jp

コミットする時に画像などの圧縮を行うように設定しています。
SVGについてはsvgoを使って圧縮しています。
普段あまり気にせず作業できていたのですが、
品質チェックの際に「IEでSVGのサイズがおかしい」という指摘が上がってきました。
IEではCSSで記述した幅・高さを超えたサイズで表示され、意図しない表示になっていました。
SVGの内容を確認してみると、viewBoxが消えていました。
修正したのですがコミットして再確認したところ同じ状態になりました。

現象の確認と解決方法

コミットのタイミングでviewBoxが消されていました。
同じ形のSVGをPhotoshopとIllustratorで書き出して試したところ、 Photoshopから書き出したSVGで発生することがわかりました。
'width'と'height'があると削除されます。
普段Illustratorから書き出すことが多いので今回初めて知りました。

調べたところ、svgoの圧縮はviewBoxを消すremoveViewBoxがデフォルトでtureになっていたので、
"removeViewBox": falseを追加することでViewBoxもwidthとheightも残りました。

Illustratorで書き出したSVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 194.04 68.99"><defs><style>.a{fill:#231815;}</style></defs><title>illustrator</title><path class="a" d="M2.29,47.46a36.2,36.2,0,0,0,6,10.74,18.64,18.64,0,0,0,14.78,7,12.18,12.18,0,0,0,8.26-3,10.62,10.62,0,0,0,3.49-8.45,11.82,11.82,0,0,0-3.51-8.5q-2.3-2.28-9.65-6.88L13.08,33a30.68,30.68,0,0,1-6.15-4.93A15.31,15.31,0,0,1,2.69,17.63,17.09,17.09,0,0,1,7.71,5q5-5,13.33-5a25.66,25.66,0,0,1,8.23,1.68,34.54,34.54,0,0,0,5.5,1.69,3.13,3.13,0,0,0,2.56-.88A6.41,6.41,0,0,0,38.43,0h2l2.2,21.29h-2.4q-2.43-9.61-7.83-13.43A18.49,18.49,0,0,0,21.78,4.05a11.21,11.21,0,0,0-7.16,2.42,8.09,8.09,0,0,0-3,6.71,9.82,9.82,0,0,0,2.34,6.6,30.24,30.24,0,0,0,7.27,5.81L30,31q8.25,5.07,11.63,9.32a16.11,16.11,0,0,1,3.33,10.16A16.85,16.85,0,0,1,39,63.62Q33.05,68.9,23.83,68.9a29.48,29.48,0,0,1-9.69-1.76,37,37,0,0,0-5.79-1.76A2.49,2.49,0,0,0,6,66.46a6.65,6.65,0,0,0-.8,2.29H3L0,47.46Z"/><path class="a" d="M79.69,1.42v1.7a20.33,20.33,0,0,0-5.12.5,3.15,3.15,0,0,0-2.39,3.23A10.65,10.65,0,0,0,73,10.32c.56,1.49,1.63,3.95,3.18,7.41L91.87,52.54l14.21-37.69c.63-1.66,1.1-3.07,1.43-4.23A11.23,11.23,0,0,0,108,7.79a3.91,3.91,0,0,0-2.49-4,15.17,15.17,0,0,0-4.83-.7V1.42h20.46v1.7a9.38,9.38,0,0,0-4.69,1.71q-2.3,1.9-4.54,7.67L89.77,68.75H88.26l-24.71-55q-3.13-7-5-8.71a8.85,8.85,0,0,0-5.49-2V1.42Z"/><path class="a" d="M172.12,1.86a47.65,47.65,0,0,0,6.44,1.61,4.52,4.52,0,0,0,3.06-.83,6.54,6.54,0,0,0,1.53-2.4h2.2l.78,21.05h-2.29q-3.08-7.27-6.35-10.84Q171.58,4.2,162.11,4.2a23.22,23.22,0,0,0-16.92,7.3q-7.31,7.31-7.3,24,0,13.81,7.28,21.58a23.66,23.66,0,0,0,18,7.76,30.8,30.8,0,0,0,4.25-.34A26,26,0,0,0,172,63.48a13.42,13.42,0,0,0,4.44-2,3.34,3.34,0,0,0,.88-2.51V43q0-5.79-1.63-7.22T168.55,34V32.18H194V34c-2.47.17-4.12.57-4.93,1.22-1.37,1-2.05,3.19-2.05,6.45V61.38q0,1.75-8.62,4.68A51.21,51.21,0,0,1,161.87,69q-14.66,0-24.71-8.54Q126.08,51,126.07,35.16a34.83,34.83,0,0,1,8.84-23.93q9.72-11,25.78-11A41,41,0,0,1,172.12,1.86Z"/></svg>

Photoshopで書き出したSVG

<svg xmlns="http://www.w3.org/2000/svg" width="194" height="69" viewBox="0 0 194 69">
  <defs>
    <style>
      .cls-1 {
        fill: #231815;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="photoshop" class="cls-1" d="M2.294,47.465A36.068,36.068,0,0,0,8.241,58.208a18.634,18.634,0,0,0,14.77,6.983,12.187,12.187,0,0,0,8.262-3.028,10.6,10.6,0,0,0,3.485-8.448,11.8,11.8,0,0,0-3.507-8.5q-2.29-2.295-9.648-6.885l-8.527-5.323a30.613,30.613,0,0,1-6.144-4.932,15.312,15.312,0,0,1-4.247-10.45A17.093,17.093,0,0,1,7.713,5.03Q12.741,0,21.04,0a25.621,25.621,0,0,1,8.226,1.685,35.06,35.06,0,0,0,5.492,1.685,3.141,3.141,0,0,0,2.563-.879A6.342,6.342,0,0,0,38.419,0h2.05l2.2,21.291H40.274q-2.441-9.62-7.835-13.429A18.467,18.467,0,0,0,21.772,4.053,11.177,11.177,0,0,0,14.621,6.47a8.087,8.087,0,0,0-3.051,6.714,9.8,9.8,0,0,0,2.339,6.592,30.1,30.1,0,0,0,7.264,5.811l8.78,5.42q8.242,5.079,11.625,9.327a16.09,16.09,0,0,1,3.333,10.157A16.859,16.859,0,0,1,38.98,63.628Q33.049,68.9,23.823,68.9a29.457,29.457,0,0,1-9.69-1.758,36.672,36.672,0,0,0-5.785-1.758A2.483,2.483,0,0,0,5.98,66.461a6.764,6.764,0,0,0-.805,2.3h-2.2L0,47.465H2.294ZM79.67,1.416V3.125a20.122,20.122,0,0,0-5.115.5,3.143,3.143,0,0,0-2.39,3.224,10.563,10.563,0,0,0,.854,3.472q0.853,2.232,3.18,7.409L91.85,52.543l14.205-37.689q0.94-2.5,1.429-4.236a11,11,0,0,0,.489-2.828,3.917,3.917,0,0,0-2.487-3.97,15.165,15.165,0,0,0-4.825-.694V1.416h20.452V3.125a9.247,9.247,0,0,0-4.687,1.709q-2.3,1.906-4.54,7.668L89.745,68.756h-1.5L63.532,13.787q-3.124-6.993-5-8.705a8.823,8.823,0,0,0-5.492-1.956V1.416H79.67Zm92.411,0.439a46.967,46.967,0,0,0,6.444,1.612,4.471,4.471,0,0,0,3.051-.83A6.535,6.535,0,0,0,183.114.244h2.2l0.781,21.047h-2.3q-3.075-7.276-6.346-10.841Q171.544,4.2,162.074,4.2a23.212,23.212,0,0,0-16.916,7.3q-7.3,7.3-7.3,24.05,0,13.82,7.274,21.584A23.635,23.635,0,0,0,163.1,64.9a31.276,31.276,0,0,0,4.247-.341,26.086,26.086,0,0,0,4.638-1.072,13.568,13.568,0,0,0,4.442-2.021,3.342,3.342,0,0,0,.879-2.51V43.021q0-5.793-1.636-7.217t-7.151-1.768V32.181H194v1.856q-3.711.245-4.93,1.221-2.05,1.563-2.051,6.446V61.382q0,1.758-8.616,4.688A51.41,51.41,0,0,1,161.829,69q-14.644,0-24.7-8.546-11.082-9.424-11.082-25.3a34.823,34.823,0,0,1,8.836-23.928Q144.6,0.244,160.658.244A41.2,41.2,0,0,1,172.081,1.856Z"/>
</svg>

Photoshopで書き出したSVGを圧縮したもの

<svg xmlns="http://www.w3.org/2000/svg" width="194" height="69" viewBox="0 0 194 69"><path d="M2.294 47.465a36.068 36.068 0 005.947 10.743 18.634 18.634 0 0014.77 6.983 12.187 12.187 0 008.262-3.028 10.6 10.6 0 003.485-8.448 11.8 11.8 0 00-3.507-8.5q-2.29-2.295-9.648-6.885l-8.527-5.323a30.613 30.613 0 01-6.144-4.932 15.312 15.312 0 01-4.247-10.45A17.093 17.093 0 017.713 5.03Q12.741 0 21.04 0a25.621 25.621 0 018.226 1.685 35.06 35.06 0 005.492 1.685 3.141 3.141 0 002.563-.879A6.342 6.342 0 0038.419 0h2.05l2.2 21.291h-2.395q-2.441-9.62-7.835-13.429a18.467 18.467 0 00-10.667-3.809 11.177 11.177 0 00-7.151 2.417 8.087 8.087 0 00-3.051 6.714 9.8 9.8 0 002.339 6.592 30.1 30.1 0 007.264 5.811l8.78 5.42q8.242 5.079 11.625 9.327a16.09 16.09 0 013.333 10.157 16.859 16.859 0 01-5.931 13.137Q33.049 68.9 23.823 68.9a29.457 29.457 0 01-9.69-1.758 36.672 36.672 0 00-5.785-1.758 2.483 2.483 0 00-2.368 1.077 6.764 6.764 0 00-.805 2.3h-2.2L0 47.465h2.294zM79.67 1.416v1.709a20.122 20.122 0 00-5.115.5 3.143 3.143 0 00-2.39 3.224 10.563 10.563 0 00.854 3.472q.853 2.232 3.18 7.409L91.85 52.543l14.205-37.689q.94-2.5 1.429-4.236a11 11 0 00.489-2.828 3.917 3.917 0 00-2.487-3.97 15.165 15.165 0 00-4.825-.694v-1.71h20.452v1.709a9.247 9.247 0 00-4.687 1.709q-2.3 1.906-4.54 7.668L89.745 68.756h-1.5L63.532 13.787q-3.124-6.993-5-8.705a8.823 8.823 0 00-5.492-1.956v-1.71h26.63zm92.411.439a46.967 46.967 0 006.444 1.612 4.471 4.471 0 003.051-.83 6.535 6.535 0 001.538-2.393h2.2l.781 21.047h-2.3q-3.075-7.276-6.346-10.841-5.905-6.25-15.375-6.25a23.212 23.212 0 00-16.916 7.3q-7.3 7.3-7.3 24.05 0 13.82 7.274 21.584A23.635 23.635 0 00163.1 64.9a31.276 31.276 0 004.247-.341 26.086 26.086 0 004.638-1.072 13.568 13.568 0 004.442-2.021 3.342 3.342 0 00.879-2.51V43.021q0-5.793-1.636-7.217t-7.151-1.768v-1.855H194v1.856q-3.711.245-4.93 1.221-2.05 1.563-2.051 6.446v19.678q0 1.758-8.616 4.688A51.41 51.41 0 01161.829 69q-14.644 0-24.7-8.546-11.082-9.424-11.082-25.3a34.823 34.823 0 018.836-23.928Q144.6.244 160.658.244a41.2 41.2 0 0111.423 1.612z" fill="#221714" fill-rule="evenodd"/></svg>

まとめ

効率的な作業環境ですが作ってもらったものを使っているだけなので、私はまだまだ理解できていないところが多いです。
自分でできるように、日々勉強していきたいと思います。