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

2026/10/30 Niigata5分Tech #28 で話した資料です

1. SVG だけで Web サイトを作って みた話 2026/10/30 Niigata 5min tech #28 girigiribauer
2. 自己紹介 @girigiribauer.com at Bluesky しょうがの空 美味しかったです 2
3. 昔からの夢 誰しもが一度は考える、 SVG だけで Web サイトを作る夢 だがそんな暇な時間はない...先送りの日々... お盆についカッとなって作ってしまった 3
4. 作ったもの ばうあーらぼ https://lab.girigiribauer.com HTML 内に全面 SVG コンテンツではなく、 最初から index.svg で 提供する Web サイト SVG は XML であり文書 4
5. コンセプト 作品集ではなく 「工夫」のメモ 往年の Flash コンテンツで使われていたテクニックなども見られな くなってしまったのを、改めて手元でアーカイブしたい 完全に自己満足・趣味の世界 5
6. デモ 6
7. SVG でも大抵のことはできる SVG も HTML と同じ XML の仲間 中に <style> も <script> も書ける <a href="..."> でリンクも貼れるし、 history API を使えばペー ジ遷移もできる URL の /index.svg もサーバーの設定で / に省略できる 7
8. 往年の Flash のように振る舞い、 かつスマホで見られる iPhone が普及したことで、再生できない Flash は滅ぼされた ブラウザごとの SVG の挙動が揃って Flash 並みに使えるように 再び SVG に日の光が当たる可能性も...！？ 8
9. 弱いところ・妥協したところ 9
10. 弱いところ・妥協したところ 文字の表示に弱い（SVG は文書なのになんでや！） メタタグが入れられない（HTML ではない...） 10
11. 文字の表示に弱い SVG の <text> は折り返しもできないし、検索にも弱い コンテンツ内に 極力文字を置かない ルールにした 文章はコンテンツごとの <title> , <desc> に逃がす（読み上げに も効く） 11
12. メタタグが入れられない さすがに SNS でシェアして og:image が表示されないのは悲しい やむを得ず SNS ボットのときだけ OGP 用の HTML を返す...（妥協） OGP 画像に SVG は使えないため、ビルド時に PNG に変換...（妥協） 12
13. まとめ 13
14. まとめ SVG だけで Web サイトは 作れる...！ SVG の Web サイトが流行 れば、 Google 先生も検索 結果に desc 要素を読んで くれるかも？ 14