SVG stands for Scalable Vector Graphics. Literally, it’s a graphic format that is scalable, jaggy free and compact (in most cases).
Most draw tools natively support loading and saving SVG files. You’ll find the format useful when you’re annoyed with jaggy images on your corporate web site.
Today I replaced a png logo on our internal system with an SVG file.
pngからsvgにしたからサイズも小さく・・・と思ったら18.26kbから431kbと激増してるじゃないか pic.twitter.com/K4M7KA0zst
— ユースケ (山本裕介) (@yusuke) 2020年8月5日
The file size was supposed to be shrunk, but the truth is that it grew from 18.26kb to 431kb. Then I was reminded of the compressed SVG format which Illustrator is offering. And the file size got minified to 3,688 bytes.
But it doesn’t get rendered correctly.
svgzにしたら3,688バイトと激減したけど、レスポンスヘッダで
Content-Encoding: gzip
が付いておらずレンダリングちゃんとされない。Webサーバで設定が必要かな pic.twitter.com/p77iAh0ZlC— ユースケ (山本裕介) (@yusuke) 2020年8月5日
It tuns out that Spring Boot and the Web server do not specify the Content-Encoding header to gzip OOTB.
I might be able to configure that on Nginx side, but in order to get the image loaded correctly on my local environment as well, I implemented a very simple ServletFilter.
https://gist.github.com/yusuke/d29f0c16f3ecc66b0887e4300a7c60a7
And now it works 🙂
