Hugoテンプレートで埋め込んだSVGがこわれる

Hugoテンプレートで埋め込んだSVGがこわれる

2021-02-05
Hugo

Hugoでminifyビルドすると、埋め込んだSVGが壊れる場合があります。その場合は、SVGのみminifyをかけないようにすることで解消できます。

環境

  • Hugo v0.80.0/extended

SVGのMinifyを無効化

config.yamlで設定します。

minify:
  disableSVG: true
  ...

壊れていた箇所

Minifyすると座標値が変化していました。

e.g.
<path>の最後の値2.83 0z2.83.0zになっていた。

Minified

<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M7.775 3.275a.75.75.0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0 2.5-2.5a3.5 3.5.0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0-2.5 2.5a3.5 3.5.0 004.95 4.95l1.25-1.25a.75.75.0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83.0z"/>
</svg>

Not minified

<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path>
</svg>

原因

Hugoが利用しているminifiyライブラリ側の問題とのことです。修正は行われたのですが解消しきれていないようです。
Minification breaks inline SVG #6475

Ref.