レスポンシブデザイン対応 SVG のサンプル

リキッドレイアウト寄りの内容ですが、知識として必要なので勉強しました。

img タグを利用して svg ファイルを画像として読み込む場合はこの内容は関係ありません。

サンプル

ウインドウサイズに合わせて SVG の大きさが変化します。

Yusai Works レスポンシブデザインで SVG を使えるようにしてみたいです。

色のついている矩形が viewbox の領域です。

中身

<style>
svg{
    width:100%;
    height:240px;
}
@media screen and (max-width:480px){
    svg{
      height:160px;
    }
}
</style>
<svg viewbox='0 0 640 240'>
...
</svg>

現在確認できている問題点

フォントサイズの問題

SVG 内部のフォントは画像(オブジェクト)サイズに合わせて小さくなりますが、ブラウザの設定でフォントの最小サイズが十分に小さくない場合、縮小処理がうまくいかず、画面からはみ出てしまう可能性があります。

HTML のような自動改行もないので、どうすることもできません。
調べてみたところ SVG 1.2 には textArea という機能が追加されるようなので、それを利用することになりそうです。
SVG Tiny 1.2 Text in an area

高さの問題

画像は幅(または高さ)を指定すると高さ(または幅)を自動で調整してくれますが、埋め込み SVG はリサイズしてもらえません。(img タグで読み込んだ場合は画像と同じ扱いとなります)

必要であればメディアクエリを使って高さの再調整をして問題回避しましょう。(今回の例は 480px で切り替わるようになっています)