今日は「svgコードの圧縮と最適化、色を変更する方法」をご紹介します。
こんにちは。Webコーダーのはるです。
先日、いただいたデザインカンプのsvg画像から、ホバー用の色違いのアイコンを作成したので備忘録です。
svgコードの圧縮と最適化、色を変更する方法
svgの扱いをあまり良くわかっていなく、制作パートナーさんに教えていただきました。
・svgコードの圧縮と、svgコードの最適化をします。
・1つのsvgアイコンを書き出して、svgコードを編集することで色違いのアイコンを作成します。
svg画像の保存→圧縮
まず、編集の元となるsvg画像を保存します。
今回は、ICOOON MONOさんのsvg画像をお借りしました。ありがとうございます。
このような画像です。
svg画像をPCに保存したら、エディターでsvgファイルを開きます。私はVSCodeを使用しています。
こんな感じでsvgコードがババーっと表示されます。
まずは、このコードを圧縮します。圧縮には「SVGOMG」というWeb上のツールを使用しています。(パートナーさんに教えていただきました。ありがとうございます！)
SVGOMGは、このような画面です。「Open SVG」から先程のsvgファイルを開きます。
すると、コードの圧縮が行われます。右下の緑の保存ボタンから保存します。隣にどのくらい圧縮できたかが書かれています。
実際にどのくらいコードが変わったのか、「difff」ツールで差分を調べてみました。以下が結果です。
左が旧、右が新コードです。ちょっとわかりにくいのですが、2145文字→2074文字に文字数が減っています。不要なコードを削除することによって、ファイルサイズを縮小できます。
画像によっては、もっとたくさん圧縮される時もあります。自分ではコードをいじれないので、これは嬉しいです。
コードの最適化
次に圧縮されたコードを編集していきます。
<svg>タグで必ず必要なviewBoxとwidth/heightの指定がされているか確認します。
以下のコードは、viewBoxのみで、width/height指定がされていません。
viewBox=”0 0 512 512″とあり、後半の2つがそれぞれwidthとheightです。これらを記述していきます。
逆に、viewBox属性がないときはwidth,heightの数字をviewBox内に記述します。
色の変更
色を変更することもできます。
コード内の、fill=”カラーコード”の部分を編集すればOKです。
試しに、#FF7F50(コーラル)に編集してみました。保存をすると、コーラルに変更されました。(デスクトップのアイコンで失礼します。。)
ちなみに、この方法だと当たり前ですがオリジナルのsvg画像が編集されてしまいます。
元の画像を残しつつ、新しく色違いの画像を作りたい時は、先ほどの圧縮ツール「SVGOMG」を使用すると便利です。
元のsvgコードを丸っとコピーして、以下の「Paste markup」にコードをペーストします。
「Paste markup」を押すと、クリップボードアイコンの隣が空欄になります。そちらに、コードをペーストします。
ペーストした瞬間に以下の画面になります。オリジナルの画像を新しく保存したもの＆コードの圧縮が一度にできます。
あとは、先程と同じようにエディタで開いて、fill=””部分のカラーコードを編集すれば別ファイルで保存できます。この方法でコードをコピペすると圧縮も一緒にかけられるので便利です。
//
svgについて調べていた時、こちらのQiitaにおせわになりました。ありがとうございます！
あとがき
制作パートナーさんに、制作に関する知識を教えていただいています。環境に感謝です。なかなかアウトプットが追いついていませんが、少しずつ教えていただいたことをまとめていきたいと思います。
今日は以上です。
＊もりけん塾に所属しています。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
