SVGアイコンのダークテーマ対応

▼概要
AkarengaLT vol.34 (2025/6/22) での発表資料です。
OSSプロジェクト「kestra」でのIssue対応を通して学んだ、SVGアイコンのダークモード対応について紹介。

▼内容
1. SVGとは？ベクター画像の特徴
2. ダークモード時にアイコンが見えない問題の解決
a. fill="currentColor"による親要素の色継承
3. システム的な検知方法
a. PlaywrightのVRTやVitestでの自動テスト
b. CSS設計でのテーマ色一元管理

Transcript

1. SVGアイコンのダークテーマ対応 - OSSを通して学んだこと - 2025/6/22 Akarenga LT enumura1
2. アジェンダ 1. SVGとは？ 2. OSSとissue 4. まとめ 3. 今後の活用 2
3. 今回のテーマ - テーマ：SVGとは？使うと嬉しいポイントは？色の変え方は？ - 内容： 1. SVGとは？ 2. SVGアイコンのダークモード対応 3. 色指定の抜け漏れ検知方法 3
4. 1. SVGとは？ - OSS（kestra）のissueを見つけた - SVGを説明できるほど理解してなかった（下記程度） - 構造的なコードとして書ける画像のようなもの - 拡大しても画像が粗くならない ▼なぜ調べようと思ったの？
5. 1. SVGとは？ - SVG：Scalable Vector Graphics - XMLベースの2次元ベクターグラフィックス形式 - W3Cが仕様を発表しているweb標準 - SVG 1.0 → 1.1 → 2.0（現在は SVG 2 草案） 出典: MDN Web Docs, W3C
6. 1. SVGとは？ - XML形式で記述 - 要素と属性で図形を定義
7. - XML形式で記述 - 要素と属性で図形を定義 1. SVGとは？
8. 1. SVGとは？ ▼なぜSVG？ - 解像度に依存しない - エディタで編集可能 - アニメーションも実装可能 - 軽量
9. 9 ▼SVGの要素（いくつか例） 1. SVGとは？
10. 1. SVGとは？ 項目 SVG（ベクター） PNG/JPEG/WebP（ラスター） 拡大時の品質 劣化なし ピクセレーションが発生 ファイルサイズ シンプルな図形は小さい 大きい 編集 CSS/JSで動的に変更可能 画像編集ソフトが必要 ユースケース アイコン 、ロゴ、図形 写真、複雑な画像
11. ▼実物を比較 1. SVGとは？ - ベクター：数式で座標を計算。点と線で描画。 　　　　 拡大してもでも鮮明 - ラスター：ピクセルで構成。拡大すると画質が劣化 - 拡大比較サイト(ベクター vs ラスター画像) - https://svg-comparison.vercel.app/
12. 1. SVGとは？ クッキリ表示 ぼやけて表示
13. 2. OSSとissue 13 ▼コントリビュート内容 - リポジトリ：kestra - issue：アイコンがダークモード時に⾒えなくなるUI問題 - 対応内容： - SVGアイコンにCSSの属性を追加 - テーマ⾃動切り替え対応 参考：kestraとは？
14. 14 ▼事象 ライトモード ダークモード アイコンは見える アイコンは見えない - SVGアイコンの色が固定（黒色） で指定されている - ダークモード時も黒色 → 黒背景に黒アイコンで見えない・・ 2. OSSとissue
15. 15 ▼実際の修正⽅法 修正前のコード 修正後のコード 2. OSSとissue
16. 16 ▼fill属性とは？ 2. OSSとissue - fill属性：SVG要素の 塗りつぶし色 を指定（※） - 指定できる値：色名、HEXカラー、RGBカラー - SVGのfill属性に currentColor を指定すると、 親要素の colorプロパティ の値を自動的に継承し塗りつぶし 参考：MDN Web Docs - fill属性 ※：図形・テキスト用途の場合
17. 17 ▼実際の修正⽅法 修正前のコード 修正後のコード - 親要素のcolorプロパティの値を継承 - 親要素：color: #ffffff（⽩）➡ SVG（⼦要素）も⽩ 2. OSSとissue
18. 3. 今後の活用 18 - テーマの切り替え - 色指定の抜け漏れ - 自分：せっかくなので実務にどう生かすか考えてみた - システム的に検知できれば happy！ - 抜け漏れないようなCSSの設計がきたら happy！
19. 3. 今後の活用 19 1. VRT（Visual Regression Testing） a. PlayWright 2. UT a. Jest、Vitest 3. CSSの設計 a. テーマの色を一元管理 ▼テストの実装
20. 3. 今後の活用 20 1. VRT（Visual Regression Testing） a. PlayWright 2. UT a. Jest、Vitest 3. CSSの設計 a. テーマの色を一元管理 ▼テストの実装
21. 3. 今後の活用 21 ▼VRT - Themeを切り替え - toHaveScreenshot() - それぞれスクショ取得 - 画素レベルで差分を検知 - 変更時に自動で問題を検知 参考：Appendix テーマ別のVRT
22. 3. 今後の活用 22 ▼PlayWright 想定外の配色を検知 赤色でハイライト
23. 3. 今後の活用 23 1. VRT（Visual Regression Testing） a. PlayWright 2. UT a. Jest、Vitest 3. CSSの設計 a. テーマの色を一元管理 ▼テストの実装
24. 3. 今後の活用 24 ▼UT - テーマの切り替えテスト - アイコンの色が想定通り切り 替わっているか確認 - テーマごとの色指定をユニットテ ストで保証
25. 3. 今後の活用 25 1. VRT（Visual Regression Testing） a. PlayWright 2. UT a. Jest、Vitest 3. CSSの設計 a. テーマの色を一元管理 ▼テストの実装
26. 3. 今後の活用 26 ▼CSSの設計 - SVG個別にfill指定が不要 → 設定漏れなし - テーマ切り替え制御が容易 → data-theme属性だけで全体 制御 ライト ダーク
27. 4. 今後の活用 27 data-theme="dark" を追加するだけで、ページ内の全SVGアイコンが一括切り替え 追加 ✅
28. 4. まとめ 28 ▼今回学んだこと - ベクター画像とラスター画像について - SVGアイコンは fill="currentColor" 塗りつぶしできる - 親要素の color プロパティを自動継承 - PlaywrightのVRTやVitestで自動テスト、CSS設計
29. Appendix 29
30. Appendix：テーマ別の VRT
31. Appendix：kestra ▼kestraとは？ - リポジトリ：kestra - kestraとは？：ワークフロー⾃動化ツール - 使い⽅：ワークフローをyamlで記述 - 例：ETL、データパイプラインの実装 - 類似ツール：Apache Airflow
32. 1. SVGとは？ ▼ユースケース - サイトのロゴ（シンプルな図形） - アイコン（ボタンやメニュー） ▼ SVG ▼ PNG、JPEG、他 - 写真全般（人物、風景、商品写真など） - アイコン（ボタンやメニュー） 🏞 󰞴
33. 2. 基本的な書き方 1. <animate> タグ - 基本的なアニメーション a. サイズ、色、透明度などの属性を変化 b. 例：円のサイズを大きくしたり小さくしたり 2. <animateTransform> タグ - 変形アニメーション a. 回転、移動、拡大縮小 b. 例：図形をくるくる回転させる 3. <animateMotion> タグ - パス移動アニメーション a. 指定した軌道に沿って移動 b. 例：曲線や複雑な軌道を描いて移動