SVGはScalable Vector Graphicsの略で、その名の通りスケーラブル（拡大縮小可能)な画像のフォーマット形式です。
Illustratorを含む多くのドローツールで書き出し、読込が行え、かつ表示する画面の改造度に合わせて滑らかに拡大縮小出来るためジャギーが出ません。
今回、なんとなく社内システムのロゴを今回PNG形式からSVG形式の新しいものに置き換えました。
pngからsvgにしたからサイズも小さく・・・と思ったら18.26kbから431kbと激増してるじゃないか pic.twitter.com/K4M7KA0zst
— ユースケ (山本裕介) (@yusuke) 2020年8月5日
ファイルサイズが小さくなるかと思えば18.26kbから431kbとかなり増えています。Illustratorで圧縮形式のsvgzというのがあるのを思い出したのでその形式で保存してみたところ3,688バイトとかなり軽くなりました。
しかしブラウザでレンダーされません。
svgzにしたら3,688バイトと激減したけど、レスポンスヘッダで
Content-Encoding: gzip
が付いておらずレンダリングちゃんとされない。Webサーバで設定が必要かな pic.twitter.com/p77iAh0ZlC— ユースケ (山本裕介) (@yusuke) 2020年8月5日
svgzは、要はgzipで圧縮されているわけですがSpring BootやWebサーバがそのことに気がつかずレスポンスヘッダでContent-Encodingを設定せず、ブラウザ側で解釈に失敗するようです。
Nginx側で自動でContent-Encodingを指定するようにしてもいいのですが、ローカルでSpring Boot単体で動かす際に表示されないと気持ち悪いのでアプリケーションレベルでServletFilterでContent-Encodingを指定するようにしてみました。Spring Bootであれば以下のフィルタをプロジェクトに追加しておくだけです。
https://gist.github.com/yusuke/d29f0c16f3ecc66b0887e4300a7c60a7
無事表示されました。
