Svgアイコンを作成する
データ量を気にしないなら、Adobeのグラフィックアプリで元絵を描き、Svgで出力すれば、どんな画像や図形のSvg画像も作れると思います。 しかし、JavaScriptツールやWebページの「ボタン」「アイコン」などに利用する場合は、データ量に気を遣う必要があります。 そんな用途の「Svg画像」を制作例として、先日行ったアイコンの制作過程を紹介しておきます。
オリジナルの Svgが必要になった
下のグリーンで示したアイコンは、「AmbTV Comfy」という JavaScriptツールが追加する、動画コントロールのアイコンです。
このアイコンは、Win絵文字を利用して表示していましたが、Win10とWin11で、デザインが異なってしまいます。 この改善のために、「Svg」でアイコンを作って表示する事にしました。
アイコンをデザインする
動画画面のコントロール部のスクリーンショットを使って、新しいアイコンのデザイン案を幾つか作って推敲しました。
下は最後に決定した案で、200×200pix（ピクセル）です。『ウインドウ内で動画を拡大する（全画面ではない）』をイメージし易いデザインにしました。
◎ この場合は「白色」のアイコンを表示するために、反転した黒で描いています。
◎ アイコンに適した元画像のサイズは、縦横 150 ～ 300pix 程度です。
◎ Svgへの変換を考慮して、モノクロ2値 の png画像 で出力します。
◎ 元画像は必ずしも正方形である必要はありません。
◎ 元画像の周囲に少し余裕を持たせた方が、扱い易い場合が多いです。 これは、通常のフォントがその様に作られているからです。
png ➔ svg 変換
これは以下のサイトのサービスを利用します。 他のサイトやグラフィックアプリを使っても可能と思います。
「SVG変換」は、データ量と画像の美しさを天秤にかける必要があります。 判断の基準は、どの程度までデータ量が許されるかによります。 私は、アイコンの Svgのデータ量を 数500kB～1.5KB 程度にする事が多いのですが、今回は倍程度の 3.4KBを許容しました。
◎ このサイトで得られた「Svgコード」をメモ帳で開き、「<svg>～</sng>」の範囲以外を削除します。
「Simple SVG」でコードをダイエットする
上記のサイトで変換操作で得た「Svg画像」のコードを、「Simple SVG」で軽量化します。 このツールで、50～75%程度のデータに軽量化できます。
今回の例では、「5453文字」➔「3470文字」の軽量化ができました。
結果
「Svg画像」の実装は「svgコード」のHTML上での扱い方に従ってください。
ブラウザが表示する実際のページ上には、多数の「svg画像」のHTMLコード例があります。 HTML上で「img」を「svg」に差し替える方法は、そこから学べます。
◎「<svg viewBox="0 0 200 200">」の様に「viewBox属性」は必須です。
◎「Svg画像」のサイズを「style属性」「styleタグ」「css」等で指定します。
下は、「Svg画像」を「AmbTV Comfy」に実装した結果です。
元画像を、スクリーンショットから起こしたので、動画プレーヤーのデフォルトのアイコン「 」と全く同じサイズで、違和感のないデザインが得られました。