SVGにラスター画像（jpgやpng）を組み合わせる

クラウド事業部のたまです。
すっかりシリーズ化していますが、今回もsvgファイルについて。

以前、svgはベクター画像であるということをご紹介しましたが、実はファイルの中にjpgやpngといったラスタ形式の画像を組み合わせることができるんです！

こちらは元の可愛い猫画像。この画像をsvgファイルに組み込んでみましょう。

コード————————————————————————————-

<svg id="neko_neko" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 427">
    <defs>
        <style>
            .neko {
                fill: none;
                stroke: #e61673;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 21.78px;
            }
        </style>
    </defs>
    <g id="neko_love">
        <image width="640" height="427" xlink:href="../../svg/neko.jpg" />
        <path class="neko"
            d="M320.28,100.26c18.11-49.08,63.13-72.71,113.66-72.71,60.41,0,106.52,42.62,106.52,94.02,0,62.06-40.08,107.92-81.26,150.06-39.52,40.3-118.6,110.71-138.92,127.83h-1.1c-20.32-17.12-98.86-87.53-138.38-127.83-41.18-42.14-81.26-88-81.26-150.06,0-52.35,47.77-94.02,107.06-94.02,49.99,0,94.45,23.63,112.58,72.71h1.1Z" />
    </g>
</svg>

————————————————————————————-

<image>　で指定されているのが猫のjpgファイル、<path>の部分がハートのsvgのパス指定です。
コードは上から下に読み込まれるので、jpgファイルが先に読み込まれ、ハート部分はjpgの上に重なるように描画されているんですね。
もちろん、逆にもできます。

可愛い猫の画像を切り抜いてpngにし、ハートの上に重ねてみました。

コード————————————————————————————-

<svg id="neko_neko2" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 341.68 291.57">
    <defs>
        <style>
            .neko2 {
                fill: #e51373;
            }
        </style>
    </defs>
    <g id="neko_love2">
        <path class="neko2"
            d="M171.06,56.35C185.09,18.31,219.98,0,259.13,0c46.81,0,82.55,33.02,82.55,72.86,0,48.09-31.06,83.63-62.97,116.29-30.63,31.23-91.9,85.79-107.65,99.06h-.85c-15.75-13.27-76.61-67.83-107.24-99.06C31.06,156.49,0,120.95,0,72.86,0,32.29,37.02,0,82.97,0c38.74,0,73.19,18.31,87.24,56.35h.85Z" />
        <image width="239" height="280" transform="translate(39.62 11.57)" xlink:href="../../svg/neko.png" />
    </g>
</svg>

————————————————————————————-

重なっているのが透過pngなので、背景のsvgがちゃんと見えていますね。
以前ご紹介したように、styleをcssに書き出すことで、cssのみでsvgの色を簡単に変えることも可能です。

cssに書き出すことで、オンマウスでsvg部分のみ色を変えたりアニメーションしたりもできますね。

画像を重ねて表示することはcssを使って要素を重ねることも可能ですが、一つのファイルとして扱うことで扱いやすくなります。
svgファイルの特性を生かして、どんな面白いことができるか考えるのも楽しいですね。