せっかくHTML5なんで、SVGタグを使って画像をきれいに表示させることを検討してもらったのですが、
それを利用しようとしてわからなかったことが、サイズ指定でした。
imgタグだと、widthとheight属性を設定するかCSSで同様の指定をすればいいだけです。
さくっとできます。
しかし、SVGだとキャンパス制御になるためちょっとだけ面倒なようです。その面倒な面がわかったため取りまとめします。
svgタグは、HTML5で追加された新しいタグのようで「キャンパス」という表現が使われていることから、
ブラウザをキャンパス用に自由に自在に位置指定でオブジェクトを配置できる。
けれど、その自由さ故の分かりにくさがあります。
今回、サイトのロゴファイルをSVGファイル形式で保存した、logo.svgというファイルを作成した前提で説明です。
logo.svgで表示される大きさは幅450px高さ114pxの画像を表示するものと考えてください。
画像の表示自体は下記のobjectタグを使えばできます。もろもろはブラウザに任せます。
<object type="image/svg+xml" data="/images/logo.svg" id="svgID"> </object>
ただし、上記のobjectタグのwidthとheightでは、キャンバスサイズ指定をするだけの属性になるため、
表示するオブジェクトに対しては働きません。
そこで、SVGファイル内の記述を展開して、svgタグで囲むことにします。
ようは、キャンバスをキャンバスで囲むことで表示制御するのです。
具体的には下記のようになります。
<svg ...
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 450 114"
x="0px" y="10px" width="225px" height="57px"
... >
<svg ...>
<!-- /images/logo.svg ファイルの内 450px X 114px の画像表示 記述-->
</svg>
</svg>
上記の「...」の部分はその他に必要となる属性を省略しています。
重要になるところだけ表示しました。
ポイントは、preserveAspectRatio と viewBoxです。
viewBoxは取り扱うオブジェクトのサイズを指定します(位置指定できるため実際のオブジェクトの使いたい部分を指定できます)。ようは、対象物に向けられたカメラの位置および表示する領域を指定することになります。
x,yはキャンパスの相対位置で、width,heightはキャンパスの大きさです。
上記で、今回のポイントは抑えているため、やることはわかるかと思います。
以下の説明は、上記のHTMLを自分なりに納得する形で説明した文章になります。
（HTMLを見て分かる人は不要です)
SVGのpreserveAspectRatioやviewBoxとブラウザの関係をリアル世界で言い換えると
撮影カメラと撮影結果を投影するプロジェクタを、ブラウザ上で制御するイメージになると思います。
例えば、ブラウザを壁とした場合、
- x,yで、壁にプロジェクターの投影する位置を指定、
- width,heightで、投影されるスクリーンの大きさを指定する
ことにになります。
また、スタジオ側のカメラの制御を、viewBoxで行うようなイメージになるのではないでしょうか。
上記のHTMLをスタジオとプロジェクトたで説明すると、
- 今回の撮影対象物は、450px X 114px のサイズです。
- 壁に投影する位置は、壁の左上隅に10px程下げて設定しています。
- 投影されたスクリーンの大きさは、225px X 57px です。
- カメラで、撮影対象物そのものを表示することを指定(左隅から450pxの幅で、114pxの高さを撮影するよう指定)
- これが、viewBoxに対応
- そして、撮影した対象物が投影時に幅を基準に最大表示になるように指定しました
- これが、preserveAspectRatioの(xMinYMin meet)になります。
- もし、meetをsliceにすると、撮影対象物そのものを撮影する指定をしても、原寸を基準にスクリーンの大きさの内容しか表示されないことになります
※スクリーンは投影対象物より小さいです。ここを実現するためにはまりました
( 読み直していて、なんか遠回りな対応をしたのかもと思ったりしましたが、理解するための通り道だったとします )