FirefoxのUIに対応したSVG画像を作成する
タイトルの通り、Firefox の UI で使用されるアイコンを独自に作成する方法をまとめた備忘録です。
私は SVG の構造を全く理解していません。ぷよぐやみんぐわかんない。
この記事は「なんかできた！」ということをまとめたメモであり、その理屈などを聞かれても答えきれない箇所が数多くあります。あくまで参考程度にご覧ください。
ベクター画像を作成
欲しいアイコンがなければ始まりません。適当なグラフィックソフト (いわゆるイラレ系のソフト) などを使い、ベクター画像を作成します。
UIのアイコンですので、基本的には単色で作成します。複数の色やグラデーションも使えるかは未検証ですが、一応そちらの解説も書いておきます。
今回はこのようなアイコンを作ってみました。使用ソフトはVectornatorです。
完成したらこの画像を書き出すのですが、ここでいくつか設定をします。
まず、キャンバスのサイズを事前に実際にUIで使用するサイズにしておきます。今回は 16×16px にしました。
また、テキストやラインはすべてアウトライン化 (図形に変換) しておいてください。
書き出すときは、「背景を含む」「Vectornatorの属性を残す」などをオフにしてみました。中身を書き換えるのは変わりませんが、余計な情報は事前に削ぎ落としておくと分かりやすいです。
余計な要素を消す
書き出したSVGファイルを適当なテキストエディタで開きます。今回はCotEditorを使用しました。
ファイルを開くと、このような表示になりました。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Vectornator (http://vectornator.io/) -->
<svg height="16.0px" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="16.0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="レイヤー-1">
<path d="M6.79526 0C6.48219 0 6.19503 0.251542 6.15379 0.561889L5.87216 2.68281L4.45636 3.50004L2.48145 2.68212C2.19215 2.56232 1.83044 2.68565 1.67391 2.95684L0.469857 5.04316C0.31332 5.31435 0.387067 5.68952 0.635241 5.88046L2.33129 7.18554L2.33129 8.81585L0.635241 10.1202C0.387033 10.3111 0.313319 10.6857 0.469857 10.9568L1.67391 13.0432C1.83044 13.3144 2.19202 13.4374 2.48145 13.3179L4.45913 12.5013L5.87216 13.3172L6.15379 15.4381C6.19503 15.7485 6.48219 16 6.79526 16L9.20474 16C9.51782 16 9.80498 15.7485 9.84621 15.4381L10.1278 13.3172L11.5409 12.5013L13.5186 13.3179C13.808 13.4373 14.1696 13.3143 14.3261 13.0432L15.5301 10.9568C15.6867 10.6856 15.6125 10.3109 15.3641 10.1202L13.6687 8.81931L13.6687 7.18485L15.3648 5.88046C15.613 5.68955 15.6867 5.31435 15.5301 5.04316L14.3261 2.95684C14.1696 2.68565 13.808 2.56261 13.5186 2.68212L11.5409 3.49866L10.1278 2.68281L9.84621 0.561889C9.80498 0.251542 9.51782 2.25254e-07 9.20474 0L6.79526 0ZM8 5.34279C9.46754 5.34279 10.6572 6.53246 10.6572 8C10.6572 9.46754 9.46754 10.6572 8 10.6572C6.53247 10.6572 5.34279 9.46754 5.34279 8C5.34279 6.53246 6.53246 5.34279 8 5.34279Z" fill="#000000" fill-rule="nonzero" opacity="1" stroke="none"/>
</svg>頭が痛くなりますね！ これがSVGの中身です。
使うツールによっても表示は少しずつ変わってくると思いますが、今回はこれをベースに解説します。
ここからFirefoxのアイコンと同じような書き方に直していきます。ぶっちゃけここまで変える必要はないと思いますが、何が引っ掛かるか分かりませんからね。
まず、上の3行を削除して、 <svg height… を一番上の行にします。
次に、<defs/>、<g id="…"> と </g> を削除します。これらはSVGを外部ファイルにまとめ、サイト等の全体で効率よく使うための要素らしいですが、今回は恐らく必要ありません。
グラデーションの場合、2つの </linearGradient> または </radialGradient> で挟まれた文字列があると思います。この部分が色を定義していますので、消さないようにしましょう。
その結果、以下のようになりました。
<svg height="16.0px" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="16.0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.79526 0C6.48219 0 6.19503 0.251542 6.15379 0.561889L5.87216 2.68281L4.45636 3.50004L2.48145 2.68212C2.19215 2.56232 1.83044 2.68565 1.67391 2.95684L0.469857 5.04316C0.31332 5.31435 0.387067 5.68952 0.635241 5.88046L2.33129 7.18554L2.33129 8.81585L0.635241 10.1202C0.387033 10.3111 0.313319 10.6857 0.469857 10.9568L1.67391 13.0432C1.83044 13.3144 2.19202 13.4374 2.48145 13.3179L4.45913 12.5013L5.87216 13.3172L6.15379 15.4381C6.19503 15.7485 6.48219 16 6.79526 16L9.20474 16C9.51782 16 9.80498 15.7485 9.84621 15.4381L10.1278 13.3172L11.5409 12.5013L13.5186 13.3179C13.808 13.4373 14.1696 13.3143 14.3261 13.0432L15.5301 10.9568C15.6867 10.6856 15.6125 10.3109 15.3641 10.1202L13.6687 8.81931L13.6687 7.18485L15.3648 5.88046C15.613 5.68955 15.6867 5.31435 15.5301 5.04316L14.3261 2.95684C14.1696 2.68565 13.808 2.56261 13.5186 2.68212L11.5409 3.49866L10.1278 2.68281L9.84621 0.561889C9.80498 0.251542 9.51782 2.25254e-07 9.20474 0L6.79526 0ZM8 5.34279C9.46754 5.34279 10.6572 6.53246 10.6572 8C10.6572 9.46754 9.46754 10.6572 8 10.6572C6.53247 10.6572 5.34279 9.46754 5.34279 8C5.34279 6.53246 6.53246 5.34279 8 5.34279Z" fill="#000000" fill-rule="nonzero" opacity="1" stroke="none"/>
</svg>これで、構造としてはとてもシンプルになりました。<svg> <path> </svg> のサンドイッチです。複数のパスがある場合は、<path> が複数行になります。
今度は、パスの中の余計なものを取り除きます。
<svg> は、viewBox、height、width、xmlns だけを残して、あとは全部消してしまいましょう。
<path> からはまず、d="…Z 、fill と opacity 以外を削除します。
単色アイコンの場合は、fill と opacity も削除します。
これらはパスの色と不透明度を定義するものです。それぞれの値だけは覚えておいてください。
1つのアイコンに複数の色を充てる、またはグラデーションを使用する場合は、fill と opacity は残しておきましょう。
<svg height="16.0px" viewBox="0 0 16 16" width="16.0px" xmlns="http://www.w3.org/2000/svg">
<path d="M6.79526 0C6.48219 0 6.19503 0.251542 6.15379 0.561889L5.87216 2.68281L4.45636 3.50004L2.48145 2.68212C2.19215 2.56232 1.83044 2.68565 1.67391 2.95684L0.469857 5.04316C0.31332 5.31435 0.387067 5.68952 0.635241 5.88046L2.33129 7.18554L2.33129 8.81585L0.635241 10.1202C0.387033 10.3111 0.313319 10.6857 0.469857 10.9568L1.67391 13.0432C1.83044 13.3144 2.19202 13.4374 2.48145 13.3179L4.45913 12.5013L5.87216 13.3172L6.15379 15.4381C6.19503 15.7485 6.48219 16 6.79526 16L9.20474 16C9.51782 16 9.80498 15.7485 9.84621 15.4381L10.1278 13.3172L11.5409 12.5013L13.5186 13.3179C13.808 13.4373 14.1696 13.3143 14.3261 13.0432L15.5301 10.9568C15.6867 10.6856 15.6125 10.3109 15.3641 10.1202L13.6687 8.81931L13.6687 7.18485L15.3648 5.88046C15.613 5.68955 15.6867 5.31435 15.5301 5.04316L14.3261 2.95684C14.1696 2.68565 13.808 2.56261 13.5186 2.68212L11.5409 3.49866L10.1278 2.68281L9.84621 0.561889C9.80498 0.251542 9.51782 2.25254e-07 9.20474 0L6.79526 0ZM8 5.34279C9.46754 5.34279 10.6572 6.53246 10.6572 8C10.6572 9.46754 9.46754 10.6572 8 10.6572C6.53247 10.6572 5.34279 9.46754 5.34279 8C5.34279 6.53246 6.53246 5.34279 8 5.34279Z"/>
</svg>だいぶスッキリしましたね。
テーマへの対応等
Firefoxに限らず、ブラウザにはテーマというものがあります。
ライトモードなら黒、ダークモードなら白というように、テーマによってアイコンの色を変えなければならないかもしれません。
ここからはその部分を書いていきます。
単色アイコンの場合は、先ほど色と不透明度に関する情報を削除したと思います。この情報を <svg> の中に追加することで、全てのパスに同じ情報を適用できます (未検証) 。
早速やってみましょう。
色は fill="context-fill" 、不透明度は fill-opacity="context-fill-opacity" とすることで、テーマに合わせた色に設定できます。
任意の値にしたい場合は、色は16進数で "#000000" 、不透明度は1を最大として "0.8" などとします。
パスごとに個別の色を設定する場合は、値を "context-fill" のように書き換えることで、部分的にテーマに合わせた色にできるかもしれません (未検証) 。
色をグラデーションにする場合は、</なんとかGradient> の id を参照して fill="url(#Example)" とします。
こんな感じになりました。
<svg height="16.0px" viewBox="0 0 16 16" width="16.0px" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M6.79526 0C6.48219 0 6.19503 0.251542 6.15379 0.561889L5.87216 2.68281L4.45636 3.50004L2.48145 2.68212C2.19215 2.56232 1.83044 2.68565 1.67391 2.95684L0.469857 5.04316C0.31332 5.31435 0.387067 5.68952 0.635241 5.88046L2.33129 7.18554L2.33129 8.81585L0.635241 10.1202C0.387033 10.3111 0.313319 10.6857 0.469857 10.9568L1.67391 13.0432C1.83044 13.3144 2.19202 13.4374 2.48145 13.3179L4.45913 12.5013L5.87216 13.3172L6.15379 15.4381C6.19503 15.7485 6.48219 16 6.79526 16L9.20474 16C9.51782 16 9.80498 15.7485 9.84621 15.4381L10.1278 13.3172L11.5409 12.5013L13.5186 13.3179C13.808 13.4373 14.1696 13.3143 14.3261 13.0432L15.5301 10.9568C15.6867 10.6856 15.6125 10.3109 15.3641 10.1202L13.6687 8.81931L13.6687 7.18485L15.3648 5.88046C15.613 5.68955 15.6867 5.31435 15.5301 5.04316L14.3261 2.95684C14.1696 2.68565 13.808 2.56261 13.5186 2.68212L11.5409 3.49866L10.1278 2.68281L9.84621 0.561889C9.80498 0.251542 9.51782 2.25254e-07 9.20474 0L6.79526 0ZM8 5.34279C9.46754 5.34279 10.6572 6.53246 10.6572 8C10.6572 9.46754 9.46754 10.6572 8 10.6572C6.53247 10.6572 5.34279 9.46754 5.34279 8C5.34279 6.53246 6.53246 5.34279 8 5.34279Z"/>
</svg>微調整
おそらくこの時点でも普通に使えますが、ほんの少しだけ微調整をします。
<svg> の中の並びを viewBox、width、height、xmlns にして、width と height の .0px を削除しました。深い意味はありません。
また、<path> の後ろを /> から ></path> にしました。これまた深い意味はありません。
完成
完成した SVG は以下のようになりました。
<svg viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M6.79526 0C6.48219 0 6.19503 0.251542 6.15379 0.561889L5.87216 2.68281L4.45636 3.50004L2.48145 2.68212C2.19215 2.56232 1.83044 2.68565 1.67391 2.95684L0.469857 5.04316C0.31332 5.31435 0.387067 5.68952 0.635241 5.88046L2.33129 7.18554L2.33129 8.81585L0.635241 10.1202C0.387033 10.3111 0.313319 10.6857 0.469857 10.9568L1.67391 13.0432C1.83044 13.3144 2.19202 13.4374 2.48145 13.3179L4.45913 12.5013L5.87216 13.3172L6.15379 15.4381C6.19503 15.7485 6.48219 16 6.79526 16L9.20474 16C9.51782 16 9.80498 15.7485 9.84621 15.4381L10.1278 13.3172L11.5409 12.5013L13.5186 13.3179C13.808 13.4373 14.1696 13.3143 14.3261 13.0432L15.5301 10.9568C15.6867 10.6856 15.6125 10.3109 15.3641 10.1202L13.6687 8.81931L13.6687 7.18485L15.3648 5.88046C15.613 5.68955 15.6867 5.31435 15.5301 5.04316L14.3261 2.95684C14.1696 2.68565 13.808 2.56261 13.5186 2.68212L11.5409 3.49866L10.1278 2.68281L9.84621 0.561889C9.80498 0.251542 9.51782 2.25254e-07 9.20474 0L6.79526 0ZM8 5.34279C9.46754 5.34279 10.6572 6.53246 10.6572 8C10.6572 9.46754 9.46754 10.6572 8 10.6572C6.53247 10.6572 5.34279 9.46754 5.34279 8C5.34279 6.53246 6.53246 5.34279 8 5.34279Z"></path>
</svg>ブラウザ上ではこのように表示されるはずです。
まとめ
以上、壮大なメモ帳でした。
色々と書き換えましたが、一番大事なのは色と不透明度の設定を context にすることな気がします。知らんけど。
ところで、今回は width、height などの値を全部 16 で固定しています。16 以外の数字や 100% などの割合にすることもできるのですが、それだとどうなるんでしょうか。私には分かりません (無能) 。
参考サイト
何もわからないなりに試行錯誤するにあたって、以下のサイトには大変お世話になりました。ありがとうございます。