縮小しても使えるSVGアイコンの作り方。
単純で拡大縮小でき、不要なスクリプトや外部参照のないアイコンにします。飾りか意味を持つかを決め、使用箇所で適切な名前を付けます。
作業手順をタスクに合わせましょう。
意味、viewBox、線か塗りのスタイル、使うサイズを定めます。不要な外部参照のない最小のSVGを作り、実際のサイズで見ます。囲むボタンの名前を含め、使用箇所でアクセシビリティを決めます。
- 用意するもの
- 簡単なアイコン案とスタイル条件。
- 得られるもの
- viewBoxとアクセシブルなラベルを備えた編集可能なSVG。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
完成例
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
名前付きボタン内の装飾用SVGを別に読み上げるべきですか？
一般に飾りのアイコンを支援技術から隠し、ボタンのアクセシブルな名前で操作を伝えます。
経路の座標が正しいのに切れるのはなぜですか？
線の幅は経路の外にも広がります。想定する太さでviewBox、余白、表示境界を確認します。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑