SVG だけで Web サイトを作ってみた話 / 20261030-niigata-5min-tech

SVG だけで Web サイトを作ってみた話 2026/10/30 Niigata 5min tech #28
girigiribauer

自己紹介 @girigiribauer.com at Bluesky しょうがの空美味しかったです 2

昔からの夢誰しもが一度は考える、 SVG だけで Web サイトを作る夢だがそんな暇な時間はない...先送りの日々... お盆についカッとなって作ってしまった 3

作ったものばうあーらぼ https://lab.girigiribauer.com HTML 内に全面 SVG コンテンツではなく、最初から index.svg で
提供する Web サイト SVG は XML であり文書 4

コンセプト作品集ではなく「工夫」のメモ往年の Flash コンテンツで使われていたテクニックなども見られなくなってしまったのを、改めて手元でアーカイブしたい完全に自己満足・趣味の世界 5

デモ 6

SVG でも大抵のことはできる SVG も HTML と同じ XML の仲間中に <style>
も <script> も書ける <a href="..."> でリンクも貼れるし、 history API を使えばページ遷移もできる URL の /index.svg もサーバーの設定で / に省略できる 7

往年の Flash のように振る舞い、かつスマホで見られる iPhone が普及したことで、再生できない Flash は滅ぼされたブラウザごとの SVG
の挙動が揃って Flash 並みに使えるように再び SVG に日の光が当たる可能性も...！？ 8

弱いところ・妥協したところ 9

弱いところ・妥協したところ文字の表示に弱い（SVG は文書なのになんでや！）メタタグが入れられない（HTML ではない...） 10

文字の表示に弱い SVG の <text> は折り返しもできないし、検索にも弱いコンテンツ内に極力文字を置かないルールにした文章はコンテンツごとの <title>
, <desc> に逃がす（読み上げにも効く） 11

メタタグが入れられないさすがに SNS でシェアして og:image が表示されないのは悲しいやむを得ず SNS ボットのときだけ OGP
用の HTML を返す...（妥協） OGP 画像に SVG は使えないため、ビルド時に PNG に変換...（妥協） 12

まとめ 13

まとめ SVG だけで Web サイトは作れる...！ SVG の Web サイトが流行
れば、 Google 先生も検索結果に desc 要素を読んでくれるかも？ 14

SVG だけで Web サイトを作ってみた話 / 20261030-niigata-5min-...

SVG だけで Web サイトを作ってみた話 / 20261030-niigata-5min-tech

girigiribauer

More Decks by girigiribauer

Other Decks in Programming

Featured

Transcript