要点
Hugoで--minifyオプション付けてページ生成するとき、古いHugoを使っている場合や後述の設定を行っていない場合、インラインのSVGタグのパスデータが破壊される場合がある。
バージョン0.68.0以上のHugoを使用し、config.tomlにminify処理を制御するための記述をすることで解決できる。
発端
ブログテーマ中のアイコン部分を弄って、まぁこんな感じのアイコンを表示しようとしていた。↓
「うほ良い感じ」とか言ってノリノリでプッシュして、GitHub Actionが走って、出来上がったページを開いたらこんなんなっていた。↓
うほほ（白目をむいて倒れる）
原因
デバッグ用のローカル環境では、ソースファイルの圧縮を行っていなかったのでうまく動いていた。
公開用の設定では圧縮を行っていることにより、ソースコード中のSVGのパスデータが破壊されていた。(大丈夫な場合もあるのが余計に厄介)
ブラウザの検証ツールを見てみると、
Error: <path> attribute d: Expected number, "~~~"
なるエラーが。
ソースを表示して該当箇所を確認して、大丈夫な時と駄目な時のdiffをとった結果が以下。↓
(上が表示が崩れる場合、下が正しく表示される場合)
そんなわけで、--minify切らないでなんとかする方法はないのかと探した結果が次。
対処方法
Configure Minify - Configure Hugo - Hugo
バージョン0.68.0以降のHugoでは圧縮処理を制御できるようになっているらしい。
これまで少し前のバージョンを使っていたので、とりあえず最新のものと置き換え、config.tomlに次のセクションを追記した。
[minify]
disableSVG = true
これにより、<svg>~~~</svg>の内側でのコード圧縮が行われなくなり、パスデータもぶっ壊れることはなくなった。
よかったですね。
上記のリンク先を見るに他のアセット用の設定も用意されているということは、これらも何かしらminifyで問題が発生することがあるということなんだろうか。不穏だ。