【SVG】イメージ画像を配置する

動点Qちゃん

今日はSVGでもjpg画像などを使えるようにしましょう・・・

動点P

画像が使えると一気に華やかになるもんね！

今日も参考書は「Webで使える!SVGファーストガイド」です。

Amazon.co.jp: Webで使える!SVGファ-ストガイド : 相澤裕介: 本

＜image＞タグで画像を配置する
画像と図形を組み合わせる
縦横比が違う場合の見え方
WordPressでは画像のURLはどこで取得するの？

＜image＞タグで画像を配置する

SVG画像を配置する場合は、image要素タグを使います。

<image 　x=”左上のｘ座標” 　y=”左上のｙ座標” 　width=”幅” 　height=”高さ” 　xlink:href=”画像ファイルまたはurl”　/>

上の画像はsvgで配置したものです。

SVGのコード

<svg width="600" height="400" viewbox="0 0 600 400">
<image x="0" y="0" width="600" height="400" xlink:href="〇〇〇"/>
</svg>

画像と図形を組み合わせる

イメージ画像と、他のsvg図形を組み合わせたデザインも描画することができます。

SVGのコード

<svg width="600" height="400" viewbox="0 0 600 400">
<image x="0" y="0" width="600" height="400" xlink:href="〇〇〇"/>
<rect x="0" y="0" width="600" height="400" fill="none" stroke="#ffe4e1" stroke-width="40" />
<circle cx="0" cy="0" r="150" fill="#ffe4e1" />
<text x="20" y="80" fill="#a0522d" font-size="27" font="sans-serif" font-weight="bold">WORK!</text>
</svg>

イメージの上に長方形のストロークと左上に円の図形を描き、テキストを入れています。ビューボックスがこのイメージとちょうどぴったりになるように設定していますので、円は右下のみしか表示されていません。

縦横比が違う場合の見え方

イメージ要素タグの幅と高さを元の画像とは違い、正方形にしてみます。

今度は勝手に正方形の中に納まるように縮小されてしまいました。（赤い長方形は元の画像の設定値での大きさ）

これは preserveAspectRatio属性 で、全体の拡大縮小や位置の初期値を指定されているからです。

位置の指定は　x座標軸(Min左寄, Mid真ん中, Max右寄) y座標軸(Min上寄, Mid真ん中, Max下寄)で、表記は xMinYMin と書きます。

拡大・縮小の指定は

meet	画像全体を表示（デフォルト）
slice	画像の一部を表示
none	サイズに合わせ縦横比を変える

拡大・縮小の指定方法

preserveAspectRatio=”xMInYMax meet”　と並べて指定します。

preserveAspectRatioを”none”にしてみると

正方形の形に引き伸ばされます。

<svg width="600" height="400" viewbox="0 0 600 400">
<image x="0" y="0" width="400" height="400" xlink:href="〇〇〇" preserveAspectRatio="none"/>
<rect x="0" y="0" width="600" height="400" fill="none" stroke="red" stroke-width="5" />
</svg>