プラスがあるのにマイナスがない

Posted at 2024-11-16

アイコン探し

アプリで使用するアイコンってどうしてますか？

私は、Android なら Android Studio で Vector Asset から追加できるアイコンでいいのがないか探すことをよくやります。Vector Asset で表示されるアイコンは、以下の Web サイトからも確認できます。

Material Symbols & Icons - Google Fonts
https://fonts.google.com/icons

どれにしようかなと Icon を見ていると、アイコンにプラス記号をつけたものがよくあります。このアイコンみたいに。

アイコンを検索してみるとわかりますが、アイコンにマイナス記号をつけたものはあまり多くありません。需要がないということなのかもしれませんが、たまにマイナスバージョンがあればいいのになと思うことがありました。こんな感じに。

以前は、マイナス記号があるものを第2候補で採用していましたが、この前、ベクター画像ならパス編集すればいいじゃん という単純なことに気づいて、パスを変更してプラス記号付きのアイコンをマイナス付きのアイコンへ変更したので、その過程を残しておきます。

ベクター画像とは？

ちょっとだけ、ベクター画像について触れておきます。
ベクター画像（ベクターグラフィック）とは、画像を点（座標）とそれを結ぶ線（パス）や形状を数式で表現する画像形式のことで、ビットマップ画像（ラスタ画像）とは異なり、個々のピクセルではなく、数学的な計算に基づいて描画されます。

いくつか形式はありますが、SVG (Scalable Vector Graphics)は、ウェブで広く使われており、HTMLやCSSと組み合わせて利用でき、先ほどの Web サイト（Material Symbols & Icons）でも、PNG形式に加えて、SVG形式でダウンロードできるようになっています。

ベクター画像を編集

さっき紹介したプラス付きのアイコンファイル（svg）を編集していきます。

1. path をチェック

テキストエディターで svg ファイルを開いてみると、path が２つ定義してある画像とわかります。この path を編集することで、画像を変化させることができます。

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px"
    fill="#000000">
    <g>
        <rect fill="none" height="20" width="20" />
    </g>
    <g>
        <g>
            <g>
                <path d="M9.6 14H6v-1.5h4.11c.35-.68.82-1.27 1.41-1.75H6v-1.5h8v.35c.32-.06.66-.1 1-.1.71 0 1.38.14 2 .38V4.5c0-.83-.67-1.5-1.5-1.5h-3.57c-.22-.86-1-1.5-1.93-1.5-.93 0-1.71.64-1.93 1.5H4.5C3.67 3 3 3.67 3 4.5v11c0 .83.67 1.5 1.5 1.5h5.38c-.24-.62-.38-1.29-.38-2 0-.34.04-.68.1-1zM10 3c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zM6 6h8v1.5H6V6z" />
            </g>
            <path d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z" />
        </g>
    </g>
</svg>

2. プラス記号の path を特定

path が２つ定義してあるので、どちらかがプラスを表現している気がします。確認のため、path を片方だけ消して、以下のxml ファイルにしてみます。

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px"
    fill="#000000">
    <g>
        <rect fill="none" height="20" width="20" />
    </g>
    <g>
        <g>
            <g>
            <path d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z" />
        </g>
    </g>
</svg>

すると、こんな画像になりました。

つまり、この path が、プラスを表している部分とわかります。

<path d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z" />

3. path の定義を理解する

path がどのように定義してあるか理解してプラス部分を変更していく必要があります。ベクター画像が得意な人は、すぐに理解できると思いますが、path を理解するのは大変なので、AI の力を借ります。

プロンプト

svg 形式のベクター画像で、以下のpathが定義されています。わかりやすく説明してください。

<path d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z" />

4. ChatGPT による path 説明

SVG の <path> 要素は、パス（線や曲線）を定義するために使用されます。d 属性には、描画するパスの命令が含まれています。この命令を順に分解して説明します。

`<path d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z" />`

1. `M15 11`

Move to: ペンの位置を座標 (15, 11) に移動します（描画はしません）

2. `c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4`

Curve (c): 現在の位置から曲線を描画します
- -2.21 0: 現在位置から X に -2.21 移動、Y は変化なし（曲線の制御点1）
- -4 1.79: 曲線の終点が現在位置から X に -4、Y に +1.79
- s1.79 4 4 4: 次の曲線の制御点2と終点を定義
- 最終的に、これらの命令で楕円形（円に近い形状）が描画されます

3. `zm2 4.5`

z: 現在のパスを閉じます（開始点に戻る）
Move to (m): 閉じた後、新しい位置 (2, 4.5) を基準に移動

4. `h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z`

h-1.5: X 軸に -1.5 移動
V17: Y 座標を 17 に変更（垂直線を描画）
h-1: X 軸に -1 移動
v-1.5: Y 座標を 1.5 下げる（垂直線を描画）
この一連のコマンドで「+」の形状が中央に追加されます

図形全体の説明

円形: 中心 (15, 11) に半径が約 4 の円
中央の「+」記号: 円の中に描かれた十字

これらはボタンやアイコン（例：追加操作用ボタン）のデザインによく使われる形状です。

5. プラス記号の path を編集

AI による回答から、h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z が、「+」の形状を表していることがわかりました。h, H, v, V といった平行線や垂直線を使用して、プラスを表現しているようです。

編集する path が特定できたので、編集していきます。プラスをマイナス記号にしたいので、垂直方向への移動部分を編集していきます。

編集前: h-1.5V17h-1v-1.5H13v-1h1.5V13h1v1.5H17v1z
編集後: H13v-1H17v1z

つまり、プラスの上下要素である h-1.5V17h-1v-1.5 とh1.5V13h1v1.5 を削除すれば OK です。

6. 完成系

svg ファイルは、最終的に以下になり、プラス記号からマイナス記号への変更が完了しました。

SVG

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px"
    fill="#000000">
    <g>
        <rect fill="none" height="20" width="20" />
    </g>
    <g>
        <g>
            <g>
                <path
                    d="M9.6 14H6v-1.5h4.11c.35-.68.82-1.27 1.41-1.75H6v-1.5h8v.35c.32-.06.66-.1 1-.1.71 0 1.38.14 2 .38V4.5c0-.83-.67-1.5-1.5-1.5h-3.57c-.22-.86-1-1.5-1.93-1.5-.93 0-1.71.64-1.93 1.5H4.5C3.67 3 3 3.67 3 4.5v11c0 .83.67 1.5 1.5 1.5h5.38c-.24-.62-.38-1.29-.38-2 0-.34.04-.68.1-1zM10 3c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zM6 6h8v1.5H6V6z" />
            </g>
            <path
                d="M15 11c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 4.5H13v-1H17v1z" />
        </g>
    </g>
</svg>

さいごに

最近は、英語を一旦 Google 翻訳にして読むみたいな感じで、コード等を読む前に一旦、AI に説明させることをよくしています。要点をかなりいい感じにまとめてくれるのでおすすめです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up