shields.ioが重いのでSVGをPNGへ変換してGithubに置いておく

shields.ioを使うと下記みたいな形式で投げることで、Githubとかで使える便利画像が取得できる。
https://img.shields.io/badge/inamuu-dayo-skyblue.svg

社内のエンジニアさんが、レビュー時にこの画像を使って「ask,must,imo,nits」を使用していた。
これは良さそうだと思い、alfredのスニペットに登録したものの、shileds.ioが重くて全然画像が表示されない。
いい感じにレビューしたいのになんだか萎えてしまうし、レビューの生産性をあげるために導入したいので是非使いたいと思ったので、もうPNGに変換してしまうことにした。

svgをpngへ変換する

shileds.ioで取得したSVGをPNGへ変換する方法を探すことにした。
qlmanageというMacに標準で入っているコマンドが使えるということを知ったので試してみた。

qlmanage -t -s 300 -o . rvask.svg

結果

なんだかやたら余白が生まれてしまった。
多分qlmanageで-s指定した場合は縦横のサイズが共通になってしまうっぽい。
他のオプションでトリミングするみたいな良さそうなオプションがわからなかった。

imagemagickでやる

imagemagickでもsvgからpngの変換がやれるらしいということを知ったのでbrewでimagemagickをインストールしてやってみた。

convert rvask.svg -resize 75x20 rvask.svg.png

結果

なんとグレーになってしまった😇
どうやらbrewで入ってくるimagemagickにはsvgには対応していないらしいということで、svg変換ができるimagemagickを再インストールした。
svg変換ができるようにライブラリを指定すればいけるらしい。結構インストールに時間がかかる。

brew install imagemagick --with-librsvg

これで再度上記コマンドを実行してみた。

結果

文字〜〜〜
リサイズしているせいでどうも文字がガビガビになってしまった。
PRに画像を貼り付けする際にimgタグでサイズ指定すれば良い？とか思ったけど、もう面倒なので最初にqlmanageで変換したpngの余白をトリミングできないか調べた。

画像のトリミング

こんなコマンドがimagemagickに付随して使えるようになっているらしい。これで余白トリミングが行える。

mogrify -trim +repage rvask.svg.png

結果

良さそう！
ということでGithubのissueに貼り付けておいて、それをalfredのスニペットで呼び出せるように登録した。
これでレビューし放題だ！

参考にさせていただいたサイト：
https://news.mynavi.jp/article/osxhack-98/