レスポンシブなsvgを作ったら背景画像を追加してみよう

svgを単なる画像ファイルだと考えていたら大間違いなんです．そこで今回はsvgに背景画像を追加して，画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します．
※2014/3/22 補足を追加


通常svgグラフィックはサイズ固定な場合が多いのですが，下の作業を行うだけでレスポンシブなsvg（サイズ可変なsvg）に変化します．

• ルートとなるsvg要素のwidth，height属性を削除する
• viewBox属性，preserveAspectRatio属性を追加する

ただこれだと，画像全体が拡大・縮小されてしまうためグラフィックの一部を固定位置・サイズとしたいケースに対応できません．

ところで，svgではcssを使ったスタイル指定が出来ます．であれば，cssのbackground-imageプロパティを利用できないかと考えます．svgグラフィックはルートとなるsvg要素の設定（viewBox属性等）に依存しますが，background-image等のcss設定はsvgに依存しませんから，htmlにおける背景画像と同等の結果が得られる筈です．それでは試してみましょう．


サイズ変更

object要素

img要素

<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <style><![CDATA[
:root{
 background-image:url("画像の参照先");
 background-repeat:no-repeat;
 background-size:64px 64px;
 background-position:10px 10px;
}
 ]]></style>
 <circle cx="100" cy="100" r="80" fill="orange" stroke="red" stroke-width="10"/>
</svg>

このようにサイズを変更しても固定位置に背景画像が表示されました．
（firefox，chrome，ieで動作を確認しました． ）

※img要素で背景画像を参照する場合はdata scheme形式で画像をsvgファイルに埋め込んで下さい．
※あくまで「背景」なので，「前面に表示する」ということは出来ません．
※cssアニメーションとも組み合わせることが出来るようです．（環境に依存します）

なぜこのような事が出来るのか?

この動作はhtml5仕様のスタイルづけされたxmlについての仕様として明確に定められています．svgは元々xmlファイルでしたから，そのルート要素にはxmlに対するスタイルづけ（＝htmlと同等）が有効となるのです．

※従って，webブラウザ以外のドローイングツールではcssによる背景画像は無効になります．

※なおその他のmarginやborder等のスタイルも原則として適用できるのですが，ブラウザ間の互換性に難があったり，動作が不安定であったりと現状では中々使い途が見つかりません．

※ルートのsvg要素以外のグラフィック要素はsvgにおけるスタイルづけルールに則るため，（一部を除き）htmlのcssルールは適用されません．

※svg2ではhtml5とsvg2間でのスタイル付けルールが広く統合されるため，今以上に様々なcssプロパティをsvgに適用可能となる予定です．

想定されるユースケース

例えばsvgファイルに対するコピーライト，ロゴ等，ウォーターマークの挿入等に使えるかも知れません．

教訓

このようにsvgは単なる画像フォーマットではなく，むしろhtmlに近い技術です．
発想を転換することで，これまで以上に豊かなグラフィック表現が可能となるでしょう．

補足

•  このテクニックとメディアクエリーとを組み合わせるとclown carテクニックと呼ばれるものになります．