フロントエンドカンファレンス北海道2025
レギュラートーク(20分)

光る!動く!触れる!SVGの豊かな表現力で作るイラストの世界

cashfooooou カシフクトモヤ cashfooooou
3

アプリケーション開発でSVGのイラストを使う場面は多いですが、中身については実は見逃されがちです。このセッションでは、SVGの基本的な構造から、光る・動く・触れるイラストの実装方法、さらに情報可視化の応用まで、SVGの多彩な表現力と実用性を紐解きます。
line要素やcircle要素、path要素といった基本的な要素から、動的なイラストを定義できるanimate要素を使ってイラストを光らせたり動かしたりする方法にも触れます。tabindex属性を使ってキーボードでも操作可能にしたり、多言語に対応したりして、アクセシブルなイラストを作る方法も提案します。
後半では、SVG要素の機能と簡単なCSSを使って作る地図機能の実装の一例を紹介します。この実装は、天気予報図など、イラストと連動する情報を提供したい場面に応用できます。
SVGの魅力を再発見して活用の幅を広げましょう!