今回の仕上がり
再生・一時停止の線画を、意味の分かる文字と並べた作例です。Ionicの公式SVG2枚は変更せず、自作カウンターに使いました。開始を押すと0.5秒ごとに1増え、一時停止を押すとその値で止まります。ゲームや音声を再生する例ではありません。
SVG・HTML・CSS・MIT全文のZIPを保存 · 単独で開く
SVG2枚を操作に添える
- ZIPを展開し、example.htmlとSVG2枚、sample.css、LICENSE.txtが同じフォルダーにあることを確認します。
- example.htmlを開き「カウントを開始」を押します。画像は一時停止の形に変わり、文字も切り替わります。
- 「カウントを一時停止」を押します。画像だけでなく「停止中です」という文字でも状態を確認できます。
- 「0に戻して停止」は値と状態を戻します。Tab・Spaceでもボタンを操作できます。
元のSVGのviewBoxは0 0 512 512で、作例の表示サイズは32×32pxです。文字が操作名を伝えるため、imgのaltは空にしています。形だけで意味を伝えようとせず、文字と一緒に使う例です。関連する画像の役割とaltの考え方も参考になります。
今回の素材は公式リポジトリのsrc/svgから、play-outline.svgとpause-outline.svgを取得して保存しました。公式サイトは開けましたが、検索欄でpauseを入力したあとのアイコン一覧は確認できなかったため、検索からのダウンロード成功とは記していません。
利用条件と未確認範囲
作者・提供元はIonicです。取得したMITライセンス全文は、著作権表示と許諾文を保持する条件で利用・改変・再配布などを認めています。作例のZIPにはその全文を同梱しています。SVG2枚は改変していません。HTMLとCSSは編集部の自作・CC0で、第三者の素材のライセンスと分けています。
公式サイトにはSVGとMITの案内がありますが、ここで使ったのは取得時点のGitHub mainの2ファイルです。公式サイトのバージョン表示と同一のリリースに固定して取得したとは扱っていません。ロゴ類、全アイコン、専用Web Componentやフレームワークへの導入は今回の確認範囲外です。
2026年10月20日、隔離したEdgeでPC・375px幅、ライト・ダークの表示とカウンターの開始・停止を確認。ZIPを保存して使う場合は、ライセンス全文とSVGを一緒に残してください。スマホ実機、他ブラウザ、支援技術による読み上げは未確認です。フォームにボタンを置く場合はbuttonのtypeの比較も確認できます。