この記事の内容
あやね
ベクターグラフィックは、現代のインターフェースデザインで広く使われています。形状を数式で表現するベクターアイコンは、高解像度ディスプレイや Retina 画面でも、ラスター画像のような画素の粗さを生じさせずに拡大・縮小できます。UI デザイナーやフロントエンド開発者にとって、ベクター素材は複数の解像度に対応する素材の引き継ぎを簡単にし、幾何学的なインターフェース画像のファイル容量を抑える助けになります。
Web アプリ、モバイルインターフェース、デザインシステムのいずれを作る場合でも、SVG アイコンの作成は役立つスキルです。この記事では SVG 形式の基本を確認し、Pixso を使って SVG アイコンを作成する手順を紹介します。
1. SVG とは？
SVG は Scalable Vector Graphics の略です。World Wide Web Consortium（W3C）が管理する、XML ベースのオープンなベクター画像形式です。SVG ファイルはテキストのマークアップコードで記述されるため、表示サイズを変更しても、それだけでファイル容量が増えたり輪郭がぼやけたりすることなく、さまざまな画面サイズに合わせて拡大・縮小できます。
PNG や JPEG などのラスター画像形式とは異なり、SVG は DOM や CSS と直接連携できます。開発者やデザイナーは SVG のパスを確認し、コードで線の色を動的に変更したり、操作に応じた UI の状態を表すために要素をアニメーションさせたりできます。
2. UI デザインで SVG アイコンを使う理由
プロダクトチームが従来のラスター画像に代えてベクターアイコンを選ぶ主な理由は、次の 3 つです。
- 保守と開発の負担を減らせる：インラインで埋め込む、または currentColor を使って色を指定することで、1 つの SVG 素材を CSS 変数によりライトテーマとダークテーマに対応させられます。テーマごとに別の素材ファイルを用意する必要はありません。デザイナーは複数のラスター画像を書き出す代わりに 1 つのベクター素材を作成すればよく、開発側の管理負担も軽減できます。
- 動的にカスタマイズできる：SVG のパスは CSS や JavaScript で制御できるため、Web アプリでアイコンの色や線の太さ、ホバー時のアニメーションなどを、その場で変更できます。
- ファイル容量を抑え、読み込みを軽くできる：シンプルなアイコンや幾何学的な記号では、SVG は一般にラスター形式より小さなファイルにできます。適切に圧縮して埋め込むことで、レスポンシブな Web インターフェースで不要な通信量を減らせます。
3. Pixso で SVG アイコンを作成する手順
Pixso は精密な図形ツールを備えたベクター編集キャンバスを提供しており、短い手順で SVG アイコンを作成できます。ここでは、バランスの取れた「追加」アイコンを作る方法を順番に説明します。
ステップ 1：Pixso で新しいファイルを作成する
Pixso アカウントにログインし、ダッシュボードのワークスペースで「New File」をクリックして、共同編集できる空のキャンバスを開きます。
ステップ 2：アイコン用のフレームを作る
上部ツールバーからフレームツールを選ぶか、F キーを押します。小さなインターフェースアイコンの基本サイズとして、16×16 px の正方形フレームを作成します。
ステップ 3：外側の円を追加する
楕円ツール（O）を選びます。フレーム内で左上の座標が（1, 1）になる位置に、14×14 px の円を描きます。円の中心は（8, 8）です。右側のプロパティパネルで塗りを削除し、線の太さを 1 px、色を #000000 に設定します。フレーム境界との間に 1 px の余白を取り、線が切れていないか確認してください。
ステップ 4：プラス記号を作る
長方形ツール（R）を選びます。角を丸めた 1×8 px の縦棒を作成します（border-radius: 1px）。これを複製し（Command+C / Ctrl+C、続いて Command+V / Ctrl+V）、複製した棒を 90 度回転させ、両方の棒を円の中心（8, 8）に正確にそろえます。下のスクリーンショットは、同じ図形ツールと書き出し操作を、円の中に T 字を置いた例で示しています。この記事のプラス記号を作る場合は、交差する 2 本の長方形の中心をそろえてください。
ステップ 5：SVG として書き出す
レイヤーパネルで、親となる 16×16 px のフレームを選びます。書き出しパネルを開いて SVG を選択し、アイコン素材を書き出します。これで、開発用に内容を確認できる SVG ベクターファイルができました。
4. ベクターアイコンを設計する際のポイント
さまざまな OS でもアイコンを鮮明に表示できるよう、次の基本的な設計原則を意識しましょう。
- バウンディングボックスを統一する：16×16 px、20×20 px、24×24 px など、共通の正方形フレームを使ってアイコンを作成します。バウンディングボックスが統一されていれば、フロントエンドへ組み込む際の占有領域を予測しやすくなり、文字ラベルとの位置合わせも簡単になります。
- 見た目の余白を確保する：グリッドの大きさや線幅に応じて、通常は 1〜2 px 程度の適切な内側の余白を取ります。フレームの内側に余裕を持たせることで、線の外縁やサブピクセルのアンチエイリアスが viewBox の端で切れるのを防ぎやすくなります。
- 指定した親フレームを書き出す：このベクター作成手順では、親フレームを書き出すことで、出力 SVG の viewBox 属性と基準となる配置を維持します。
5. SVG の図形要素と CSS プロパティ
以下は、SVG であらかじめ定義されている図形要素と、その意味の簡単な一覧です。
下のコード画像は、円枠の中に T 字を配置したアイコンの書き出し例です。幅 16、高さ 16 の SVG と、塗りのない円の指定を確認できます。本文の「追加」アイコンのプラス記号とは形状が異なるため、実際のパスは自分で作成して書き出した SVG で確認してください。
よくある質問（FAQ）
Q1. SVG アイコンを書き出す前に、線をアウトライン化するべきですか？
線をアウトライン化して塗りのあるベクターパスにすると、形状に合わせて線の厚みも拡大・縮小され、CSS の継承による線の見た目の変化を避けやすくなります。一方、線のまま残せば、開発者は CSS から stroke-width や stroke-linecap を変更できます。動的なスタイル変更が必要なのか、形状を固定して維持したいのかに応じて、チームで選びましょう。
Q2. Web 開発でアイコンフォントより SVG アイコンが選ばれるのはなぜですか？
現在のカラーフォントは多色のグリフに対応していますが、インライン SVG には、追加のフォントファイルを要求せずに使え、DOM のスタイルやアニメーションと直接連携できる利点があります。また、ブラウザー間での描画やアクセシビリティ用マークアップを制御しやすいため、広く使われています。
Q3. スクリーンリーダーでも使いやすい SVG アイコンにするには？
装飾だけを目的とする SVG アイコンには aria-hidden="true" を指定し、支援技術が不要な内容を読み上げないようにします。検索やナビゲーションなどを実行するアイコンボタンでは、親の button 要素に、表示テキストや aria-label などで操作を表す明確なアクセシブルネームを付けます。SVG がその名前を補う装飾なら、SVG 側は aria-hidden="true" にします。SVG 自体が独立した意味を伝える画像の場合に、role="img" と簡潔な title 要素などを使い、画像としての名前を提供します。
Q4. 書き出した SVG コードから不要なメタデータを取り除くには？
ベクターデザインツールで書き出すと、エディター固有のメタデータ、空のグループや既定のグループ構造、必要以上に細かい小数値が含まれる場合があります。チームでは、SVGO などの後処理ツールを使って不要な XML ノードを削除し、パス座標を簡略化することで、本番環境へ配置する前にコードを整理することがあります。
まとめ
基本的な図形ツールとバウンディングボックスの位置合わせを身に付ければ、整理された拡大・縮小可能なベクター素材を作成できます。
Pixso は、精密なベクターペンツールとアイコン用プラグインを備えた、幅広いアイコン制作に使える環境です。プラグインからは、すぐに使える数千点のコンポーネントにもアクセスできます。
さらに、Pixso リソースコミュニティの豊富なライブラリでは、無料の SVG アイコンや UI キットを探し、カスタマイズしてダウンロードできます。
Pixso を試して、ベクターアイコンの制作からインターフェースデザインまでの作業を整えてみましょう。
