SVGファイルをGZへ圧縮するのに苦労した話


忘備録



海外で作成されたWPテーマをカスタマイズしていて、



アイコンを一つ変更するのにとても苦労したので



忘れないようにしてみます。






このナイフとフォークのアイコンを






このオイルチェイサーにしたかった






ただそれだけなのですが、



意外と手こずってしまいました。





手順は、



1、デベロッパーツールで元アイコンのCSS<span>を確認



2、アイコンの格納フォルダを確認








3、アイコンのSVGファイルをローカルに保存してAiでオイルチェイサーへ変更編集



*今回使用したアイコンはこちらからチョイス



https://icooon-mono.com










4、作成したSVGファイルをGZへ圧縮




ここで時間食いました。



Mac標準の圧縮ではzip形式になってしまうのですが、



これではアップロードしてもアイコンが表示されません。








変換サイトなども試しましたがなぜかダメ。



そこでターミナルを使って変更する方法を見つけ試してみると



あっさりできました。



Macのターミナルでgzip圧縮してみる




Macのターミナルを開き、以下のように記述してエンター。



指定したファイルのgzip圧縮が同じ階層に作られる。



gzip /Users/***/material.min.js



もっと簡単な方法



上のやり方よりも簡単なのが、以下のように記述して



ターミナルにSVGデータを放り込む



gzip 


同じことが起こります。



ファイル名が長いときなどはこっちが楽ですね。




注意点は



“gzip”ではなく



“gzip “と、半角スペースが入ることです。




5、サーバーへアップロード



元の階層へ戻します。



アイコンが変わりました。








ターミナルもだんだんと慣れてきました。